Boot Camp

Web Authoring Boot Camp
• Style specific things last, like unnumbered list links that have a hover.
• Use CSS commenting between ‘style areas’ to tell yourself what the area is.
Basic styles: body, h1-h6, p
Table styles: table, tr, td, th
Basic links: a:link, a:visited, a:hover, and a:active
Layout items, like div layout styles
Special navigation formats, like rollovers.
Inheritance
CSS styles inherit values from parent styles, hence the cascading in the style sheet name.
This means that if you designate the body text to be black, all text in your whole site will
also be black. You can change that by assigning a different color to a specific selector,
like gray text for a specific header:
body {color:#000;}
h3 {color:#ccc;}
h3.normal {font-weight: normal;}
This makes the header 3 gray instead of black. Then, the class .normal applied to header 3
makes only the turn to normal text rather than the default bold. The
remaining header 3s will still be bold, and the non-bolded header 3 inherits the grey color
from the h3 {color:#ccc;}.
So, when more than one style rules is applied to a web page element, how do you know
which styles will be applied?
• Styles can be inherited from a parent. Some styles, like font family, text-alignment
etc., are automatically inherited by child elements from their parent element (i.e.
by an element contained inside another one).
• Later styles over-rule earlier styles. If you define a style property, and later define
an alternative style property for the same thing, the later definition overrules the
earlier one.
• Styles can combine from different sources. If the later styles or style sheets set
any of the same properties as the previously-defined ones, they would overwrite
the previous styles.
212