Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 45 views

    Introduction To Cascading Style Introduction To Cascading Style Sheets (CSS) Sheets (CSS)

    Uploaded by

    Shahad Tallab
    Cascading Style Sheets (CSS) allow for greater typography and page layout control by separating style from structure. This chapter covers creating style sheets that configure common color and text properties using inline, embedded, and external styles. It also discusses CSS class and id selectors and validating CSS.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd

    Introduction To Cascading Style Introduction To Cascading Style Sheets (CSS) Sheets (CSS)

    Uploaded by

    Shahad Tallab
    45 views35 pages
    Cascading Style Sheets (CSS) allow for greater typography and page layout control by separating style from structure. This chapter covers creating style sheets that configure common color and text properties using inline, embedded, and external styles. It also discusses CSS class and id selectors and validating CSS.

    Original Title

    week4

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Cascading Style Sheets (CSS) allow for greater typography and page layout control by separating style from structure. This chapter covers creating style sheets that configure common color and text properties using inline, embedded, and external styles. It also discusses CSS class and id selectors and validating CSS.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    45 views35 pages

    Introduction To Cascading Style Introduction To Cascading Style Sheets (CSS) Sheets (CSS)

    Uploaded by

    Shahad Tallab
    Cascading Style Sheets (CSS) allow for greater typography and page layout control by separating style from structure. This chapter covers creating style sheets that configure common color and text properties using inline, embedded, and external styles. It also discusses CSS class and id selectors and validating CSS.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 35

    Introduction to Cascading Style Sheets (CSS)

    Chapter 3

    Learning Outcomes
    In this chapter, you will learn to:
    List advantages of using Cascading Style Sheets Create style sheets that configure common color and text properties Apply inline styles Use embedded style sheets Use external style sheets Create CSS class and id selectors Validate CSS

    Before we start

    What aesthetic components can you add to a web page?

    The Magic of CSS


    The CSS Zen Garden.

    http://www.csszengarden.com

    Overview of Cascading Style Sheets (CSS)


    Style Sheets
    used for years in Desktop Publishing apply typographical styles and spacing to printed media

    CSS
    provides the functionality of style sheets (and much more) for web developers a flexible, cross-platform, standards-based language developed by the W3C.

    CSS Advantages
    Greater typography and page layout control Style is separate from structure Styles can be stored in a separate document and linked to from the web page Potentially smaller documents Easier site maintenance
    6

    Levels of Cascading Style Sheets (1 (1)


    Inline Styles Embedded (document) Styles External Styles Imported Styles

    Levels of Cascading Style Sheets (2 (2)


    1.

    Inline Styles
    Configured in the body of the Web page Use the style attribute of an XHTML tag Apply only to the specific element

    2.

    Embedded (document) Styles


    Configured in the header section of a Web page. Use the XHTML <style> element Apply to the entire Web page document

    Levels of Cascading Style Sheets (3 (3)


    3.

    External Styles
    Configured in a separate text file with .css file extension The XHTML <link /> element in the header section of a Web page associates it with the .css file

    4.

    Imported Styles
    Similar to External Styles, uses the @import directive
    @import url(file name);

    Well concentrate on the other three types of styles.


    9

    Configuring Color with Inline CSS (1 (1)


    The Style Attribute
    Value: one or more style declaration property and value pairs

    Example: configure red color text in an <h1> element: <h1 style="color:#ff0000">Heading text is red</h1>

    10

    Configuring Color with Inline CSS (2)


    Example 2: configure the red text in the heading configure a gray background in the heading Separate style rule declarations with ;
    <h1 style="color:#FF0000;background-color:#cccccc">This is displayed as a red heading with gray background</h1>

    11

    Color Property Values


    color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow RGB codes: red, green, and blue values from 0 (none) to 255 (full) hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)

    12

    Embedded (document) CSS Syntax


    Style sheets are composed of "Rules" that describe the styling to be applied. Each Rule contains a Selector and a Declaration

    13

    CSS Syntax Sample


    Configure a Web page to display blue text and yellow background. body { color: blue; background-color: yellow; } This could also be written using hexadecimal color values as shown below. body { color: #0000FF; background-color: #FFFF00; }

    14

    CSS Embedded Styles


    Configured in the header section of a Web page. Use the XHTML <style> element Apply to the entire Web page document Style declarations are contained between the opening and closing <style> tags The type attribute indicates the MIME type of text/css Example: Configure a Web page with white text on a black background <style type ="text/css"> body { background-color: #000000; color: #FFFFFF; } </style>
    15

    Checkpoint 1

    Describe one advantage to using embedded styles instead of inline styles.

    16

    Common Formatting CSS Properties


    Common CSS Properties, include:
    background-color color font-family font-size font-style font-weight line-height margin text-align text-decoration width

    17

    Configuring Text with CSS


    CSS properties for configuring text:
    font-weight
    Configures the boldness of text

    font-style
    Configures text to an italic style

    font-size
    Configures the size of the text

    font-family
    Configures the font typeface of the text

    18

    The fontfont-size Property

    Accessibility Recommendation:
    Use em or percentage font sizes these can be easily enlarged in all browsers by users
    19

    The fontfont-family Property

    Not everyone has the same fonts installed in their computer Configure a list of fonts and include a generic family name

    p {font-family: Arial,Verdana, sans-serif;}


    20

    The fontfont-family Property


    Font shorthands For specifying a list of font properties
    font: bolder 14pt Arial Helvetica

    Order must be: style, weight, size, font name(s)

    21

    CSS Selectors
    CSS style rules can be configured for an:
    HTML element selector (simple selector) class selector id selector

    22

    HTML element Selectors

    The selector is a tag name or a list of tag names, separated by commas


    p { color: blue; } h1, h2, h3, h4 { fontstyle: italic; } /*(grouping)*/

    Contextual (descendent) selectors


    body ol li{ font-weight:

    bold; }
    23

    Generic Class Selector


    Apply a CSS rule to a certain "class" of elements on a Web page Does not associate the style to a particular XHTML element <style type="text/css"> .new { color: #FF0000; font-style: italic; } </style>

    Configure with .classname


    The sample creates a class called new with red italic text.

    To use the class, code the following XHTML:


    <p class=new>This is text is red and in italics</p>

    24

    Element Class Selector


    A style class has a name, which is attached to a tag name
    p.narrow {property/value list} p.wide {property/value list} <p class = "narrow"> ... </p> ... <p class = "wide"> ... </p>

    25

    id Selector
    Apply a CSS rule to ONE element on a Web page. Configure with #idname
    <style type="text/css"> #new { color: #FF0000; font-size:2em; font-style: italic; } </style>

    The sample creates an id called new with red, large, italic text. To use the id, code the following XHTML:
    <p id=new>This is text is red, large, and in italics</p>

    26

    CSS PseudoPseudo-classes
    Pseudo classes are styles that apply when something happens, rather than because the target element simply exists Names begin with colons hover classes apply when the mouse cursor is over the element focus classes apply when an element has focus
    27

    CSS PseudoPseudo -classes


    <style type="text/css"> a:link { background-color: #ffffff; color: #ff0000; } a:visited { background-color: #ffffff; color: #00ff00; } a:hover { background-color: #ffffff; color: #000066; text-decoration: none; } </style>
    28

    External Style Sheets - 1


    CSS style rules are contained in a text file separate from the XHTML documents. The External Style Sheet text file:
    extension ".css" contains only style rules does not contain any XHTML tags

    29

    External Style Sheets - 2


    Multiple web pages can associate with the same external style sheet file.
    site.css
    body {background-color:#E6E6FA; color:#000000; font-family:Arial, sans-serif; font-size:90%; } h2 { color: #003366; } .nav { font-size: 16px; font-weight: bold; }
    index.htm

    clients.htm

    about.htm

    Etc
    30

    The <link /> Element


    A self-contained tag Placed in the header section Purpose: associates the external style sheet file with the web page. Example:
    <link rel="stylesheet" href="color.css" type="text/css" />

    31

    Using an External Style Sheet


    External Style Sheet color.css body { background-color: #0000FF; color: #FFFFFF; }

    To link to the external style sheet called color.css, the XHTML code placed in the header section is: <link rel="stylesheet" href="color.css" type="text/css" />
    32

    W3C CSS Validation


    http://jigsaw.w3.org/css-validator/

    33

    CSS Troubleshooting Tips


    Verify you are using the : and ; symbols in the right spotsthey are easy to confuse. Check that you are not using = signs instead of : between each property and its value. Verify that the { and } symbols are properly placed Check the syntax of your selectors, their properties, and property values for correct usage. If part of your CSS works, and part doesnt:
    Review your CSS Determine the first rule that is not applied. Often the error is in the rule above the rule that is not applied.

    Validate your CSS at http://jigsaw.w3.org/css-validator

    34

    Summary
    This chapter introduced you to Cascading Style Sheet Rules associated with color and text on web pages. You configured inline styles, embedded styles, and external styles. You applied CSS style rues to HTML, class, and id selectors. You are able to submit your CSS to the W3C CSS Validation test.

    35

    You might also like