CSS n241.tplt Cascading Style Sheets Allow you to apply typographic styles and spacing on a Web page, somewhat like that of desktop publishing. But What is Cascading? This refers to what is happening when several sources of style information are vying for the control of the elements on a Web page. Style is cascaded down from higher level style sheets until the style is overridden by a style command with more weight. Advantages Greater layout controls
- font size/style
- line spacing
- etc. Style is separate from the structure of the document thus creating potentially smaller documents and allowing easier site maintenance. Disadvantages Browser support Using Style Sheets Make sure you include ending tags </p>, </li>, etc. Create your site style-sheet-free first, once you are happy with the regular look, add style sheet information. Remember, some people still use older browser versions, so know your audience. How do Style Sheets Work? Style sheets contain one or more rules for how the page should be displayed. A rule contains a selector {property:value} and is a declaration of how a page element should be displayed. A declaration may contain several properties and values separated by semicolons(;). Adding Style Sheets to your HTML document Three methods:
- Inline Styles
- Embedded Style Sheet
- External Style Sheet Inline Styles You can information to an individual element by using the style attribute within the HTML tag An Eample:
<H1 STYLE="color: blue">

This Heading Will Be Blue

</H1> Inline Styles Continued While using this type of style is acceptable, it is really equivalent to using the <font> tag. Any changes would need to be made to every tag and in every file. Inline Styles are best used occasionally to override higher-level rules. Embedded Style Sheet You embed the style in the top of the HTML document using a <style> element. Example:
<HTML>
<HEAD>
<STYLE SHEET = "text/css">

</STYLE>
<TITLE>….</TITLE>
</HEAD> Embedded Style Sheet Continued Your must put the <STYLE> element in the <HEAD> tag of the document within comment (<-- and -->) tags. By using the comment tags, this hides the CSS from browsers that do not understand the <STYLE> tags Extenal Style Sheets This the best way to use style sheets. You can collect the styles in a separate text document and create links to that document for any or all of the HTML pages in a site. This allows you to change information in the text document to change the style instead of changing each <tag> in a site. External Style Sheets Continued The text document is created by using the .css suffix You can refer to the external style sheet in two ways
- Linking using the <LINK REL = "STYLESHEET" HREF = "/pathname/stylesheet.css" TYPE = "text/css"> in the <HEAD>
- Importing into the <STYLE> element Inheritance Style sheet properties are passed down from an element (the parent) to any element contained within it (the child). The element inherits properties applied to elements higher in the HTML hierarchy. Inheritance Continued Example:
- if you specify that all the text in the body is to be BLUE, then all of the text elements in the body will be blue If you list two rules of equal weight in the style sheet, the later one will apply. What causes Style Sheets to Cascade? When more than one type of style sheet is used (inline, embedded, or external) simultaneously to change the page presentation, the style sheet "cascades" So which style is used?
- the W3C devised a hierarchical system that assigns different weights to each type of style information. The Cascade Order Elements lower in the following list have more weight and will override styles above them:
- browser default settings
- user style settings (set in browser)
- linked external style sheet
- imported style sheets, when more than one is imported, the last file read will take precedence over the first ones listed. The Cascade Order Continued Embedded style sheets (<STYLE> element) Inline style information HTML tag attributes, which override all style information defined anywhere Selectors These are the parts of the rule that identifies the element or elements. There are several methods for identifying these elements
- Type selectors
- Contextual selectors
- CLASS and ID attribute selectors
- Pseudo-selectors Type Selectors This is the simplest and calls an HTML element by its tag Example:
P {color: red:}
H1 {color: red}
H1, P {color: red} (type selectors grouped together separated by commas) allows you to apply a single property to all of the type selectors. <div> and <span> These elements were created especially for style sheets. <div> tag is used to delimit block-level tags and can contain other HTML elements. <span> is used inline to change the style of a set of characters Contextual Selectors Style attributes for HTML elements can be specified based on the context in which they appear Example: LI EM {color: red}
this indicates that the EM (emphasized) text that appears within a list item will be shown in red. Another Example: H1 B, H2 B, H3 B {color: blue} indicates that all text when it appears in the context of the heading with be BLUE and BOLD CLASS Attribute Selectors This is like creating a variable You can specify all items in the HTML document that you consider "important" and add this class "name" to the HTML selector Example:
<P CLASS = "important"> Read this important message</P>
then "call" the class as P.important {color: red}
important is the "name" of the HTML selector <P> ID Attribute Selectors The ID attribute is used similarly to CLASS, but it is used for targeting specific elements rather than classifying them. If several elements need treatment, use the CLASS attribute, however, if you have a specific element that must be unique, use the ID attribute Example:
<P ID = "061998">NEW ITEM ADDED TODAY</P> P#061998 {color: red} - format used within the style sheet Properties Type-related
-font-family
-font-style
-font-size
-color Box Properties
-margins (-top, -right, -left, - bottom)
-border (-top-width, -right-width, -bottom-width, -left-width)
-border-style (solid, dotted, groove, etc.) Positioning with Style Sheets This property has three possible values: absolute, relative, static Relative - places the element relative to its initial position in the flow. When the element is moved, the space it previously occupied is left blank. Absolute Positioning This places the element in an arbitrary position, meaning that the space it previously occupied is closed up. The absolutely positioned element has no margins Static Positioning This is the default value for the position property. Static elements cannot be positioned or repositioned Best Reference Web Design in a Nutshell by Jennifer Niederst