Cascading style sheets lecture 5
This presentation is the property of its rightful owner.
Sponsored Links
1 / 17

Cascading Style Sheets Lecture#5 PowerPoint PPT Presentation


  • 34 Views
  • Uploaded on
  • Presentation posted in: General

Cascading Style Sheets Lecture#5. Engr. Mubbashir Ayub. CSS vs HTML. HTML: Originally intended to markup structure of a document ( <h1> , <h2> ... <h6> , <p> , <ol> , <ul> , <blockquote> , ...) CSS Developing technology, CSS1, CSS2 (CSS3 under discussion)

Download Presentation

Cascading Style Sheets Lecture#5

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Cascading style sheets lecture 5

Cascading Style Sheets Lecture#5

Engr. Mubbashir Ayub


Css vs html

CSS vs HTML

  • HTML:

    • Originally intended to markup structure of a document (<h1>, <h2> ... <h6>, <p>, <ol>, <ul>, <blockquote>, ...)

  • CSS

    • Developing technology, CSS1, CSS2 (CSS3 under discussion)

    • Markup presentation, i.e. formats and layout

       Separation of content and presentation


Css structure

CSS Structure

selector {property: value;}

  • Selector:

    • on a simple level HTML element you wish to define

  • Property:

    • attribute you wish to change

  • Value:

    • value the property takes


Internal style sheets 1 2

Internal Style Sheets (1/2)

  • Inline

    • Affects individual HTML tag

      <html>

      ...

      <body>

      ...

      <p style=“font-family: Arial, sans-serif; ”>some text</p>

      </body>

      </html>


Internal style sheets 2 2

Internal Style Sheets (2/2)

  • Embedded

    • Affects individual document

      <html>

      <head> ... <style type=“text/css”>p {font-family: Arial, sans-serif;} </style></head>

      <body>

      ...

      <p>some text</p>

      </body>

      </html>


External style sheets 1 4

External Style Sheets (1/4)

  • Separate text file (.css)

    • e.g. styles.css

      p {

      font-family: Arial, Sans-serif;

      }


External style sheets 2 4

External Style Sheets (2/4)

  • Linked styles

    • Affect all documents that are linked to the style sheet

      <html>

      <head>

      ...

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

      </head>

      <body>

      ...

      <p>some text</p>

      </body>

      </html>


Order of precedence

Order of precedence

  • HTML formatting instructions (e.g. <font> tags)

  • Inline styles

  • Embedded styles

  • Linked styles

  • Default browser styles


Types of css styles

Types of CSS styles

  • Styles assigned to a HTML element

  • Class selector styles

    • Define different styles for one or more HTML elements

    • Assigned to the class attribute within an HTML element

  • ID selector styles

    • Define different styles for one and the same HTML element

    • Assigned to the ID attribute within an HTML element


Class selector styles

Class selector styles

  • CSS:

    .blue {color: #082984}

    .red {color: #de2131}

  • HTML

    <h1 class=“red”>Headline</h1>

    <p class=“red”>a summary</p>

    <p class=“blue”>some text</p>


Pseudo classes

Pseudo-classes

  • Used when an HTML element can display more than one behaviour (e.g. hyperlinks)

  • CSS:

    a:link {color: #000}

    a:visited {color: #000}

    a:hover {color: #69f}

    a:active {color: #000}

  • HTML

    <a href=“nextpage.html”>Next page</a>


Id selector styles

ID Selector styles

  • CSS

    #red_heading {color: red}

    #summary {color: red}

    #conclusion {color: blue}

  • HTML

    <h1 id=“red_heading”>Headline</h1>

    <p id=“summary”>Summary</p>

    <p id=“conclusion”>Conclusion</p>


Css grouping and nesting selectors

CSS Grouping and Nesting Selectors

  • h1{color:green;}h2{color:green;}p{color:green;}

  • h1,h2,p{color:green;}


Css grouping and nesting selectors1

CSS Grouping and Nesting Selectors

  • p{color:blue;text-align:center;}.marked{background-color:red;}.marked p{color:white;}


Css examples

CSS Examples

  • p {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;color: #000000;}

  • h1 {font-family: Arial, Helvetica, sans-serif;font-size: 14px;color: #000099;}


Css examples1

CSS Examples

  • body {margin: 0px;}

  • a:link {color: #000099;text-decoration: underline;}

  • a:hover {text-decoration: none;background-color: #CCCCCC;}


Assignment

Assignment

  • Create a calendar control using JavaScript as external file and using CSS.


  • Login