Cascading Style Sheets (CSS)
1. CSS Introduction
-
Cascading Style Sheets (CSS)
- Used to describe the presentation of documents
- Define sizes, spacing, fonts, colors, layout, etc.
- Improve content accessibility
- Improve flexibility
- Designed to separate presentation from content
- Due to CSS, all HTML presentation tags and
attributes are deprecated, e.g. font, center,
etc.
CSS Simple, or Element Selectors
- The most basic form of CSS selector is an XHTML
element name;
h1, h2, p, ol, ul, table, etc.
- This is the simple or element selector. Example:
p { color: #003366; }
- This will set every occurrence of content marked
up the 'p' paragraph tag to be a dark blue colour.
CSS CLASS SELECTOR
However, in XHTML markup, elements can
have class attributes assigned to them. The
value attached to a class attribute can be one
(or more) names, separated by spaces.
Example:
<![CDATA[<h1 class=“special”>]]>
The actual definition of the value “special” is defined
in a CSS class selector…
CSS ID Selectors
- XHTML elements can also have id selectors assigned to them.
Example:
<![CDATA[<p id=“summary”>blah, blah, blah.</p>]]>
- In the CSS, the id “summary” can be styled in a rule, thus:
<![CDATA[#summary { font-style: italic; }]]>
- Whereas class selectors can be used across a number of
elements in an XHTML document, ID selectors can only be
assigned to one specific element in any given XHTML
document.