Scribd Logo
Upload

Welcome to Scribd!

  • HTML Project 8 Vocabulary

    Uploaded by

    angela_edel
    81 views2 pages
    Cascading style sheets are used to maintain a consistent look across a Web site. There are three different style sheets: 1. Embedded style sheets 2. External style sheets 3. Inline style sheets.

    Original Description:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Cascading style sheets are used to maintain a consistent look across a Web site. There are three different style sheets: 1. Embedded style sheets 2. External style sheets 3. Inline style sheets.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    81 views2 pages

    HTML Project 8 Vocabulary

    Uploaded by

    angela_edel
    Cascading style sheets are used to maintain a consistent look across a Web site. There are three different style sheets: 1. Embedded style sheets 2. External style sheets 3. Inline style sheets.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    HTML Project 8 Vocabulary

    Creating Style Sheets

    Cascading style sheets are used to maintain a consistent look across a Web site—especially Web sites that contain
    many pages.

    There are three different style sheets:


    1. embedded style sheets
    2. external style sheets
    3. inline style sheets

    style  A rule that defines the appearance of an element on a Web page


    style sheet  A series of rules that defines the appearance of an element on a Web page
     Cascading Style Sheets
    CSS  A common language with set standards and rules that allows Web developers to write code
    statements that control the style of elements on a Web page

     Made up of a selector and a declaration that defines the style for one or more properties

    <h1 style =”font-family: Garamond; font-color: navy”>

    selector  Part of the style statement that identifies the page elements
    declaration  Part of the style statement that identifies how the elements should display
     Includes at least one type of style, or property, to apply to the selected
    element
    style statement
    o Properties include color; text-indent; border-width; font-style
    o For each property, the declaration includes a related value—which
    specifies the display parameters for that specific property

    h1 {font-family: Garamond; First property value sets the h1 font family to Garamond
    font-size: 32 pt} Second property value sets the font size to 32 point
    (The browser will display all h1 headers in 32-point Garamond)
    selector declaration

     Add a style to an individual HTML tag, such as a heading or paragraph


     The style changes that specific tag, but does not affect other tags in the document
     Takes precedence over both embedded and external style sheets—helpful when one section of
    inline style sheet a Web page needs to have a different style than the rest of the Web page

    <p style=”font-style: italic; font-size: 8 pt”>


    (Changing the style for one paragraph)
    embedded style  Add the style sheet within the <head> tags of the HTML document to define the style for a
    sheet single Web page
     Use the start <style> tag at the top of the Web page within the <head> tags and then the end
    </style> tag
     Has the second highest level of precedence—takes precedence over an external style sheet

    <style type=”text/css”>
    <!--

    p {text-indent: 8 pt} selector p defines the style for all paragraphs—indented 8 points
    selector a used to indicate the link element
    a {text-decoration: none; text-decoration: none changes the default to no line for links;
    font-family: Verdana;
    font-size: 14 pt; Changes the font, color and point size of the links
    color:navy}

    a:hover {background: navy; color: white}


    defines the style of a link when the mouse pointer points to, or hovers over the link
    -->
    </style>
     Create a text file that contains all of the styles you want to apply and then save the text file
    with the file extension, .css
     Then add a link to this external style sheet into any Web page in the Web site
     Give the most flexibility and are ideal to apply the same formats to all of the Web pages in a
    Web site
    No style tags are needed; just style statements
    A {text –decoration: none;
    color: blue}

    P {font family: Verdana, Garamond;


    font-size: 11pt}

    external style table {font-family: Verdana, Garamond;


    sheet (linked) font-size: 11pt}
    Enter the style statements in Notepad and save the file
    with a .css extension
    th {color: white;
    background-color: blue;
    font-size: 11pt; Add a link tag on each Web page to which you want to
    text-align: left} apply the styles

    This link tag must be inserted within the <head> tags of each Web page
    to which you want to apply the stylesheet

    <link rel=”stylesheet” type=”text/css” href=”styles1.css”>

     You can create several different variations for any one tag
     You might utilize three different classes of paragraphs, and each one can have a different style
    sheet declaration
     You can name classes anything that you want, but be sure to use a period before the class
    name in the style sheets rule

    <style type=”text/css”>
    <!-->

    p.beginning {color: red}


    Defining Classes:
    p.middle {color: green}
    Style Statements
    classes
    p.end {color: navy}

    -->
    </style>

    <p class=beginning> This paragraph will have red text. </p>


    Applying the
    classes to the
    <p class=middle> This paragraoh will have green text </p>
    paragraphs
    <p class=end> This paragraph will have navy text </p>

    You might also like