cascading style sheets lecture 5
Download
Skip this Video
Download Presentation
Cascading Style Sheets Lecture#5

Loading in 2 Seconds...

play fullscreen
1 / 17

Cascading Style Sheets Lecture#5 - PowerPoint PPT Presentation


  • 59 Views
  • Uploaded on

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)

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Cascading Style Sheets Lecture#5' - deacon-rosario


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
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.
ad