Cascading Style Sheets

(Introduction)

Slide 2

Lecture Overview Overview of Cascading Style Sheets

(CSS) Ways to declare a style 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 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 as

we progress

Slide 5

Using CSS (Introduction) Working with CSS is a two-part process

We declare styles (style rules) We select content and apply styles to

that selected content (selectors)

Slide 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

Slide 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

Slide 8

Style Rules (3) Property / value pairs are enclosed in a

selection block A selector precedes the declaration

block Here the selector is all <h1> elements

Slide 9

Types of Selectors There are different types of selectors

Each has a different level of “specificity” An element means to select all elements of a

particular type <p> for example

A class within an element An id within an element An element within an element

And so on as the above can be mixed and matched together

Slide 10

Element Lists element, element Formats all elements in the list Example to format all <em> and <code>

elements

code, em {color: #800000;}

Slide 11

Element in Element element 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;}

Slide 12

Element parent element > element Selects all <em> elements where the

parent element is <code> code > em {color: #800000;}

Slide 13

Attribute Selectors (Introduction) In addition to element, it’s possible to

select elements having a specific attribute defined a specific attribute value

Slide 14

The [attribute] selector Select <a> elements with an attribute

named [target]

a[target] {     font-size: 14pt;}

Slide 15

The [attribute=value] Selector Select <a> elements with an attribute

named [target] having a value of _blank

a[target=“_blank”] {     font-size: 14pt;}

Slide 16

The Universal Selector It selects all elements and children The * character is the universal selector Select all elements inside a <div>

element and set the background color

Slide 17

Element in Class Classes allow you to restrict the selector

by setting the class attribute of some other element

CSS class names begins with a period Followed by the developer-chosen class

name Followed by the typical { property:value; property:value }

Slide 18

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}

Slide 19

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>

Slide 20

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>

Slide 21

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 22

Pseudo-elements (Introduction) A pseudo-element is used to apply a

style to part of an element For example, the first or last line of a

paragraph The following syntax is used to apply a

pseudo-element:

Slide 23

Pseudo-elements (List) ::after – Insert content after elementp::after {     content: " Append Text";} ::before – Insert content before

elementp::before {     content: " Preappend Text";}

Slide 24

Pseudo-elements (List) ::first-letter – Selects first letterp::first-letter {     font-size: 14pt;} ::first-line – Selects first linep::first-line {     font-size: 14pt;}

Slide 25

Pseudo-classes (Introduction) Pseudo-classes define the special state

of an element Mouse hover

They are commonly used with anchor tags: Visited / non-visited links

Slide 26

Pseudo-classes (Anchor)

Slide 27

Pseudo-classes (List) The following W3Schools links lists all of

the pseudo classes http://

www.w3schools.com/css/css_pseudo_classes.asp

Slide 28

When rules collide Simply put, the more specific rule

overrides the more general rule Style rules are inherited

Slide 29

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 beyond testing 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 5 page

Slide 30

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 31

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>

Slide 32

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

Slide 33

Embedded Style Sheets (Syntax) Each style has the following syntax

selector { property:value; property:value }

selector contains the HTML 5 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 34

Embedded Style Sheets Example

Slide 35

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

Slide 36

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 URLs are permitted

Slide 37

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.htm and MainStyle.css

Slide 38

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 Embedded styles will override external

styles

Slide 39

What we Mean by Cascade The concept of cascade is tied to three

concepts (rules) Importance Specificity Source order

After these rules are applied, a weight is applied to each rule to determine which one takes precedence

Slide 40

Importance (1) Importance relates to the source of a

style sheet User agent – browsers tend to have a

default style User – You might have configured browser

options to have a style Author – These are the inline / embedded /

external styles that we have been talking about

These sources are processed in order

Slide 41

Importance (2) The !important declaration overrides

the default cascade so styles are applied in the following order1. User agent declarations (browser)2. User declarations3. Author declarations4. Author !important declarations5. User !important declarations

Slide 42

Specificity (1) Arguably, this is the most difficult CSS

concept to grasp Every CSS rule has a weight

That is, one rule might be more or less important than another, or equally important

This weight can be precisely calculated There are different ways (techniques) to

do this http://specificity.keegan.st/

Slide 43

Specificity (2) Add 1 for each element and pseudo-

element Add 10 for each attribute, class, and

pseudo-class Add 100 for each ID Add 1000 for an inline style

Slide 44

Specificity (3) p.note

1 class (10) + 1 element (1) = 11 #MyID p[lang=“en”]

1 ID (100) + 1 attribute (10) + 1 element (1) = 111

If two rules have the same specificity, then the last rule processed wins

Slide 45

Specificity (Guidelines) Use generic selectors first and add

specificity as necessary Rely on specificity rather than ordering

selectors Try and keep thing simple

Slide 46

Inheritance Inheritance is how property values

propagate from parent elements to child elements For example, setting the font for a <body>

tag will cause the same font to be applied Not all properties are inherited Inheritance can be forced using the inherit keyword

Note the CSS3 inheritance specifications are in “working draft” mode (not final)

Slide 47

Inheritance Don’t break it

http://www.fiveminuteargument.com/blog/stop-breaking-inheritance

A canonical list of properties and those that inherit http://www.w3.org/TR/CSS21/propidx.html

Slide 48

Tools Firebug is an add-in for chrome that

helps debug styles

Slide 49

.NET and CSS Visual Studio .NET knows how to

Create cascading style sheets Create custom styles

Slide 50

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

Slide 51

Creating a CSS in .NET (Illustration)

Slide 52

CSS in .NET (Illustration)

Slide 53

CSS in .NET (Illustration)

Slide 54

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

expect