Cascading Style Sheets Orientation Learning Web Design: Chapter 11

Lesson Overview Learn the benefits and power of using Cascading Style Sheets (CSS) Understand how (X)HTML markup creates a document structure Learn how to writing CSS Style Rules Understand when and how to use the three types of style sheets Use inheritance, cascading, specificity, and rule order to predict how rules are applied

Cascading Style Sheets (CSS) The first implementation was known as CSS1 The next implementation was CSS2 Allows specifying of font colors, background colors and graphics, margins, spacing, type style and more A new implementation is on the horizon: CSS3

Benefits of CSS Separates content of a page from its presentation creating smaller documents and faster downloads Better control over type and layouts Less work – style rules can effect selected text, a whole page, or an entire site Your site will be more accessible Reliable browser support for CSS1 and CSS2

The Power of CSS CSS has the potential for being a powerful design tool Design of a site can be managed and controlled by an organization with CSS The CSS can be swapped for a completely different look and feel and the content remains the same See examples at

How Style Sheets Work Just follow these steps: 1.Start with a document of marked up (X)HTML content 2.Write style rules for how you want certain elements to appear 3.Attach the style rules to the document When the page is displayed, the browser will follow these rules

Marking Up Content Marking up text provides a structure for a document and is sometimes called the structural layer Choose (X)HTML elements that most closely describe the meaning of the content : i.e. blockquote, p, h1 Once the structural layer is in place, CSS is used to add on the presentational layer

Writing the Rules A style sheet is made up of style instructions called rules Each rule describes how an element or group of elements will be displayed There are two parts to a rule: The selector that identifies the element affected by the rule The declaration provides the instructions

Selectors – Choose Wisely The most basic type of selector is called an element type selector Every (X)HTML element can have one or more associated style rules The p selector is applied to all elements The h1 selector is applied to all s Mastering CSS requires choosing wisely the best selector and using it strategically

Declarations A declaration is made up of a property/value pair separated by a colon : font-size : small; font-weight : bold; Each declaration must end in a semi-colon to separate it from others font-size: small ; font-weight: bold ;

Declaration Block A set of declarations can be grouped together into a block by enclosing them in curly brackets { } CSS will ignore whitespace, so you can make the declaration block more readable by putting each declaration on its own line

Last Declaration in a Block and the Semi-Colon The semi-colon for the last declaration in the block can be omitted body { font-family: Arial; font-size: 110% } It is recommended you get into the habit of always including the semi-colon This will make adding new declarations later on much easier No final semicolon- is okay

3 Approaches to Style Sheets External Style Sheets – separate file for style rules Embedded Style Sheets – placed within a page Inline Styles – applied on a given element or group of text (very rarely used) Later in the semester we will focus exclusively on External Style Sheets

When to Use Inline CSS A disadvantage of using inline CSS is that it intermingles presentation of text with the actual content. This is sometimes referred to spaghetti coding Inline CSS formatting is can be used to temporarily tryout a combination of styles Inline CSS should be reserved only for special case text formatting

Applying Inline CSS Inline CSS allows the attachment of style rules to an individual element instead of across the entire page or the entire site Use the style attribute to apply the inline CSS to block-level elements like,, or. This entire paragraph will be bolded.

Creating an Inline Style Rule An inline CSS style rule is a list of one or more CSS properties The colon character separates the name of the style property from its value Ex. font-size: x-large; The semicolon character is used to separate individual CSS properties in a style rule list Ex. My Heading

Applying CSS to Text Inline CSS can also be applied over a selected group or span of text The tag provides the starting and stopping place for the style rule to be applied Ex. This is my big word.

Embedded CSS - These style rules apply over a given page Embedded CSS should be reserved for pages that need a special appearance within your Web site, otherwise External style sheets should be used Use the and tag placed in the of the page Needs the type attribute type=“text/css”

