Best Practices and CSS

Best Practices and CSS An Overview

What is CSS? C ascading S tyle S heets ,[object Object]

XHTML (e X tensible H yper T ext M arkup L anguage ,[object Object],[object Object],[object Object]

Key Requirements for XHTML Code ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Start With a Blank Page of Content ,[object Object],[object Object]

The Style sheet ,[object Object],[object Object],[object Object]

Inline ,[object Object],[object Object],[object Object],[object Object],An inline style only affects the tag to which it is attached. Adding inline styles everywhere is bad for the portability and editability of your markup. Inline styles should be generally avoided.

Embedded (internal) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Linked Styles ,[object Object],[object Object],[object Object],[object Object],[object Object]

Anatomy of a CSS Rule ,[object Object],[object Object],p {color:red;} selector declaration property value

Writing CSS Rules ,[object Object],[object Object],[object Object],[object Object]

Writing CSS Rules ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Writing CSS Rules ,[object Object],[object Object],[object Object]

Reset the Styling ,[object Object],[object Object]

Reset the Styling ,[object Object]

Reset the Styling ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],The first two styles here are group selectors that apply the same formatting to every one of the tags listed. Add these styles to the beginning of your style sheet, then, further down the style sheet, override them on a case-by-case basis. Thanks to the cascade, as long as a new style appears after the group selectors removing the margins and changing the font size, the new values take precedence.

Reset the Styling Examples ,[object Object],[object Object],[object Object],[object Object]

Flexible Text Using Ems ,[object Object],[object Object],[object Object]

Flexible Text Using Ems (cont.) ,[object Object]

Flexible Text Using Ems (cont.) ,[object Object],[object Object],[object Object]

Flexible Text Using Ems (cont) ,[object Object]

Flexible Text Using Ems (cont) ,[object Object],[object Object],[object Object],[object Object],[object Object]

Flexible Text Using Ems-Examples ,[object Object],[object Object],[object Object],[object Object]

Anchor Link Pseudo-Classes ,[object Object],[object Object]

Anchor Link Pseudo-Classes ,[object Object]

Anchor Link Pseudo-Classes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Targeting Particular Links ,[object Object]

Targeting Particular Links ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Here is what the page will look like: Targeting Particular Links

Building Navigation Bars ,[object Object]

Building Navigation Bars ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Sample Vertical Navigation Bar ,[object Object],[object Object]

Samples of Horizontal Navigation ,[object Object],[object Object],[object Object]

Samples of My Navigation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Samples of My Navigation Styles ,[object Object],[object Object]

Divs ,[object Object],[object Object],[object Object]

Type of Web Page Layouts ,[object Object],[object Object],[object Object],[object Object]

Fixed Width ,[object Object],[object Object],[object Object]

Liquid ,[object Object],[object Object]

Elastic ,[object Object],[object Object]

A Simple Two-Column Fixed Layout ,[object Object]

Two Column Layout-Content ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Two Column Fixed-Content Only The markup has two divs; the first is the navigation div, which is a set of links organized within a list, and the second is the content div, which is a heading and some paragraphs. Here’s what it looks like:

Two-Column Layout-CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],The first step in creating your two-column layout is to break the navigation out of the flow of the document by positioning it absolutely. Note that you also need to set the margins and padding of the body to zero to remove any default settings. In addition, you should set the width of your navigation to 150px to create the width of the column and temporarily turn on the right border so that you can see exactly where the div is now positioned. Here’s what it looks like: Two-Column Layout-Step 2 The navigation is now absolutely positioned, and by setting the left and top to zero, you ensure that its top left corner is aligned with the top left corner of its containing element, body . The content area now takes the navigation div’s place as the first element in the regular flow of the document, so it moves to the top left corner of the parent body element. The page looks a bit of a mess at this point. However, the tops of both elements are now aligned, and all you have to do next is push the content div over to the right. We do this by setting its left margin. Here’s what it looks like after setting the content div’s left margin: Two-Column Layout-Step 3 div#content { margin-left: 150px; }

Two-Column Layout-Step Three CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Now that you have your two-column layout, you need to think about making it look more presentable. Two Column Fixed with CSS Applied-Step 4

Sample of Liquid Layout ,[object Object],[object Object]

Best Practices and CSS

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (18)

Recently uploaded

Recently uploaded (20)

Best Practices and CSS