0 index
1 Cascading Style Sheets
2 But What is Cascading?
3 Advantages
4 Disadvantages
5 Using Style Sheets
6 How do Style Sheets Work?
7 Adding Style Sheets to your HTML document
8 Inline Styles
9 Inline Styles Continued
10 Embedded Style Sheet
11 Embedded Style Sheet Continued
12 Extenal Style Sheets
13 External Style Sheets Continued
14 Inheritance
15 Inheritance Continued
16 What causes Style Sheets to Cascade?
17 The Cascade Order
18 The Cascade Order Continued
19 Selectors
20 Type Selectors
21 <div> and <span>
22 Contextual Selectors
23 CLASS Attribute Selectors
24 ID Attribute Selectors
25 Properties
26 Positioning with Style Sheets
27 Absolute Positioning
28 Static Positioning
29 Best Reference

outline
created using slideshow.cgi by Andy Harris















CSCI N241 Web Design: CSS
1. Cascading Style Sheets
  • Allow you to apply typographic styles and spacing on a Web page, somewhat like that of desktop publishing.



































CSCI N241 Web Design: CSS
2. But What is Cascading?
  • This refers to what is happening when several sources of style information are vying for the control of the elements on a Web page.
  • Style is cascaded down from higher level style sheets until the style is overridden by a style command with more weight.



































CSCI N241 Web Design: CSS
3. Advantages
  • Greater layout controls
    - font size/style
    - line spacing
    - etc.
  • Style is separate from the structure of the document thus creating potentially smaller documents and allowing easier site maintenance.



































CSCI N241 Web Design: CSS
4. Disadvantages
  • Browser support



































CSCI N241 Web Design: CSS
5. Using Style Sheets
  • Make sure you include ending tags </p>, </li>, etc.
  • Create your site style-sheet-free first, once you are happy with the regular look, add style sheet information. Remember, some people still use older browser versions, so know your audience.



































CSCI N241 Web Design: CSS
6. How do Style Sheets Work?
  • Style sheets contain one or more rules for how the page should be displayed.
  • A rule contains a selector {property:value} and is a declaration of how a page element should be displayed.
  • A declaration may contain several properties and values separated by semicolons(;).



































CSCI N241 Web Design: CSS
7. Adding Style Sheets to your HTML document
  • Three methods:
    - Inline Styles
    - Embedded Style Sheet
    - External Style Sheet



































CSCI N241 Web Design: CSS
8. Inline Styles
  • You can information to an individual element by using the style attribute within the HTML tag
  • An Eample:
    <H1 STYLE="color: blue">

    This Heading Will Be Blue

    </H1>



































CSCI N241 Web Design: CSS
9. Inline Styles Continued
  • While using this type of style is acceptable, it is really equivalent to using the <font> tag.
  • Any changes would need to be made to every tag and in every file.
  • Inline Styles are best used occasionally to override higher-level rules.



































CSCI N241 Web Design: CSS
10. Embedded Style Sheet
  • You embed the style in the top of the HTML document using a <style> element.
  • Example:
    <HTML>
    <HEAD>
    <STYLE SHEET = "text/css">
    <!--
    H1 { color: blue}
    P {font-size: 14pt; font-face: MS Comic Sans}
    -->
    </STYLE>
    <TITLE>….</TITLE>
    </HEAD>



































CSCI N241 Web Design: CSS
11. Embedded Style Sheet Continued
  • Your must put the <STYLE> element in the <HEAD> tag of the document within comment (<-- and -->) tags. By using the comment tags, this hides the CSS from browsers that do not understand the <STYLE> tags



































CSCI N241 Web Design: CSS
12. Extenal Style Sheets
  • This the best way to use style sheets.
  • You can collect the styles in a separate text document and create links to that document for any or all of the HTML pages in a site.
  • This allows you to change information in the text document to change the style instead of changing each <tag> in a site.



































CSCI N241 Web Design: CSS
13. External Style Sheets Continued
  • The text document is created by using the .css suffix
  • You can refer to the external style sheet in two ways
    - Linking using the <LINK REL = "STYLESHEET" HREF = "/pathname/stylesheet.css" TYPE = "text/css"> in the <HEAD>
    - Importing into the <STYLE> element



































CSCI N241 Web Design: CSS
14. Inheritance
  • Style sheet properties are passed down from an element (the parent) to any element contained within it (the child).
  • The element inherits properties applied to elements higher in the HTML hierarchy.



































CSCI N241 Web Design: CSS
15. Inheritance Continued
  • Example:
    - if you specify that all the text in the body is to be BLUE, then all of the text elements in the body will be blue
  • If you list two rules of equal weight in the style sheet, the later one will apply.



































