Download Chapter 8

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

Document related concepts

URL redirection wikipedia , lookup

Cascading Style Sheets wikipedia , lookup

Transcript
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)