Scribd Logo
Upload

Welcome to Scribd!

  • 22 views

    Lecture 2 3

    Uploaded by

    bilbatori
    This document discusses CSS (Cascading Style Sheets), which are used to define styles and formatting for HTML elements. CSS allows separation of document content from design, and external style sheets can be used to define styles that are applied consistently across web pages. CSS syntax, including selectors and properties, is covered. Methods for including styles such as internal, external, and inline styles are also described.

    Copyright:

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

    You might also like

    Lecture 2 3

    Uploaded by

    bilbatori
    22 views17 pages
    This document discusses CSS (Cascading Style Sheets), which are used to define styles and formatting for HTML elements. CSS allows separation of document content from design, and external style sheets can be used to define styles that are applied consistently across web pages. CSS syntax, including selectors and properties, is covered. Methods for including styles such as internal, external, and inline styles are also described.

    Original Description:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document discusses CSS (Cascading Style Sheets), which are used to define styles and formatting for HTML elements. CSS allows separation of document content from design, and external style sheets can be used to define styles that are applied consistently across web pages. CSS syntax, including selectors and properties, is covered. Methods for including styles such as internal, external, and inline styles are also described.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    22 views17 pages

    Lecture 2 3

    Uploaded by

    bilbatori
    This document discusses CSS (Cascading Style Sheets), which are used to define styles and formatting for HTML elements. CSS allows separation of document content from design, and external style sheets can be used to define styles that are applied consistently across web pages. CSS syntax, including selectors and properties, is covered. Methods for including styles such as internal, external, and inline styles are also described.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    of 17

    Web Programming

    Lecture 2

    1
    CSS
    Web Programming – Fall 2010

     CSS stands for Cascading Style Sheets


     Styles define how to display HTML elements
     Styles are normally stored in Style Sheets
     Styles were added to HTML 4.0 to solve a
    problem
     External Style Sheets can save you a lot of
    work
     External Style Sheets are stored in CSS files
     Multiple style definitions will cascade into one
    Syntax
    Web Programming – Fall 2010

     <selector> {<property>: <value>}


     body {color: black}
     p {font-family: "sans serif"}
     p {text-align:center;color:red}
     p{
    text-align: center;
    color: black;
    font-family: arial
    }
    How to Include
    Web Programming – Fall 2010

     External Style Sheet


    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
    </head>

     Internal Style Sheet


    <head>
    <style type="text/css">
    hr {color: sienna}
    </style>
    </head>
    How to Include
    Web Programming – Fall 2010

     Inline
    <p style="color: sienna; margin-left: 20px">
    This is a paragraph

    </p>

     Multiple
    h3 { color: red; text-align: left; font-size: 8pt }
    h3 { text-align: right; font-size: 20pt }
    color: red; text-align: right; font-size: 20pt
    Cascading Order
    Web Programming – Fall 2010

     Browser default
     External style sheet
     Internal style sheet (inside the <head>
    tag)
     Inline style (inside an HTML element)
    Depth
    Web Programming – Fall 2010

    p.right {text-align: right}


    p.center {text-align: center}

    <p class="right"> This paragraph


    will be right-aligned. </p>
    <p class="center"> This paragraph
    will be center-aligned. </p>
    Multiple classes
    Web Programming – Fall 2010

    <p class=“first second">


    This is a paragraph.
    </p>
    Multiple Usage
    Web Programming – Fall 2010

    .center {text-align: center}

    <h1 class="center"> This heading


    will be center-aligned </h1>

    <p class="center"> This


    paragraph will also be center-
    aligned. </p>
    Grouping
    Web Programming – Fall 2010

    h1,h2,h3,h4,h5
    {
    color: green;
    }

    10
    Id Selector
    Web Programming – Fall 2010

     You can also define styles for HTML


    elements with the id selector
     #green {color: green}
     p#paral{text-align: center}

    11
    Anchor pseudo-class
    Web Programming – Fall 2010

     a:link {color: #FF0000} /* unvisited link */


    a:visited {color: #00FF00} /* visited link */
    a:hover {color: #FF00FF} /* mouse over link */
    a:active {color: #0000FF} /* selected link */

     a.red:visited {color: #FF0000}


    <a class="red" href="css_syntax.asp">CSS Syntax</a>
    Media Type
    Web Programming – Fall 2010

    @media screen
    {
    p.test
    {
    font-family:verdana,sans-serif;
    font-size:14px
    }
    }
    @media print {
    p.test
    {
    font-family:times,serif;
    font-size:10px
    }
    }
    @media screen,print
    {
    p.test {font-weight:bold}
    }
    CSS Hacks
    Web Programming – Fall 2010

    <html>
    <head><title>Test</title>
    <!-- [if IE]> <link href=“ie_only.css” ….. > <![endif] -->
    <!-- [if !IE]> <link href=“other.css” ….. > <![endif] -->
    </head>
    ….

     www.webdevout.net/css-hacks

    14
    IE Issues and Holly Hack
    Web Programming – Fall 2010

     Most issues can be solved by adjusting


    height and width of element
     Holly hack

    15
    Tips
    Web Programming – Fall 2010

     Use HTML for document content definition


    only
     Use CSS for content positioning and
    decoration
     Use JS for interactivity
    Tips
    Web Programming – Fall 2010

     Use ids to position specific content areas


     Explore www.csszengarden.com
     Explore http://www.w3schools.com/css/
     Validate http://jigsaw.w3.org/css-validator/
     Use hacks when necessary
     http://24ways.org/2005/avoiding-css-
    hacks-for-internet-explorer

    You might also like