content vs style
info to be presented vs how info is presented
HTML’s main role
define content
Cascading Style Sheets main role
defining style, used to specify presentation of elements separately from doc
CSS advantages
- separation of content from presentation
- site-wide consistency
- reduced data transfer over a network
- easy to reformat pages for device portability
- better accessibility
style sheet
set of rules specified in <style> html element located in <head></style>
CSS selectors
.class, #id, element, space, :hover, “,”
.class
.intro selects all elements with class=”intro”
id
firstname selects the element with id=”firstname”
element
p selects all <p> elements
space
div p selects all p elements inside <div> elements
,
div, p selects all <div> elements and all <p> elements
:hover
a:hover selects <a> element on mouse over</a>
a.nodec means?
selects <a> elements with class=”nodec”</a>
3 ways to specify CSS styles
inline, embedded, external
inline styles
not recommended, only apply to element where style is declared, does not truly separate presentation from content
embedded styles
styles declared in an HTML document’s head section, apply to entire HTML doc
external styles (preferred)
styles defined in an external style sheet, apply to all HTML docs on a site
linking external CSS
(in head, below title)
<link></link>
inheritance
most styles defined for parent elements are also inherited by child (nested) elements
specificity
styles specified for child elements have higher specificity and take precedence over styles defined for their parent elements
specificity precedence
inline styles > IDs > classes > elements > Child element styles > parent element styles
origin precedence
when there are two different specified styles for an element, the declaration at the bottom wins
source
styles may be defined by the author (developer), the user, or the user agent (browser)
source style conflict
authors styles > users styles > user agents styles
