Presentation is loading. Please wait.

Presentation is loading. Please wait.

Cascading Style Sheets (Introduction)

Similar presentations


Presentation on theme: "Cascading Style Sheets (Introduction)"— Presentation transcript:

1 Cascading Style Sheets (Introduction)

2 Lecture Overview What is CSS? Facets of CSS
CSS formatting capabilities New features in CSS3

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 way to do this I will use them extensively in this course I will (try) not to use the old deprecated HTML properties

4 CSS Versions CSS 3 is the current version. The standard is broken down into several modules I’ll talk about CSS 3 and where we are as we progress There some CSS 3 properties that are not yet fully supported by all browsers

5 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 above is introduced – in turn

6 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

7 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

8 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

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

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

11 Creating a CSS in .NET (Illustration)

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


Download ppt "Cascading Style Sheets (Introduction)"

Similar presentations


Ads by Google