HTML and CSS Reference
In-Depth Information
Appendix A: Cascading Style Sheets
Up until this point we have not examined the manner in which HTML documents are
styled within the browser. HTML itself should not contain presentational information (col-
ors, fonts, borders etc), in fact most of the remaining presentational aspects of HTML have
been removed in HTML5. Presentation of documents is left to the Cascading Style Sheets
(CSS) style sheet language.
This provides a separation of concerns: the HTML page provides the content, while CSS
provides the presentation information. This ensures that either can be changed independ-
ently of the other.
CSS3 is the latest version of the CSS specification, and is being progressed in parallel with
the HTML5 specification.
This appendix will provide a brief introduction to layout with CSS, without focusing on
the latest features added to CSS in CSS3, and without focusing on how individual elements
can be styled. As such, this introduction is aimed at software engineers and programmers
rather than designers.
There are four keys to understanding CSS to a level sufficient to layout complex pages.
The first aspect is to understand how elements are selected by CSS to have styles applied
to them. As discussed earlier, jQuery uses the same selection syntax as CSS, therefore this
should be intuitive to you even if you have not used CSS before.
The second is to understand the box model. This is the model that describes the rectangle
that is rendered to represent each element in the document tree. If you look at the elements
that compose an HTML document, each visible element is represented by a rectangle.
When an element is a child of another element, its rectangle is inside its parent's rectangle.
//
This is slightly simplistic, rectangles can overlap other rectangles, and sit on top
off, rather than inside, other rectangles, but we will use this simplistic model to
begin.
