Cascading Style Sheets

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

Slide 3 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

Slide 4 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

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

Slide 6 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

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

Slide 8 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

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

Slide 10 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 }

Slide 11 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 tags p.MyClass {color:aqua}

Slide 12 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: Formatted using class MyClass.

Slide 13 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 and

Slide 14 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 { }

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

Slide 16 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

Slide 17 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 ( ) element External The style is declared in a CSS page and used by the referencing HTML page

Slide 18 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

Slide 19 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

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

Slide 21 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

Slide 22 Embedded Style Sheets Example

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

Slide 24 Using the Tag The 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

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

Slide 26 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

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

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

Slide 29 Creating a CSS in.NET (Illustration)

Slide 30 CSS in.NET (Illustration)

Slide 31 CSS in.NET (Illustration)

Slide 32 Using CSS in.NET.NET validates the element.NET validates the stylesheet itself Intellisense also works as you would expect