Download as PDF, PPTX
Uploaded byGerson Abesamis
CSS Refresher
The document discusses Cascading Style Sheets (CSS) and how to style HTML elements using CSS. It covers CSS selectors like tags, IDs, and classes. It also describes the different ways to apply CSS like internal, external, and inline stylesheets and how CSS rules cascade. The document provides examples of CSS rules for backgrounds, text, fonts, and links.
CSS Refresher
- 1. CSS REFRESHER Styling HTMLelements
- 2. what is css? •Cascading Style Sheets • A set of rules on how to display your HTML elements • Internal documents: embedded in the head part of the HTML file • External documents: something.css
- 3.
- 4. SELECTORS • Tag/element: p{color:black;} <p>This text will be black</p> • ID: #alternate {color:green;} <p id=“alternate”>This will be green</p> • Class: .another{color:blue;} <p class=“another”>While this will be blue</p>
- 5. MORE SELECTORS • Element-specific:p.red {color:red;} <p class=“red”>This text will be red</p> • Multiple elements: .title, .head {color:pink;} <h1 class=“head”>Pink Heading</h1> <p class=“title”>Pink Title</p>
- 6. HOW to applyCSS • Internal stylesheet • External stylesheet • Inline stylesheet
- 7. INTERNAL CSS <head> <style type=“text/css”> p.red{ color:red; } </style> </head>
- 8. EXTERNAL CSS <head> <link rel=“stylesheet”type=“text/ css” href= “samples.css” /> </head>
- 9. INLINE CSS <a href=“somewhere.html”style= “color:black;text-size:25px”> This is a link </a>
- 10. CASCADING • Elements caninherit rules from multiple style sheets • Inheritance order: 1. Browser default 2. External stylesheet 3. Internal stylesheet 4. Inline style
- 11. Exception! <head> <style type=“text/css”> p.red { color:red; } </style> <linkrel=“stylesheet” type=“text/ css” href= “samples.css” /> </head>
- 12.
- 13. RULES: BACKGROUND body { background:#000000url(‘bg.gif’) repeat-y scroll right top }
- 14.
- 15.
- 16. RULES: FONT p.font { font-family:“TimesNew Roman”, Verdana, Arial; font-style:italic; font-size:16px; font-variant:small-caps; font-weight:bolder; }
- 17. Web units • pixel:font-size:32px • percent: font-size:200% • em: font-size:2em
- 18. LINK STYLES • a:link{color:blue;} • a:visited{color:green;} • a:hover{color:pink;} • a:active{color:black;}