Cascading Style Sheets

Cascading Style Sheets

Lecture Overview • Overview of Cascading Style Sheets (CSS) • Ways to declare a CSS • CSS formatting capabilities • New features in CSS3

Introduction to CSS • A trend in Web page design is to separate the document structure and content from the document formatting • Cascading Style Sheets are the preferred XML way to do this • I will use them extensively in this course • I will (try) not to use the old deprecated methods

CSS Versions • CSS 2 is the current version supported by most browsers • CSS 3 is in the “draft” state. The standard is broken down into several modules • I’ll talk about CSS 3 and where we are

Style Rules (1) • Style rules format “things” • The things we format are defined by the selector • Element names • Classes • IDs

Style Rules (2) • Style rules are made up of a property and a value • A colon separates a property and its value • Multiple property:value pairs are connected with a semi-colon as in property:value; property:value

Style Rules (3) • Property / value pairs are enclosed in a selection block • A selector precedes the declaration block

Types of Selectors • There are different types of selectors • Each has a different level of “specificity” • A class within an element • An id within an element • An element within an element

Element in Element • It’s possible to apply styles to an element only when it appears inside of another element • Example to format <em> only inside of <code> code em{color: #800000;}

Element in Class • Classes allow you to restrict the selector by setting the class attribute of some other element • Class named begins with a period • Followed by the developer-chosen class name • Followed by the typical { property:value;property:value}

Declaring a Class (Example) • Declare a class named MyClass (name begins with a dot (.)) .MyClass {color:aqua} Declare a class that will be applied only to <p> tags p.MyClass{color:aqua}

Using a Class (Example) • Use the class attribute of an element to apply the style • The value is the same as the CSS class name • Example to format the paragraph using the CSS class named MyClass: <p class="MyClass">Formatted using class MyClass.</p>

ID Selectors • They are similar to inline styles but allow a style to be referenced through an element’s id attribute • One-to-one correspondence between the selector and style • Use these to format blocks with <div> and <span>

ID Selectors (2) • The declaration is similar to a class • Use # instead of . in the CSS file • Example to format the element whose id attribute has a value of #TestID #TestID { }

When rules collide • Simply put, the more specific rule overrides the more general rule • Style rules are inherited

Using CSS – The Basics • Using CSS is (usually) a two-part process • Declare a style • Use the style to format an element, such as a paragraph • One style can be used to format many elements

Three ways to Declare a Style • Inline • The style is declared as part of the element declaration in the element’s body • We really don’t use these much • Embedded • Declared in the header of the Web page (<head>) element • External • The style is declared in a CSS page and used by the referencing HTML page

Inline Style Declaration • Set the style property of an element • The property’s value contains a style declaration as mentioned in the previous slide • See InlineStyle.htm in the corresponding chapter example

Inline Style Declaration (Example) • The style attribute contains the style declaration <p style="padding: 10px; margin: 10px; font-family: ‘arial'; font-size: 10pt; font-weight: bold; border: thin groove #000080; width: 300px;" > Some text </p>

Embedded Style Sheets • Embedded (internal) style sheets appear inside of a <style> element in the <head> section • Multiple styles can be declared • You can declare styles for common HTML elements such as <p> or anything else

Embedded Style Sheets (Syntax) • Each style has the following syntax • selector { property:value;property:value} • selector contains the HTML5 tag, class, id • Note the <> characters do not appear • The property:value syntax is the same as before • Note that the {} characters enclose the style • See EmbeddedStyle.htm

Embedded Style Sheets Example

External Style Sheets • Its just a file with an extension of .css • Its contents are the same as the contents of a <style> element • Reference an external style sheet using the <link> tag in an XHTML document • It’s possible to reference several external style sheets using multiple <link> tags

Using the <link> Tag • The <link> tag has 3 important attributes • rel – The relationship between the current document and the linked document • Always “stylesheet” • type – MIME type • Always “text/css” • href – The URL of the linked CSS • Absolute and relative URL are permitted

Using the <Link> Tag (Example) • Link to the CSS named using a relative directory reference <link rel=“stylesheet" href="MainStyle.css" type="text/css" /> • See ExternalStyle.htmand MainStyle.css

Conflict Resolution • It’s possible that an inline, internal, or external style element will conflict • Styles are applied in the following order • External style sheets • Embedded style sheets • Inline styles • Thus, inline styles will override embedded and external styles

.NET and CSS • Visual Studio .NET knows how to • Create cascading style sheets • Create custom styles

Creating a CSS in .NET • From an open project • Click Project, Add New Item • Select Cascading Style Sheet

Creating a CSS in .NET (Illustration)

CSS in .NET (Illustration)

Using CSS in .NET • .NET validates the <link> element • .NET validates the stylesheet itself • Intellisense also works as you would expect

Cascading Style Sheets