1 / 12

Cascading Style Sheets: CSS vs. HTML

Learn the fundamentals of CSS and HTML, including structure markup, presentation separation, internal & external style sheets, types of CSS styles, selectors, pseudo-classes, and order of precedence.

normaelliott
Download Presentation

Cascading Style Sheets: CSS vs. HTML

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cascading Style Sheets Part 1

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

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

  4. Internal Style Sheets (1/2) • Inline • Affects individual HTML tag <html> ... <body> ... <p style=“font-family: Arial, sans- serif; ”>some text</p> </body> </html>

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

  6. External Style Sheets (1/4) • Separate text file (.css) • e.g. styles.css p { font-family: Arial, Sans-serif; }

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

  8. Order of precedence • HTML formatting instructions (e.g. <font> tags) • Inline styles • Embedded styles • Linked styles • Imported styles • Default browser styles

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

  10. 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> …

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

  12. ID Selector styles • CSS … #red_heading {color: red} #summary {color: red} p#conclusion {color: blue} • HTML … <h1 id=“red_heading”>Headline</h1> <p id=“summary”>Summary</p> <p id=“conclusion”>Conclusion</p> …

More Related