1 / 17

CSS vs. HTML: Styles and Structure

Learn the key differences and implementation of CSS and HTML for structuring documents and styling content. Explore selectors, internal, external, and inline styles, as well as how to apply various CSS styles to HTML elements.

deacon-rosario
Télécharger la présentation

CSS vs. HTML: Styles and Structure

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 Lecture#5 Engr. Mubbashir Ayub

  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 • 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} #conclusion {color: blue} • HTML … <h1 id=“red_heading”>Headline</h1> <p id=“summary”>Summary</p> <p id=“conclusion”>Conclusion</p> …

  13. CSS Grouping and Nesting Selectors • h1{color:green;}h2{color:green;}p{color:green;} • h1,h2,p{color:green;}

  14. CSS Grouping and Nesting Selectors • p{color:blue;text-align:center;}.marked{background-color:red;}.marked p{color:white;}

  15. 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;} …

  16. CSS Examples • body {margin: 0px;} • a:link {color: #000099;text-decoration: underline;} • a:hover {text-decoration: none;background-color: #CCCCCC;}

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

More Related