Example of Embedded CSS body { background-color: lightgreen; font-family: Arial, Helvetica, sans-serif; } p { font-size: medium; } h1 { font-size: xx-large;} h2 { font-size: x-large;}

The body Selector An embedded style sheet should always contain a selector for the body Use this selector to set defaults for the entire page like font-family, and font-size Ex. body { font-family: Arial, Helvetica; font-size: medium; } Setting text color, link colors, and background-color will be covered later

Example: h1 selector Ex. h1{ font-size: 300%; font-weight: bold; font-variant: small-caps; } Uses the name of the HTML tag you are selecting and { } characters Each property is separated by a ; This style rule will be applied to all occurrences of tags on this page

Applying Embedded Styles Simply use the HTML tag associated with a selector or the class attribute within the page These styles apply only within the page Ex. - The body will have a background color set and font-family set Ex. Paragraph has medium size Ex. Heading will have bold text Ex. Large text

Inheritance In real life, human children often inherit traits like eye color from their parents (X)HTML elements also pass down certain style properties from parent elements to child elements Understanding inheritance rules will help you to better organize and plan your style sheets

Document Tree Structure The page structure is like an upside down tree branching out from the tag html head body titlestylemetah1pph2pp emimg p em

Parents and Children A document tree of elements can seen as a kind of family tree Elements nested within a given element are its descendents i.e. h1, h2, p, em, img are descendents of the body element An element nested within another element without other levels in between is a child The containing element is the parent

Pass It On When you write a font-related style rule using an element type selector like a p: the rule will apply to all elements on the page as well as all children of elements Child elements inherit properties of their parent element Some elements like do not inherit font-related properties

What Can Be Inherited? Font-related properties used to style text are usually inherited Properties related to the box-like structure of an element are usually not passed down i.e. border, margin, background would not make sense on all child element Use inheritance to keep from repeating properties in a child when they will be inherited anyway

Inheritance Example body { font-size: small; font-family: sans-serif;} Styles are passed on to all text elements of the page html head body titlestylemetah1pph2pp emimg p em

Overriding Inherited Properties Any property applied to a specific element will override an inherited style p style rules will override body style rules em style rules will override p style rules Inline styles will override all else

What is Cascading? CSS allows applying several style sheets to a document The cascade refers to the orderly application of styles to an element If no styles are applied, the default styles of the browser are applied Style information is passed down until it is overridden with a style command with more weight

Conflicting Style Rules?? The closer the style rule is to the element, the more weight it has! Inline styles have the most weight Next embedded styles on the page are used Finally, external styles are applied

Specificity Once cascading of style sheets has been applied, there may still be conflicts at the rule level If two rules conflict, the type of selector is used to determine the winner The more specific the selector the more weight it is given

Assigning Importance If you want a rule to not be overridden by a conflicting rule, use the !important indicator just before the semi-colon p { font-size: medium !important; } Even if an inline style rule is encountered later with a different property value, the important property will hold The only thing that can override this is a reader style set with !important

Reader Style Sheets Users may write their own style sheets and apply them to pages within their own browser These are called reader style sheets Normally author style sheets (inline, embedded or external) will override reader style sheets unless the reader style is marked with !important. A user with impaired vision might create special style rules to help them read a page

The Last Shall Be First If there are conflicts within style rules of the same weight, the last-one wins rule applies. The style rule closest to the content in the document will override earlier style rules. And the winner is… All style rules are weighted the same green wins, it was the last style rule p { color: red;} p {color: blue;} p {color: green;}

Sources for CSS Info W3C’s CSS Schools – Great CSS Tutorials W3C Web site on CSS- Info on how web browsers implement CSS- Insight from the Web Design Group-

Lesson Overview The benefits and power of Cascading Style Sheets (CSS) are without question You must understand the (X)HTML document structure before applying CSS CSS Style Rules add a presentational layer Understand the three types of style sheets: Inline, Embedded and External Inheritance, cascading, specificity, and rule order determine how styles are applied