website
Nobody
week_9_css_and_presentation.pptxCSS & Presentation
1
Web standards approach
2
Image source: http://www.digital-web.com/images/client_side_xslt_evolution.gif
WHY? Efficiency of code:
The larger your files are, the longer they will take to download, and the more they will cost some people (some people still pay for downloads by the megabyte.) You therefore don’t want to waste your bandwidth on large pages cluttered up with styling and layout information in every HTML file. Make the HTML files stripped down and neat, and include the styling and layout information just once in a separate CSS file.
Ease of maintenance:
If your styling and layout information is only specified in one place, it means you only have to make updates in one place if you want to change your site’s appearance
Accessibility:
Web users who are visually impaired can use a piece of software known as a “screen reader” to access the information through sound rather than sight—it literally reads the page out to them. In addition voice input software, used by people with mobility impairments, also benefits from well constructed semantic web pages. Much like a screen reader user uses keyboard commands to navigate headings, links and forms, a voice input user will use voice commands. Web documents marked up semantically can be easier to navigate and the information in them is more likely to be found by the user. Make sure that your critical content is available to everyone.
Device compatibility:
Because your XHTML page is just plain markup, with no style information, it can be reformatted for different devices with vastly differing attributes (eg screen size) by simply applying an alternative style
Web crawlers/search engines:
Chances are you will want your pages to be easy to find by searching on Google, or other search engines. A search engine uses a “crawler”, which is a specialized piece of software, to read through your pages. If that crawler has trouble finding the content of your pages, or mis-interprets what’s important because you haven’t defined headings as headings and so on, then chances are your rank in the search results will suffer.
Ref: http://dev.opera.com/articles/view/4-the-web-standards-model-html-css-a/
2
Cascading Style Sheets
3
Aid web accessibility and usability
Can produce an increased ease of maintenance
Style individual HTML elements
Position elements on a page
Use a system of rules to do all this
3
4
4
Look at these four slides.
5
5
6
6
7
7
Types of styles
Internal (document level)
External
Inline
8
#logo {
position: relative;
top: 15%;
text-align: right;
width: 334px;
height: 36px;
margin:0;
}
8
CSS code can be found in the head element of an html document – internal, document level
It can be found inside the start tags of elements in the body element – inline
It’s best found in a separate .css file – external.
External style sheet
9
<head>
<meta charset=“utf-8" />
<title>HIT151 Web 'n' Net</title>
<link href="hit151css/home.css" rel="stylesheet" />
</head>
<body> <div class="header"> <h1>Web Page Basics</h1> </div> <div class="header2"></div> <div class="contents">
/*stylesheet*/
h1,h2,h3 { font-family: verdana, arial, 'sans serif'; }
p,table,li { font-family: verdana, arial, 'sans serif'; margin-left: 10pt; }
ul { list-style: disc; }
ol { list-style: decimal; }
p,li,th,td { font-size: 75%; }
body { background-color: #ffffff; }
a:link {color:black} a:visited {color:black}
a:active {color:mediumblue} a:hover {color:mediumblue}
<head>
<meta charset=“utf-8i" />
<title>HIT151 Web 'n' Net</title> <style >
p,table,li {
font-family: verdana, arial, 'sans
serif'; margin-left: 10pt;
}
</style>
</head>
<body> <div class="header"> <h1>Web Page Basics</h1> </div> <div class="header2"></div> <div class="contents">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HIT151 Web 'n' Net</title> <style type=“text /css”>
p,table,li { font-family: verdana, arial, 'sans serif'; margin-left: 10pt; }
</head>
<body> <h1 style=“text-decoration: underline;”> Web Page Basics</h1>
Internal (document level) style sheet
Inline styles
9
Which to choose?
We will use ONLY external style sheets -
Easier to update across a site – change only needs to be made in one file
More semantically correct to separate html from css – it keeps content and design separate
Makes for cleaner (and therefore easier to update) html files and css files
CSS can be re-used elsewhere with ease
10
You can make quite drastic changes to your site (just like Zen Garden) without touching your html pages.
Only make changes to the css file.
Easier to re-use your css file for other sites – you just copy the file.
10
Link your style sheet to your html5 page
11
ref=“stylesheet.css”
<link href=“stylesheet.css”
type=“text/c
rel=“stylesheet”
/>
Where the linked document is stored
Type of relationship between documents
<head>
</head>
11
MIME type tells file type and extension
<link href=“stylesheet.css” rel=“stylesheet” type=“text/css” />
Copy the above into your html files (about, index and contact.html) but change the quotation marks.
Open your html file in a text editor also.
This line of code should be inserted inside the <head> element of your html files.
12
An example of a CSS rule
h1
{
font-family: arial;
color: red;
}
Selector
Braces (Curly brackets)
Property / Value
Property / Value
Declaration
12
Here’s an example of a rule.
The h1 selector is referring to the h1 elements inside an html file.
The above rule states that all text inside any h1 elements will be in Arial font and the colour of the text is red.
Have look at the Sitepoint reference -
http://reference.sitepoint.com/css/rulesets
13
Selector
Braces
Property
Value
What constitutes a CSS Rule?
Identifies the html element
Defines the beginning and end of a rule
Defines what you want to do to the element
The changeable setting of a property
Note: ‘property’ & ‘value’ come in pairs (like HTML attributes) – ‘property: value’ This pair is called a declaration.
13
These are the parts to all CSS rules
A style sheet is basically made up rules
Rules consist of selectors (that refer to your html document) and their properties and property values (which are held inside curly brackets)
Property name [colon] value [semi-colon]
14
Syntax of the property/value pair (declaration)
h1{
font-family: arial;
color: red;
}
14
Getting syntax right is of the utmost importance. Else your page display won’t be reliable.
Font typography…
15
A
A
A
A
serif | sans serif | cursive | fantasy | monospace
cursive
serif
fantasy
sans serif
monospace
15
Serif – flared or tapered endings
Sans-serif - without serifs, therefore no endings on strokes
Cursive – joining or nearly joining
Fantasy – decorative fonts
Monospace – all characters are of the same length
Font properties…
font-family – chooses the font family of the text
font-size – sets the size of the text
font-style – makes the text italic, oblique or normal
font-variant - sets the text in small caps or normal
font-weight – controls the bold formatting
16
16
Font is a CSS property. As a property it can have different values set.
17
font-family: serif |sans serif |cursive | fantasy | monospace | others
font-size: pt | 1- 100% | Larger| smaller | xx-small through xx- large
font-stretch: normal | wider | narrower | ultra-condensed through ultra- expanded
font-style: normal | italic | oblique
font-variant: normal |small-caps
font-weight: normal | bold | lighter | 100 - 900
Examples
17
Add a font property…
{
font-family: “Trebuchet MS”, “Helvetica”,
sans-serif;
font-weight: bold;
color: #477c32;
}
18
body
Changing the look of words and letters
18
font-family
Note…..
Keep it simple
3 font types max
1 for headings
1 for paragraph text
emphasis for specific words
19
cursive
serif
fantasy
sans serif
19
There’s a general design principle in web development and it is – don’t use any more than 3 fonts per page.
Font-family usage guide…
20
Minimum font – 10 point
Avoid UPPER-CASE only
Don’t underline (might confuse with anchors)
Don’t use blue
Avoid italics (except in citing)
Highlight keywords
20
General Guidelines
use at least 10 point font. Most common is the use of 12 point font for paragraphs of content;
do not use large quantities of upper-case only text;
do not use underlining to emphasise text because the user might confuse this with a link;
do not use blue text for highlighting words because this is the standard colour for links;
avoid using italics because the sloped lines will display very bad pixelization (especially on Macintosh computers) and bad kerning or spacing between the letters;
use highlighted keywords to help people scan the text (hypertext links serve as one form of highlighting; typeface variations and colour are others)
Research
(from HIT 151, 2003 Discussion Forum – courtesy of Geoff Garden)
Participants' font preference Overall, Verdana was the most preferred font, while Times was the least preferred.
Older adults: Older adults are more accurate with, and prefer larger (14-pt) font sizes. They also prefer sans serif fonts (eg. Helvetica) over serif fonts, although serif fonts tended to support faster reading.
Children: Children prefer sans serif fonts (Arial & Comic) over serif fonts, however no difference was found in reading speed/accuracy between font types at 12-pt font size.
font- size…
21
21
Note: I have used document level style here so that you can see the code and the result on the same slide.
Fonts are measured in points
This originated in the 1800s in France
Abbreviation in HTML is pt.
The default size is 12.
The absolute scale is:
xx-small
x-small
small
medium - default
large
x-large
xx-large
Older browsers do not recognise these
font properties
Can use relative size:
p {font-size:larger;}
p {font-size:40%;}
Don’t make the font size so small that it is impossible to read!
font-size values…
Absolute size - xx-small x-small small medium large x-large xx-large
22
Relative size – larger smaller
Length (relative)
em (the height of the element’s font)
ex (height of the letter x)
px (pixels, relative to screen resolution)
Length (absolute)
in (1 inch = 2.54cm)
cm (cms 1cm = 10mm)
mm (millimetres)
pt (points 1pt=1/72inches)
pc (picas 1pc=12pt)
Percentage – %
22
Absolute – Not dependent on any other font in the stylesheet
Relative – dependent upon size of a parent (containing) element
Percentage – these values are absolute but relative to other values, as defined for each property. Most often the percentage value is relative to the element's font size.
Length – Relative units give a length relative to another length property, and are preferred since they will better adjust to different media. Relative lengths will more easily scale from one medium to another – eg webpage to laser printer.
Be careful with em – if the parent element has font-size declared already, then em is scaled to that element, not the html or body element.
Length – Absolute length units are highly dependent on the output medium, and so are less useful than relative units.
Which one to choose ???
Set the parent element’s font size as the user's chosen default.
Then use relative sizing
23
body { font-size: 1em }
p { font-size: 0.9em; }
h1 { font-size: 1.8em; }
h3 { font-size: 80%; }
Allows scalability for different user devices and needs
23
Set the user default size for the parent element – 1em will give the font that the user has set on his/her browser.
All other sizing can be relative to this one.
What’s a parent element? It’s a block level element that contains other elements – eg body, p, blockquote etc
Setting multiple properties in one declaration…
body
{
background: #191919;
color: #000;
font: 1em/160% Tahoma, Verdana, "Lucida Sans
Unicode", Helvetica, Arial, sans-serif;
text-align: left;
}
1em/160% - first sets font size and second sets spacing between lines
24
24
You can set size, spacing and font type in one declaration
Text properties…
line-height - setting the distance between lines of text
white-space - setting how white space inside an element is handled (line wrap)
letter-spacing – setting the amount of space between letters
text-indent -setting the amount of space the first line of a paragraph is indented
text-align - setting the alignment of the text
text transform - setting the capitalisation of an element’s text
text- decoration – used to decorate text, mostly with lines.
25
25
Styling links and lists
The CSS pseudo classes
Used to change appearance of links (ie the anchor tag <a> )
There is a particular order that must be followed for them to work properly
The way to remember this order – love/hate (see the following slide)
26
26
Anchor pseudo-classes
27
Go To:
http://www.w3schools.com/css/css_pseudo_classes.asp
Your Turn
27
Read this page of w3schools.com website.
Link
Visited
Hover
Active
= LVHA = love/hate
You’re soon going to style your navigation list (index, about us, contact us)
Styling your <a> element
a
a:link
a:visited
a:hover
a:active
28
{font-weight: bold; }
{color: black;}
{color: gray;}
{text-decoration: none;
color: white;
background-color: navy;}
{color: aqua;
background-color: navy;}
Here’s an example of styling the anchor tags on an html page
28
Selectors .. a prelude
<ul id="navlist">
<li id="active">
29
An id is a CSS selector (more next week on this). It identifies a unique element.
#navlist { padding: 3px 0; margin-left: 0; border-bottom: 1px solid #778; }
#navlist li { list-style: none; margin: 0; display: inline; }
Html code
CSS code
29
For this week just understand that you can give an element an ‘id’. Choose your own word and put it in double quotation marks inside the start tag of the element you wish to style.
You can then use this id in your css file to make changes to a sole element.
Above the whole list has been style (ul) and then just the list elements have been styled to be inline and also to remove the bullet points.
Background properties
30
http://www.w3schools.com/css/css_background.asp
30
Have a look at setting the background of an element.
List properties
31
http://www.w3schools.com/css/css_list.asp
31
Have a go at some of the css list properties in your website.
32
list-style-position: inside;
list-style-position: outside;
32
This is an inline style, but you can do the same using an external style sheet.
Give the <li> an id:
(<li id=“insideList”> )
And in css write
#insideList {
list-style-position: inside;
}
List selectors for nested lists
33
When Styling lists:
Need to specify the first level, second level and third level items
33
http://reference.sitepoint.com/css
34
34
A simply wonderful resource!!
35
http :// docs.webplatform.org/wiki/css
http://reference.sitepoint.com/css
http ://www.w3schools.com/css/default.asp
Where to find help with CSS
35
A note about W3Schools – while it is a very good resource, it doesn’t always adhere to web standards, so if you see something that doesn’t gel with what you’ve been taught in this class, don’t follow it’s example.
