CSS Fun damentals The Document Hierarchy Element Relationships The Box Model

Descendant Selectors p a {color:blue;} //This will style all anchors with a paragraph ancestor as blue. Any other anchors will be unaffected. A descendant selector is made up of two or more selectors separated by white space. A descendant selector of the form "A B" matches when an element B is a descendant of some ancestor element A.white spaceancestor

Vocabulary: Web designer speak and are opening and closing tags for a heading one. My Website is a heading one element. An element is the tags and the content.

Element types Block elements are separated from surrounding elements in the flow of the HTML page. Browsers generally give block elements a standard margin to the top and bottom. Inline elements are not separated from surrounding elements in the flow, but rather follow directly on from their adjacent elements. Inline elements display just as text does on a page. Examples of inline elements are and. List item elements display similarly to block elements, but in addition, a marker (a bullet, or an alpha numeric character) is added to the left of the element, and the element is indented with respect to its parent element. With style sheets an image can be specified as the marker, and different types of marker, in addition to the common disc and square, can be specified. The obvious example of a list item element is. Note that both and are in fact just block elements. Which makes sense if you think about it.

The Box Model An important part of CSS in order to use CSS for layout. All Elements generate a box (Element Box). The Element Box tells the browser how much space an element occupies.

The Box Model Content Padding (note: padding takes on background of content) Margin (note: margin does not take on background of content) Border Box Width

Box Components Content  Set with the WIDTH and HEIGHT properties Padding  Set with the PADDING property Border  Set with BORDER property Margin  Set with MARGIN property

Styling Padding, Borders and Margins margin:25px 50px 75px 100px; top margin is 25px right margin is 50px bottom margin is 75px left margin is 100px margin:25px 50px 75px; top margin is 25px right and left margins are 50px bottom margin is 75px margin:25px 50px; top and bottom margins are 25px right and left margins are 50px margin:25px; all four margins are 25px MarginMargin A shorthand property for setting the margin properties in one declaration. margin-top Sets the top margin. margin-right Sets the right margin. margin-bottom Sets the bottom margin. margin-left Sets the left margin. margin-rightmargin-bottom margin-left Note: These settings apply to padding and borders as well as margins. Simply replace the word ‘margin’ with the word ‘padding’ or ‘border’.