22
Ch 8 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach
| Date post: | 01-Jan-2016 |
| Category: |
Documents |
| Upload: | kevin-cole |
| View: | 219 times |
| Download: | 2 times |
Ch 8HTML and CSS Web Standards SolutionsA Web Standardistas’ Approach
Microsoft Word example of use of Styles – in Action
First CSSp{
color: teal;}
selector{
property: value;}
What is a RULE?RULE
Selector Declaration
p { color : red; }
Property Value
selector{
property1: value1;property2: value2
}
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
http://www.webstandardistas.com/book/
It is essential to make your code readable and adding comments help explain what your intentions were when you wrote the particular CSS.
Ch 9HTML and CSS Web Standards SolutionsA Web Standardistas’ Approach
Inheritance
<p> is the child of <body> and <body> is the parent of <p> in this example.
As you build more complicated examples the use of h1-h4, p, em, strong, blockquote, cite, abbr, ul, ol, li, a and img will also be children of body
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
Specificity What/Where are they ?
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 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
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 valuesfont-family: Baskerville, Georgia, "Times New Roman", serif;So if Baskervile is not available it is substituted by Georgia and if it notavailable 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.
Sizing text matters There are reserved keywords:
Source: http://www.w3schools.com/CSS/pr_font_font-size.asp
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 -->
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.
It is possible to transform text to: UPPERCASE
lowercase
Capitalize
Character Spacing:
Line Height:
Paragraphs text-align property
left (default) right center justify
text-indent property
CSS allows you to style how Web links appear to the user.
There are four ‘classes’ available to do this: link
Unvisited link in a page
visited Viewed recently
hover Move mouse over
active Clicking on the link
focus Using the keyboard the user is focusing on this link
Changing color decoration line height
Order is important in defining the CSS rules
LoVe HAte your Links a:link (L) a:visited (V) a:hover (H) a:active (A)
