Cascading Style Sheets
(Introduction)
Lecture Overview




Overview of Cascading Style Sheets (CSS)
Ways to declare a style
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
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 as we
progress
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)
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
selection block
A selector precedes the declaration block

Here the selector is all <h1> elements
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
Element Lists



element, element
Formats all elements in the list
Example to format all <em> and <code>
elements
code, em {color: #800000;}
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;}
Element parent



element > element
Selects all <em> elements where the parent
element is <code>
code > em {color: #800000;}
Attribute Selectors
(Introduction)

In addition to element, it’s possible to select
elements having


a specific attribute defined
a specific attribute value
The [attribute] selector

Select <a> elements with an attribute named
[target]
a[target] {
font-size: 14pt;
}
The [attribute=value]
Selector

Select <a> elements with an attribute named
[target] having a value of _blank
a[target=“_blank”] {
font-size: 14pt;
}
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
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 }
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
{
}
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:
Pseudo-elements (List)
::after – Insert content after element
p::after {
content: " Append Text";
}
 ::before – Insert content before element
p::before {
content: " Preappend Text";
}

Pseudo-elements (List)
::first-letter – Selects first letter
p::first-letter {
font-size: 14pt;
}
 ::first-line – Selects first line
p::first-line {
font-size: 14pt;
}

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
Pseudo-classes (Anchor)
Pseudo-classes (List)


The following W3Schools links lists all of the
pseudo classes
http://www.w3schools.com/css/css_pseudo_c
lasses.asp
When rules collide


Simply put, the more specific rule overrides
the more general rule
Style rules are inherited
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
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 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
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


type – MIME type


Always “stylesheet”
Always “text/css”
href – The URL of the linked CSS

Absolute and relative URLs 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.htm and 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

Embedded styles will override external styles
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
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
Importance (2)

The !important declaration overrides the
default cascade so styles are applied in the
following order
1.
2.
3.
4.
5.
User agent declarations (browser)
User declarations
Author declarations
Author !important declarations
User !important declarations
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/
Specificity (2)




Add 1 for each element and pseudo-element
Add 10 for each attribute, class, and pseudoclass
Add 100 for each ID
Add 1000 for an inline style
Specificity (3)

p.note


#MyID p[lang=“en”]


1 class (10) + 1 element (1) = 11
1 ID (100) + 1 attribute (10) + 1 element (1) =
111
If two rules have the same specificity, then
the last rule processed wins
Specificity (Guidelines)



Use generic selectors first and add specificity
as necessary
Rely on specificity rather than ordering
selectors
Try and keep thing simple
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)
Inheritance

Don’t break it


http://www.fiveminuteargument.com/blog/stopbreaking-inheritance
A canonical list of properties and those that
inherit

http://www.w3.org/TR/CSS21/propidx.html
Tools

Firebug is an add-in for chrome that helps
debug 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)
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