CSCI N241 Web Design: CSS
16. What causes Style Sheets to Cascade?
  • When more than one type of style sheet is used (inline, embedded, or external) simultaneously to change the page presentation, the style sheet "cascades"
  • So which style is used?
    - the W3C devised a hierarchical system that assigns different weights to each type of style information.



































CSCI N241 Web Design: CSS
17. The Cascade Order
  • Elements lower in the following list have more weight and will override styles above them:
    - browser default settings
    - user style settings (set in browser)
    - linked external style sheet
    - imported style sheets, when more than one is imported, the last file read will take precedence over the first ones listed.



































CSCI N241 Web Design: CSS
18. The Cascade Order Continued
  • Embedded style sheets (<STYLE> element)
  • Inline style information
  • HTML tag attributes, which override all style information defined anywhere



































CSCI N241 Web Design: CSS
19. Selectors
  • These are the parts of the rule that identifies the element or elements. There are several methods for identifying these elements
    - Type selectors
    - Contextual selectors
    - CLASS and ID attribute selectors
    - Pseudo-selectors



































CSCI N241 Web Design: CSS
20. Type Selectors
  • This is the simplest and calls an HTML element by its tag
  • Example:
    P {color: red:}
    H1 {color: red}
    H1, P {color: red} (type selectors grouped together separated by commas) allows you to apply a single property to all of the type selectors.



































CSCI N241 Web Design: CSS
21. <div> and <span>
  • These elements were created especially for style sheets.
  • <div> tag is used to delimit block-level tags and can contain other HTML elements.
  • <span> is used inline to change the style of a set of characters



































CSCI N241 Web Design: CSS
22. Contextual Selectors
  • Style attributes for HTML elements can be specified based on the context in which they appear
  • Example: LI EM {color: red}
    this indicates that the EM (emphasized) text that appears within a list item will be shown in red.
  • Another Example: H1 B, H2 B, H3 B {color: blue} indicates that all text when it appears in the context of the heading with be BLUE and BOLD



































CSCI N241 Web Design: CSS
23. CLASS Attribute Selectors
  • This is like creating a variable
  • You can specify all items in the HTML document that you consider "important" and add this class "name" to the HTML selector
  • Example:
    <P CLASS = "important"> Read this important message</P>
    then "call" the class as P.important {color: red}
    important is the "name" of the HTML selector <P>



































CSCI N241 Web Design: CSS
24. ID Attribute Selectors
  • The ID attribute is used similarly to CLASS, but it is used for targeting specific elements rather than classifying them.
  • If several elements need treatment, use the CLASS attribute, however, if you have a specific element that must be unique, use the ID attribute
  • Example:
    <P ID = "061998">NEW ITEM ADDED TODAY</P>
  • P#061998 {color: red} - format used within the style sheet



































CSCI N241 Web Design: CSS
25. Properties
  • Type-related
    -font-family
    -font-style
    -font-size
    -color
  • Box Properties
    -margins (-top, -right, -left, - bottom)
    -border (-top-width, -right-width, -bottom-width, -left-width)
    -border-style (solid, dotted, groove, etc.)



































CSCI N241 Web Design: CSS
26. Positioning with Style Sheets
  • This property has three possible values: absolute, relative, static
  • Relative - places the element relative to its initial position in the flow. When the element is moved, the space it previously occupied is left blank.



































CSCI N241 Web Design: CSS
27. Absolute Positioning
  • This places the element in an arbitrary position, meaning that the space it previously occupied is closed up.
  • The absolutely positioned element has no margins



































CSCI N241 Web Design: CSS
28. Static Positioning
  • This is the default value for the position property.
  • Static elements cannot be positioned or repositioned



































CSCI N241 Web Design: CSS
29. Best Reference
  • Web Design in a Nutshell by Jennifer Niederst



































outline

Cascading Style Sheets

But What is Cascading?

Advantages

Disadvantages

Using Style Sheets

How do Style Sheets Work?

Adding Style Sheets to your HTML document

Inline Styles

Inline Styles Continued

Embedded Style Sheet

Embedded Style Sheet Continued

Extenal Style Sheets

External Style Sheets Continued

Inheritance

Inheritance Continued

What causes Style Sheets to Cascade?

The Cascade Order

The Cascade Order Continued

Selectors

Type Selectors

<div> and <span>

Contextual Selectors

CLASS Attribute Selectors

ID Attribute Selectors

Properties

Positioning with Style Sheets

Absolute Positioning

Static Positioning

Best Reference