Block Level Elements form the base structure of Div Tags.
Inline elements nest inside the Blocks.
Div Controls: width n height, borders, background, browser position, text
Selector Decloration: Selector {Property: Value;} - Decloration
Selector: Element to be modified.
Decloration: Declares the modification of the element. Consists of Property and Value
Property: Aspect of element to be modified.
Value: Specifies setting of the property
External CSS: Using the Link Element to connect to a CSS file in the CSS Directory.
link: This Element connects to a CSS file through the Attributes: href, type, rel.
href: This attribute connects to the css file: href="css/sheet01.css" )
type: This Attribute should always be text/css: type="text/css" )
rel: This Attribute should always be stylesheet: rel="stylesheet" )
Internal CSS: CSS written into HTML of the page. Not recomended.
BackHere are the main CSS Selectors and how they are used.
| Selector | Meaning | Example | Definition |
|---|---|---|---|
| Universal Selector | Applies to all Elements in Document | * {} | Targets all Elements on Page |
| Type Selector | Matches Element Name | h1, h2, h3 {} | Targets Elements h1, h2, h3 |
| Class Selector | Matches Elements Class after . | .note {} | Targets Elements with Class Value of note |
| p.note {} | Targets (p) Elements with Class Value of note | ||
| ID Selector | Matches Elements with ID Value after # | #introduction {} | Targets Elements with ID Value of introduction |
| Child Selector | Matches Element of Child | li)a {} | Targets (a) Elements that are Child of (li) |
| Descendant Selector | Matches Element that is Descendant of specified Element | p a {} | Targets any (a) Element inside (p) Element |
| Adjacent Sibling Selector | Matches Elements of next Sibling | h1+p {} | Targets 1st (p) Element after (h1) |
| General Sibling Selector | Matches Element that is Sibling of another | h1-p | Targets all (p) Elemnts that are Siblings of (h1) |
Cascading Rules apply a specif hierachy.
| Rules | Description | Example |
|---|---|---|
| Last Rule | Last of identical Selectors takes presedence. | color: green;) color: red;)Red Presedence |
| Specific Rule | The more specific Selector take presedence. | h1 than *, p b than p, p#intro than p |
| Important Rule | !important after any property value gives priority | color: blue !important |
Use generic code for most of sheet and priority code for specifics
Use inherit as the value of property wished to use by child.
Parent: color: green;) Child color: inherit;)
Before launching site, test in multiple browsers. References:
Browser.com
Browser Lab Adobe.com
Browser Shots.com
Cross Browser Testing.com