Cascading Style Sheets (Introduction)

Lecture Overview What is CSS? Facets of 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 way to do this I will use them extensively in this course I will (try) not to use the old deprecated HTML properties

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 as we progress There are a number of CSS 3 properties that are not yet supported by any browsers

Facets of CSS We declare styles (style rules) We select content and apply styles to that selected content (selectors) We can create styles in different places Inline / embedded / external Each of the following is introduced – in turn

Style Rules (1) Style rules format “things” such as tables, paragraphs, lists, and any other HTML 5 element The things we format are defined by the selector(s) Selectors are made up of: 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 declaration block A selector precedes the declaration block Here the selector is all <h1> elements

.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)

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