Transcript Chapter 8
Ch 8
HTML and CSS Web Standards Solutions
A Web Standardistas’ Approach
CSS 101
ADDING SOME STYLE
Microsoft Word example of use of Styles – in
Action
First CSS
p
{
color: teal;
}
ANATOMY OF A CSS RULE
selector
{
property: value;
}
ANATOMY OF A CSS RULE
What is a RULE?
RULE
Selector Declaration
p { color : red; }
PropertyValue
ADDING COMPLEXITTY
selector
{
property1: value1;
property2: value2
}
ADDING CSS TO A WEB PAGE
Embedded within a Web page – part of the <head>
<style type=“text/css”>
selector_list……
</style>
Styling the <body>
Text colour
Background colour
Width
Headings
Inheritance
The default action
Specificity
Customisation of clauses
EXAMPLES OF ADDING CSS TO A WEB PAGE
http://www.webstandardistas.com/book/
COMMENTING YOUR CSS
It is essential to make your code readable and
adding comments help explain what your
intentions were when you wrote the particular
CSS.
Ch 9
HTML and CSS Web Standards Solutions
A Web Standardistas’ Approach
STYLING TEXT
INHERITANCE AND SPECIFICITY
Inheritance
<p> is the child of <body> and <body> is the parent
of <p> in this example.
As you build more
the use of h1-h4,
blockquote, cite,
and img will also
complicated examples
p, em, strong,
abbr, ul, ol, li, a
be children of body
INHERITANCE AND SPECIFICITY
Inheritance
As
the rules are children of the same parent they
automatically inherit their properties for their style.
Specificity
Why
does an h1 not be the same size as the body
font size it inherits ?
Answer:
there must be rules being applied as well as
the ones you are creating.
Where are they located ?
Answer: default stylesheets
INHERITANCE AND SPECIFICITY
Specificity
What/Where
They can be located in 3 different places:
Author Styles
Created by the author of the Web Page
User Styles
The User may have their preferred Stylesheet that they want applied – visual
impairment
User Agent Styles
are they ?
Browser has its own default styles
Is there an order to how the Rules are applied
Yes, we will see the process in Chapter 10
‘TYPE’ FOR THE WEB
There are core fonts that all browsers set to
adhere to:
http://www.webstandardistas.com/09/core_fonts.html
It is possible to list alternative font-family values
font-family: Baskerville, Georgia, "Times New Roman", serif;
So if Baskervile is not available it is substituted by Georgia and if it not
available it is substituted by Times New Roman, etc.
Serif fonts are those decorated with decorative serifs or accents at the end of
various letters – Times New Roman.
San-Serif fonts do not have the decoration - Arial.
Monospace fonts use the same spacing between characters
regardless of the pairing of characters Couries New.
‘TYPE’ FOR THE WEB
Sizing text matters
There
are reserved keywords:
Source: http://www.w3schools.com/CSS/pr_font_font-size.asp
METHODS OF SIZING TEXT
Sizing text:
Pixels
Fixed and therefore not very accessible
Ems
The typical browser default font-size is 16px
body
{
font-size : 62.5%;
}
62.5% because it transforms 16 pixels to 10 pixels, which is easier to work with.
p
{
font-size : 1.4em;
}
<!– 14px -->
MORE EFFICIENT RULES
If you had to write each Rule out completely it
will mean that the file size will get larger and
therefore take longer to download.
TRANSFORMING TEXT
It is possible to transform text to:
UPPERCASE
lowercase
Capitalize
TRANSFORMING TEXT
Character Spacing:
Line Height:
TRANSFORMING TEXT
Paragraphs
text-align property
left (default)
right
center
justify
text-indent property
STYLING LINKS
CSS allows you to style how Web links appear to the user.
There are four ‘classes’ available to do this:
link
visited
Move mouse over
active
Viewed recently
hover
Unvisited link in a page
Clicking on the link
focus
Using the keyboard the user is focusing on this link
STYLING LINKS
Changing
color
decoration
line height
Sequence
STYLING LINKS
Order
is important in defining the
CSS rules
LoVe HAte your Links
a:link
(L)
a:visited (V)
a:hover (H)
a:active (A)