Getting Started

1
Cascading Style Sheets CSS
2
Cascading Style Sheets

• CSS is a core technology of dynamic HTML (DHTML),
  which also includes HTML and scripting languages
  like JavaScript.
• Allow the manipulation of Web content and the
  creation of interactive pages.
• CSS-1 is the first specification and is only
  partially supported by Netscape Navigator 4 and
  Internet Explorer 4.
• CSS-2 expands on CSS-1
• CSS-3 is under development (www.w3c.org)

3
Cascading Style Sheets

• HTML was originally intended to denote a
  documents structure. Elements like the ltH1gt tag
  and ltPgt made up the structure of the page.
• Later, attributes were added to these tags to try
  to improve the design of Web pages
• Example ltFONTgt tag
• Added attributes like FACE, COLOR, SIZE, etc.
• CSS is a way to separate structure from design.

4
Exploring HTML Tags for Hyperlinks

• HTML tags come in pairs surrounding the text
• lttaggtSome textlt/taggt
• Tags can be used together, or nested
• lttag2gtlttaggtSome textlt/taggtlt/tag2gt
• Tags can also contain attributes within the
  opening tag
• lttag colorx sizexgtSome Textlt/taggt
• Reference sites for HTML tags include
• www.webmonkey.com and www.w3c.org

5
Four Types of Style Sheets

• Inline Styles
• We wont use these much, if at all.
• Embedded Style Sheets
• Linked or External Style Sheets
• Imported Style Sheets
• Uses _at_import notation to link documents to style
  sheets
• We wont use this one.

6
Inline Styles

• Inline Styles
• Inserted directly into any HTML tag by using the
  ltSTYLEgt attribute
• Defeats the fundamental purpose of using style
  sheets if used too frequently
• If you want to change the style, you have to
  hunt through the HTML and change each inline
  style one by one
• Useful if you need a single instance of a
  particular style
• ltH1 STYLEcolor redgtSome textlt/H1gt

7
Embedded Style Sheets

• Embedded Style Sheets
• Placed in the HEAD section and influence the
  current document
• ltHEADgt
• ltSTYLE typetext/cssgt
• P color blue font-size 24pt
• lt/STYLEgt
• lt/HEADgt

8
Embedded Style Sheets
Declaration
Selector
H1 color blue font-size 24pt
Property
Value
9
External Style Sheets

• Applying CSS across a Web site requires the
  creation of an external style sheet.
• Using an external style sheet enables you to make
  site-wide stylistic changes by updating one file.
• You can either create the styles in the external
  style sheet, or export them to it if they are
  already created.
• To export styles to an external style sheet, the
  Web page where the styles are located must be
  open.

10
External Style Sheets

• The external style sheet is a simple text file
  containing all of the style rules
• It has the extension .css
• It is contained in the ltHEADgt tag
• ltLINK RELstylesheet TYPEtext/css
  HREFmystyles.cssgt
• The .css file will contain the style rules.
  Example
• P font-family non-serif font-size medium
  color redH1 font-family serif font-size
  x-large color greenH2 font-family serif
  font-size large color blue

11
Examining Code for CSS Styles

• An external style sheet can be used whenever the
  Web page contains a link to it in its head and
  the styles are located in the style sheet.
• The general format for link tags is
• ltlink relstylesheet hrefstylesheeturl.css
  typetext/cssgt
• Link identifies the type of tag
• Rel indicates relationship between the link and
  the page
• Href is the URL of the linked document
• Type is the form of the content that will follow

12
Using External Style Sheets

• Once you have created an external style sheet,
  you must delete the styles from within the
  document in order to avoid duplicates and
  confusion.
• To delete, click the Minus button, then click the
  appropriate name and the Delete CSS Style button.
• By deleting unused styles, you are eliminating
  unnecessary materials from the site, reducing the
  size of the files, and eliminating clutter.

13
Using External Style Sheets

• Now you will want to apply the external style
  sheet to the Web pages that you want to format
  with those styles.
• You use the same methods already learned to apply
  the external style sheet formatting to a page.
• You can add new styles to the external style
  sheet at any time by choosing the style sheet by
  name when creating the new style.

14
Examining Code for CSS Styles
The comment tag is nested within the style
tag lt! - - style definitions - -gt Comment tags
are used to hide the style definitions from older
browsers and
15
Cascading or Inheritance

• Cascading refers to the hierarchical order in
  which different style sheet types interact when
  conflicts arise.
• The prevailing principle of cascading order is
  that rules cascade from general to specific and
  from external to local

16
Cascading or Inheritance Example

• An external style sheet declares that all H1
  headings are displayed in blue and 24 pts.
• H1 color blue font-size 24pt
• An embedded style declares that all H1 headings
  are displayed in green.
• H1 color green font-size 24pt
• An inline style declares that all H1 headings are
  red
• ltH1 STYLEcolor redgtSome textlt/H1gt
• How will the H1 be displayed on the page?

17
Cascading or Inheritance Example

• All the H1 headings will be
• 24 pts and green
• The heading style inherits 24 pts., but the green
  overrides the blue.
• The H1 heading with the inline style will be 24
  pts. and red just for that instance.
• The inline style overrides the embedded style.

18
Editing CSS Styles

• The ability to edit styles is one of the more
  powerful aspects of Cascading Style Sheets.
• When you edit a style, the changes are applied
  automatically across the Web site wherever that
  style was used.
• You can control the look and the consistency of
  the entire Web site from one centralized set of
  specifications.
• You can edit styles in the CSS Style Definition
  dialog box.
• The changes you make will override the original
  style attribute selections.

19
Exploring HTML Tags Used with Text

• It is not a good idea to add CSS styles to Web
  sites created in an older version of HTML.
• You can modify these pages in a number of ways
• Creating the code manually in Code view
• Set preferences so Dreamweaver uses only HTML
  tags to format pages
• I also use the Find and Replace feature to strip
  out old tags like the FONT tag.