Cascading Style Sheets
description
Transcript of Cascading Style Sheets
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