Controlling Page Style: Cascading Style Sheets (CSS)
Download
Report
Transcript Controlling Page Style: Cascading Style Sheets (CSS)
Controlling Page Style:
Cascading Style Sheets (CSS)
References:
1. Wang, P.S & Katila, S. (2004). A
Introduction to Web Design and
Programming. CA: Thomson Brooks/Cole.
2. W3Schools (http://www.w3schools.com)
Prepared by ackoo
The two important aspects of
xhtml web page:A web
page
XHTML
=
CSS
+
The two important aspects of
xhtml web page:A web
page
XHTML
=
CSS
+
For document
For presentation
structure, e.g.
style, e.g. font<head>…</head>,
size, font-family,
<body>…</body>,
body color, border,
<h1>…</h1>, etc.
background, etc.
About CSS:CSS
To determine the
Presentation style of
the following:
1.
2.
3.
The display styles in browser
(mostly used.)
The print formats to printers
The device-dependent styles such
as for aural browser.
About CSS:
(Do this example in class)
Take a look at these CSS
codes for formatting the
heading elements:
h1 {font-size: large; color:#000099}
h2 {font-size: medium; color:#000099}
h3 {font-size: small; color:#000099}
Save this as myfile.css (in
notepad, etc), and then ….
How to attach these codes
to the web document?
[Guess how?]
About CSS:(Do this example in class)
CSS code:
h1 {font-size: large; color:#000099}
h2 {font-size: medium; color:#000099}
h3 {font-size: small; color:#000099}
myfile.css
Very simple, just put a link
to “myfile.css” in your web
document, inside the
<head> element, like this:
<head>
<link rel=“stylesheet” type=“text/css” href=“myfile.css” />
</head>
About CSS:(General SYNTAX)
CSS code has two
important parts:
1)
Selector(s)
•
e.g. h1, h2, body, a:link,
td.try1, td.try2
In all, the general syntax for
style rule is like this:
selector
{property1 : value1
2)
Style declaration(s)
•
•
•
•
property : value
e.g. font-size : small
color : #000099
padding-left:1.5cm
property2 : value2
…
}
About CSS:(General SYNTAX)
CSS code has two
important parts:
1)
Selector(s)
•
2)
e.g. h1, h2, body, a:link,
td.try1, td.try2
Style declaration(s)
•
•
•
•
property : value
e.g. font-size : small
color : #000099
padding-left:1.5cm
In all, the general syntax for style rule
is like this:
selector(s)
{property1 : value1;
property2 : value2;
…
}
For e.g:
h1 {font-size: large; color:#009}
h2, h3, h4 {color : #009}
td.try1 {padding : 2cm}
a:link {color : red}
About CSS:(General SYNTAX)
In all, the general syntax for style rule
is like this:
selector(s)
{property1 : value1;
property2 : value2;
…
}
For e.g:
h1 {font-size: large; color:#009}
h2, h3, h4 {color : #009}
td.try1 {padding : 2cm}
Img.noborder1 {border:none}
a:link {color : red}
#mileageChart {font-family: Courier}
Notice that the selector can have
more than just HTML
elements.
The common type of selectors
are:
1)
Element Selector (HTML
elements)
2)
Class selector, write like
this tagName.className
3)
Pseudoclass selectors.
Most widely used for
creating hyperlink.
4)
Id selector
5)
Selectors can be grouped in
order to share the same
attributes and value.
About CSS:(Do this example in class)
selector(s)
{property1 : value1
property2 : value2
…
}
An example of defining hyperlink styles:
a:link {color: #00c;}
/* shaded blue (ie #0000cc) for unvisited links */
a:visited {color : #300; } /*dark red for visited links */
a:active
/* when link is clicked */
{ background-image: none;
color: #00c;
/* keeps the same color */
font-weight: bold;
/*but turns font bold */
}
a:hover
/* when mouse is over link */
{ background-color : #def;
background-image:none;
}
/*turn background gray-blue */
About attaching CSS
to Web Document
CSS or style sheet can be
applied to a web page
through the following
THREE approaches /
methods:
1.
External Style Sheet
CSS file(s) externally link to web
document (this is mentioned
earlier)
2. Internal Style Sheet
Internally in web document, placed
it inside the <head> element.
3. Inline Styles
Internally in web document through
the style attribute. Used with Style
attribute.
For further description, please READ THIS: http://www.w3schools.com/css/css_howto.asp
About attaching CSS
to Web Document
1.
•
External Style Sheet.
An external style sheet is ideal
when the style is applied to
many pages. With an external
style sheet, you can change the
look of an entire Web site by
changing one file.
Each page must link to the style
sheet using the <link> tag. The
<link> tag goes inside the head
section.
An example of applying
external style sheet:
<head> <link rel="stylesheet"
type="text/css"
href="mystyle.css" /> </head>
The browser will read the style
definitions (for example font
styles, paragraph styles, etc)
from the file mystyle.css, and
format the document according
to it.
For further description, please READ THIS: http://www.w3schools.com/css/css_howto.asp
About attaching CSS
to Web Document
2.
•
Internal Style Sheet
An internal style sheet
should be used when a single
document has a unique style.
You define internal styles in the
head section by using the
<style> tag.
An example of applying
Internal Style Sheet (try it now)
<head> <style type="text/css">
body {background-image:
url("images/back40.gif")}
p {font-family: Arial, Helvetica,
sans-serif; font-size: medium}
</style>
</head>
The browser will now read the
style definitions, and format the
document according to it.
For further description, please READ THIS: http://www.w3schools.com/css/css_howto.asp
About attaching CSS
to Web Document
3.
•
•
•
•
Inline style
An inline style loses many
of the advantages of style
sheets by mixing content with
presentation.
Use this method sparingly, such
as when a style is to be applied
to a single occurrence of an
element.
To use inline styles you use the
style attribute in the relevant
tag.
The style attribute can contain
any CSS property.
An example of applying Inline
Style (try it now)
<p style=“font-family: Arial,
Helvetica, sans-serif; font-size:
medium”>
This is a paragraph. This is a
paragraph. </p>
For further description, please READ THIS: http://www.w3schools.com/css/css_howto.asp
About attaching CSS
to Web Document
If these three approaches
were used simultaneously
for my web documents,
which approach has the
highest priority to take effect
?
The answer is…
http://www.w3schools.com/css/css_intro.asp
For further description, please READ THIS: http://www.w3schools.com/css/css_howto.asp