Scribd Logo
Importer

Bienvenue sur Scribd !

  • 3.02 Basic CSS Properties Notes

    Transféré par

    isaiah8195
    56 vues4 pages
    iuytrfd

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    iuytrfd

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    56 vues4 pages

    3.02 Basic CSS Properties Notes

    Transféré par

    isaiah8195
    iuytrfd

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 4

    3.

    02 Basic CSS Properties Notes


    Basic Tags
    Inline Style Creates an inline style. Code is placed inside the opening tag of the desired
    tag.
    style=property: value
    Example: <p style=color:red>
    Internal Style Sheet Creates an internal style sheet. Code is placed in the <head>
    section.
    <style type=text/css>
    hr {color: red;}
    </style>
    External Style Sheet Links the webpage to an external style sheet.
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
    </head>
    Body Styles
    background-color:yellow; Sets the background color.
    background-image:url('paper.gif'); Sets the background to an image.
    Text Styles
    color:red; Changes the text color. Values: name, hexadecimal (#ff0000), rgb(255,0,0).
    text-align:center; Aligns the text horizontally. Values: left, right, center, justify.
    text-decoration:underline; Underlines text..
    text-indent:50px; Indents text from the left.
    text-transform:uppercase; Controls capitalization. Values: none, capitalize,
    uppercase, lowercase.
    Font Styles
    font-family:arial; Sets the typeface for text. Typefaces with multiple words in their
    name should be enclosed inside quotes. Values: font name, generic name (serif, sansserif, cursive, fantasy, monospaced)
    font-size:100%; Sets the font size. Values: xx-small, x-small, small, medium, large, xlarge, xx-large, smaller, larger, %
    font-style:normal; Sets the font style for paragraphs. Values: normal, italic, oblique.
    Link Styles
    a:link {color:#FF0000;} Sets color for an unvisited link.
    a:visited {color:#FF0000;} Sets color for an visited link.
    a:hover {color:#FF0000;} Sets color for a mouse over link.
    a:active {color:#FF0000;} Sets color for the selected link.
    List Styles
    list-style-image:url(image.gif); Sets list item marker to an image.
    list-style-type: Sets the item marker type. Values: none, circle, disc, square, decimal,
    lower-alpha, lower-greek, lower-lating, lower-roman, upper-alpha, upper-latin, upper-

    roman
    A list of CSS properties can be found online at:
    http://www.w3schools.com/css/css_reference.asp

    3.02 CSS Internal Style Sheet Activity

    Name _____________________

    Retrieve the HTML webpage that you created in 3.02 Creating an HTML Webpage (My
    HTML Webpage). Create a CSS internal style sheet that will apply the features in the
    chart below to the entire page. As needed, refer to the 3.02 CSS Tutorial Notes that
    you completed, or the W3Schools CSS Tutorial
    http://www.w3schools.com/css/default.asp and CSS reference charts posted on the site.
    Complete the individual steps below and then show the coding for the entire style sheet
    in the last cell.
    Style

    Code

    Define Internal Style


    Sheet (within head
    section)
    Text color green
    Text alignment center
    Font-family Verdana
    Text size 16 pixels

    Show Complete Internal


    Style Sheet Coding

    When you have completed the internal style sheet coding, exchange your code with
    another student. Each student should evaluate the other student's code, checking for
    correct coding for each item in the checklist above. Give the other student constructive
    feedback about his/her CSS style sheet coding.

    3.02 CSS Internal Style Sheet ActivityKey


    Retrieve the HTML webpage that you created in 3.02 Creating an HTML Webpage (My
    HTML Webpage). Create a CSS internal style sheet that will apply the features in the
    chart below to the entire page. As needed, refer to the 3.02 CSS Tutorial Notes that
    you completed, or the W3Schools CSS Tutorial
    http://www.w3schools.com/css/default.asp and CSS reference charts posted on the site.
    Complete the individual steps below and then show the coding for the entire style sheet
    in the last cell.
    Style

    Code

    Define Internal Style


    Sheet

    <head>
    <style type="text/css"> (insert coding below)
    </style>
    </head>

    Text color green

    body {color:green;}

    Text alignment center

    p {text-align:center;}

    Font-family Lucida
    Console

    p {font-family:"Lucida Console";}

    Text size 16 pixels

    p {font-size:16px;}

    Show Complete Internal


    Style Sheet Coding

    <head>
    <style type="text/css">
    body {color:green;text-align:center;fontfamily:"Lucida Console";font-size:16px;}
    </style>
    </head>

    Vous aimerez peut-être aussi