Three ways to apply CSS: Inline CSS Internal style sheets (
header style information) External style sheets
Slide 3
Add style declarations directly to elements by specifying
values into style attributes This is a paragraph. This is another
paragraph with more text.
Slide 4
CSS rules placed inside the element within the document
Internal Style Sheet Example p { color: red; } This is a paragraph.
This is another paragraph with more text.
Slide 5
CSS rules placed inside a separate file with a.css extension;
file is referenced with a element in the document Internal Style
Sheet Example This is a paragraph. This is another paragraph with
more text.
Slide 6
You wont likely use inline CSS unless you want to override an
internal or external style sheet (troubleshooting inheritance or
cascade problems) Inline style sheets better all rules in one place
for easy updating but, this only applies to that document External
style sheets are best allows for styling many documents from one
place and separates presentation from content
Slide 7
Element selector: p ID selector: # Class selector:. HTML
Chapter 1 Lorem ipsum CSS #chapter { font-size: 3.5em; }.summary {
font-style: italic; } p {font-family: Arial, Helvetica, sans-serif;
}
Slide 8
Selects the right-hand element only if its a direct child of
the left-hand element. Not supported in IE 6 or earlier CSS li >
p { color: red; } HTML selects Lorem ipsum But not Lorem ipsum This
is a child selector combinator
Slide 9
Similar to child selector except right-hand element does not
need to be direct child of left-hand element it can select elements
further down the DOM hierarchy CSS li p { color: red; } HTML
selects Lorem ipsum and Lorem ipsum But not Lorem ipsum The white
space is the descendant selector combinator
Slide 10
Select every single element in a document * { border-color:
red; }
Slide 11
Select any element with the attribute specified in the square
brackets. Can be just the attribute type or an attribute with a
specific value CSS img[alt] { border-color: red; }
img[src=image.png=] { border-color: red; } HTML
Slide 12
This selects the right-hand element only if it has an instance
of the element on the left-hand side next to it, on the same level
of the DOM hierarchy. These selectors not support in IE6 or earlier
h2 + p { color: red; } Heading A paragraph But not A paragraph Nor
Heading A paragraph This is the adjacent sibling selector
combinator
Slide 13
Styles elements based on their states, typically link behaviour
a:hover { color: red; } All links will change to the colour red
when the mouse hovers over them
Slide 14
Allows for styling of specific content parts of an element
rather than the whole element p:first-letter { font-size: 300%; }
Triples the size of the first letter of each paragraph p:first-line
{ font-weight: bold; } Bolds the first line of each paragraph
Slide 15
Give multiple selectors the same style by listing them together
separated by commas HTML Chapter 1 Lorem ipsum CSS
#chapter,.summary { font-style: italic; } p, #chapter { color:
rgb(240,128,96); }
Slide 16
Create even more specific selectors by joining selectors HTML
Chapter 1 Lorem ipsum CSS p.class { color: red; } h1#chapter {
color: red; }
Slide 17
Slide 18
Sometimes two or more conflicting styles may be applied to the
same element How do you resolve this conflict and decide which one
actually gets applied? You need to understand inheritance and the
cascade
Slide 19
Just as in genetics where traits can be inherited by children
from their parents, This is the mechanism by which certain
properties can be passed from a parent element to its child
elements Without it youd have to specify every property for every
element every time you wrote a web page
Slide 20
Much easier to specify the default font on the element knowing
that all child elements of will inherit that property body {
font-family: Georgia; } h1, h2, h3 { font-family: Helvetica; } /*
This overrides the first rule because it is listed later in the
code */
Slide 21
Not all properties are inherited e.g., margins, borders Common
sense should tell you what is and isnt inheritable, or review the
CSS 2.1 specification property summary table:
www.w3.org/TR/CSS21/propidx.html
Slide 22
The Cascade in Cascading Style Sheets (CSS) The mechanism that
determines the end result when when multiple conflicting and
overlapping rules apply to the same element Three concepts:
Importance Specificity Source order
Slide 23
Importance is important; if two declarations have the same
importance then the specificity of the rule determines which one is
applied If two declarations have the same specificity, then the
source order determines which rule wins
Slide 24
Importance of a CSS declaration depends on where it is
specified. Conflicting rules are applied using the following order;
later ones override earlier ones: User agent style sheets Normal
declarations in author style sheets Normal declarations in user
style sheets Important declarations in author style sheets
Important declarations in user style sheets
Slide 25
User agent style sheet Built-in browser style sheet (default
properties) User style sheet Not all browsers support this but
users can add their own. Typically used to enhance accessibility
Author style sheet This is the style sheet that we normally think
of Written by the web designer
Slide 26
Normal declarations are normal declarations Important
declarations are just the opposite: important; these are
declarations followed by the !important directive: * { font-family:
Helvetica !important; } Default browser rendering of elements are
not overridden unless a rule in user or author style sheet is
specified
Slide 27
Key concept that all web designers need to understand A measure
of how specific a rule selector is Selectors with low specificity
may match many elements on the page Selectors with high specificity
may match a single element on a page e.g., p matches every
paragraph in a document whereas #nav, only matches the element with
the id of nav
Slide 28
If two or more rules conflict and all have equal importance,
then the rule with the most specific selector wins Specificity has
four components; call them a, b, c, and d Component a is the most
distinguishing and d the least
Slide 29
Component a given 1 for declaration in a style attribute,
otherwise its 0 Component b is the number of id selectors in the
selector (those that begin with #) Component c is the number of
attribute selectors, class selectors, and pseudo- classes Component
d is the number of element selectors and pseudo-elements
Combinators like >, + and the white space (descendant
selector) have no effect on specificity id selector is not the same
specificity as an attribute selector that refers to the same id
attribute [id=nav] has a specificity of 0,0,1,0 wheras #nav has a
specificity of 0,1,0,0
Slide 32
Given conflicting rules with the same importance and the same
specificity, source order is used to determine the winner: the
declaration that appears later in the style sheet In a single
external style sheet the declarations at the end of the file
override those at the beginning when they conflict If the
conflicting rules appear in different style sheets the order in
which they are linked or imported controls which one is applied If
there are two linked style sheets in the of a document the one
linked last overrides the one linked first
Slide 33
Slide 34
Margin defines the space between block elements The space
around a block element MarginPaddingBorderContent Width Height
Border sets a visible border around the elements content Content
represented by text characters and displayed in a typeface Padding
sets the space between the content and inner border edge Height
default is distance between ascender and descender Width default is
width of the line of text
Slide 35
When adjacent elements have top and bottom margins that meet,
you would assume the total space between the two elements is the
sum of the bottom margin of one element and the top margin of the
next element In CSS the value collapses to the larger value of the
two element margins If the values were 5 + 10 the effective value
is 10 If they were 5 + 5 the effective value is 5