over the formatting and display of their HTML documents. ... rendered by HTML only. ... a:hover {color: lightblue; font-
Cascading Style Sheets by Tom Policano
What Are Cascading Style Sheets? •
•
•
•
Cascading styles sheets (CSS) give Web designers more control over the formatting and display of their HTML documents. Cascading style sheets replace some popular, but deprecated tags. The current specification for CSS is CSS 2, and CSS 3 is under development. XHTML and CSS, combined, are the future technologies used for standard Web page creation.
Advantages and Disadvantages of Using CSS •
• •
•
Style sheets save time in applying formatting or positioning to your Web pages by enabling you to script a few lines of code rather than extensive, redundant HTML code. You can apply and change formatting globally. Style sheets allow more detailed control, such as line spacing, than HTML. You will need to test your Web pages with multiple browsers in order to ensure compatibility when using style sheets.
Types of Cascading Style Sheets •
•
•
•
Cascading style sheets enable you to apply styles that cannot be rendered by HTML only. There are three types of style sheets: local (in-line), internal, and external. There is hierarchy to using the types of style sheets when creating your Web pages;local takes precedence over internal and internal takes precedence over external. External style sheets must be saved in text format with the .css extension.
Local or In-Line Style Sheets • Local style sheets are applied to individual HTML tags to render
a style to a specific element in a Web Page. • The syntax is a bit different than that for external or internal style sheets. The attribute is used, which is placed within the HTML tag that you are applying the style to.
Local or In-Line Style Sheet Example •
• This paragraph is aligned in the center of the Web page and has
white text with a blue background.
Internal Style Sheets • Internal style sheets are HTML documents that have style sheet
commands placed within tags that only format elements within the existing Web page.
Internal Style Sheets Example An Example of an Internal Style Sheet This is the Green Verdana heading.
This paragraph should be aligned to the right on this Web page and should have blue, Comic Sans text.
External Style Sheets •
•
•
External style sheets are ideal for giving all of your Web pages within a Web site a common look. The style sheet code is written in a separate document, which is saved as text with the .css extension. The external style sheet is then linked to the HTML document using the tag in the head container of each respective HTML document.
External Style Sheets Example Creating External Style Sheets