Transcript of Week 4. Three ways to apply CSS: Inline CSS Internal style sheets ( header style information)...
- Slide 1
- Week 4
- Slide 2
- 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
- Slide 30
- SelectorABCDSpecificity h100010,0,0,1.foo00100,0,1,0
#bar01000,1,0,0 ul#nav a:link01120,1,1,2
- Slide 31
- 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