Scribd Logo
Upload

Welcome to Scribd!

  • 85 views

    Jeffrey Miller, Ph.D. Jeffrey - Miller@usc - Edu: CSCI 201 Principles of Software Development

    Uploaded by

    John Mathias
    The document discusses CSS (Cascading Style Sheets) and how they are used with HTML to describe how elements should be displayed. It provides examples of including CSS through inline styles, internal style tags, and external style sheets. The examples demonstrate how to style HTML elements using IDs, classes, and block elements. Finally, it mentions popular CSS frameworks like Bootstrap that help with tasks like responsiveness, and provides resources to learn more about CSS.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Jeffrey Miller, Ph.D. Jeffrey - Miller@usc - Edu: CSCI 201 Principles of Software Development

    Uploaded by

    John Mathias
    85 views13 pages
    The document discusses CSS (Cascading Style Sheets) and how they are used with HTML to describe how elements should be displayed. It provides examples of including CSS through inline styles, internal style tags, and external style sheets. The examples demonstrate how to style HTML elements using IDs, classes, and block elements. Finally, it mentions popular CSS frameworks like Bootstrap that help with tasks like responsiveness, and provides resources to learn more about CSS.

    Original Description:

    CSCI 201

    Original Title

    Css

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses CSS (Cascading Style Sheets) and how they are used with HTML to describe how elements should be displayed. It provides examples of including CSS through inline styles, internal style tags, and external style sheets. The examples demonstrate how to style HTML elements using IDs, classes, and block elements. Finally, it mentions popular CSS frameworks like Bootstrap that help with tasks like responsiveness, and provides resources to learn more about CSS.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    85 views13 pages

    Jeffrey Miller, Ph.D. Jeffrey - Miller@usc - Edu: CSCI 201 Principles of Software Development

    Uploaded by

    John Mathias
    The document discusses CSS (Cascading Style Sheets) and how they are used with HTML to describe how elements should be displayed. It provides examples of including CSS through inline styles, internal style tags, and external style sheets. The examples demonstrate how to style HTML elements using IDs, classes, and block elements. Finally, it mentions popular CSS frameworks like Bootstrap that help with tasks like responsiveness, and provides resources to learn more about CSS.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 13

    CSS

    CSCI 201
    Principles of Software Development

    Jeffrey Miller, Ph.D.


    [email protected]
    Outline
    • CSS
    • Program

    USC CSCI 201L


    CSS
    ▪ Cascading Style Sheets (CSS) are used in
    conjunction with HTML to describe how HTML
    elements should be displayed
    ▪ CSS can be included in three ways
    1. Inline in an HTML element through
    the style attribute
    2. In the <style> tag in an HTML document
    3. In an external file that is included in an HTML
    document in the <link> tag
    • In the <head> tag, include
    <link rel=“stylesheet” type=“text/css” href=“test.css” />

    USC CSCI 201L 3/13


    HTML Page
    <!DOCTYPE html>
    <html>
    <head>
    <title>My First CSS</title>
    </head>
    <body>
    <h2>CSCI 201</h2>
    <h4>This class is learning about HTML and CSS.</h4>
    <table>
    <tr>
    <th>Prefix</th>
    <th>Number</th>
    </tr>
    <tr>
    <td>CSCI</td>
    <td>104</td>
    </tr>
    <tr>
    <td>CSCI</td>
    <td>201</td>
    </tr>
    <tr>
    <td>EE</td>
    <td>101</td>
    </tr>
    </table>
    </body>
    </html>

    USC CSCI 201L 4/13


    style Tag
    1 <!DOCTYPE html>
    2 <html>
    3 <head>
    4 <title>My First CSS</title>
    5 <style>
    6 h2 {
    7 color: blue;
    8 }
    9 </style>
    10 </head>
    11 <body>
    12 <h2>CSCI 201</h2>
    13 <h4>This class is learning about HTML and CSS.</h4>
    14 <table>
    15 <tr>
    16 <th>Prefix</th>
    17 <th>Number</th>
    18 </tr>
    19 <tr>
    20 <td>CSCI</td>
    21 <td>104</td>
    22 </tr>
    23 <tr>
    24 <td>CSCI</td>
    25 <td>201</td>
    26 </tr>
    27 <tr>
    28 <td>EE</td>
    29 <td>101</td>
    30 </tr>
    31 </table>
    32 </body>
    33 </html>

    USC CSCI 201L 5/13


    id Attribute
    1 <!DOCTYPE html>
    2 <html>
    3 <head>
    4 <title>My First CSS</title>
    5 <style>
    6 h2 {
    7 color: blue;
    8 }
    9 #point12 {
    10 font-size: 12pt; No point12 id
    11 }
    12 </style>
    13 </head>
    14 <body>
    15 <h2 id=“point12”>CSCI 201</h2>
    16 <h4>This class is learning about HTML and CSS.</h4>
    17 <table>
    18 <tr>
    19 <th>Prefix</th>
    20 <th>Number</th>
    21 </tr>
    22 <tr>
    23 <td>CSCI</td>
    24 <td>104</td>
    25 </tr>
    26 <tr>
    27
    28
    <td>CSCI</td>
    <td>201</td> With point12 id
    29 </tr>
    30 <tr>
    31 <td>EE</td>
    32 <td>101</td>
    33 </tr>
    34 </table>
    35 </body>
    36 </html>

    USC CSCI 201L 6/13


    class Attribute
    1 <!DOCTYPE html>
    2 <html>
    3 <head>
    4 <title>My First CSS</title>
    5 <style>
    6 h2 {
    7 color: blue;
    8 }
    9 #point12 {
    10 font-size: 12pt;
    11 } No center class
    12 .center {
    13 text-align: center;
    14 }
    15 </style>
    16 </head>
    17 <body>
    18 <h2 id=“point12”>CSCI 201</h2>
    19 <h4 class=“center”>This class is learning about HTML and CSS.</h4>
    20 <table>
    21 <tr>
    22 <th>Prefix</th>
    23 <th>Number</th>
    24 </tr>
    25 <tr>
    26 <td>CSCI</td>
    27 <td>104</td>
    28 </tr>
    29
    30
    <tr>
    <td>CSCI</td> With center class
    31 <td>201</td>
    32 </tr>
    33 <tr>
    34 <td>EE</td>
    35 <td>101</td>
    36 </tr>
    37 </table>
    38 </body>
    39 </html>

    USC CSCI 201L 7/13


    HTML Block Tags
    ▪ div and span tags are often used with the style or class attribute
    › div is a block-level element
    › span is an inline element

    <!DOCTYPE html>
    <html>
    <head>
    <title>My First CSS</title>
    </head>
    <body>
    <h2>CSCI <span style="color:red">201</span></h2>
    <div style="background-color:blue; color:white">
    This class is learning about HTML and CSS.<br />
    Hopefully it will be fun.
    </div>
    </body>
    </html>

    USC CSCI 201L 8/13


    CSS Frameworks
    ▪ CSS Frameworks are very popular now to help programmers with
    some of the more common tasks, such as responsiveness (i.e. a
    web page that automatically resizes for different screen sizes)
    ▪ Bootstrap (https://getbootstrap.com/) is probably the most
    popular CSS Framework, though many others exist

    9/13
    More CSS
    ▪ For more information on CSS
    › Go to http://www.w3schools.com/css
    › Go to any web page and view the source (though you may need
    to find the stylesheet if it is external)

    10/13
    Outline
    • CSS
    • Program

    USC CSCI 201L


    Program
    ▪ Create one HTML page that is formatted in the following ways with different stylesheets.

    12/13
    Program
    ▪ Go to http://www.w3schools.com/css/css_form.asp and modify the form to be more
    aesthetic like modern web pages.
    ▪ Make the form look different for each page.

    13/13

    You might also like