ECT 270 Cascading style sheets Part I
Download
Report
Transcript ECT 270 Cascading style sheets Part I
Cascading style sheets - CSS
●
Separate the content from the style!
– More flexible (changing one style definition in the style
sheet will change the entire site)
– Consistent design
– Less work for larger sites (more overhead)
CSS1-’96 supported by IE 4, Netscape 4
● CSS2-’98 supported by IE 5, Netscape 6
●
Cascading Style Sheets (CSS)
●
●
●
●
●
Like HTML, style sheets must use a common language
and follow common rules. This language is known as
Cascading Style Sheets, or more simply, CSS.
CSS has been developed by the WWW Consortium
(www.w3c.org), the same organization that develops
standards for HTML.
CSS is designed to augment HTML, not replace it.
CSS is a whole new way of formatting Web pages.
CSS provides several tools not available with standard
HTML.
Type of style rules
●
Inline style:
– adds styles to each individual tag within the HTML file
(single section)
●
Embedded or global style:
– a style is applied to the entire HTML file. The style
declarations are in the header (web page)
●
Linked or external style:
– links the HTML file to a text file containing the style
declaration. Gives a consistent look across pages (web site)
Components of a CSS Style
The three parts to a CSS style: selector, property, and value.
●
●
●
The selector is the HTML tag you are formatting (e.g. H1),
The property is the attribute you want to change (e.g. font,
color).
Each property is set to a value.
Every property (i.e. attribute) and its value are separated by a
colon (:).
Recall that we previously assigned attribute/value pairs by using the equals
sign. However this syntax is not correct (does not work) in CSS.
If you include multiple groups of property/value pairs, each group
must be separated by semicolons (;).
4
Property / Value Pairs
Example of property / value pairs separated by
semicolons:
font-family:Arial;
font-style:italic;
font-weight:bold;
color : blue
Compare how you set a style with HTML syntax v.s.
CSS syntax:
– HTML syntax: color=“blue” deprecated
– CSS syntax: style=“color:blue”
5
Inline style (in body)
<tag style=“attribute1:value1; attribute2:value2 …”>
<body>
<h3 style=“font-family:Arial, Times;
font-style:italic; color:green”>
This is H3, Arial, italic and green
</h3>
<h3>This is simply H3</h3>
</body>
This is H3, Arial, italic and green
This is simply H3
Inline Style Examples
The style <body style="color:blue">
body is the selector, color is the property, and blue is the value.
In the style <body style="background-color:silver">
body is the selector, background-color is the property, and
silver is the value.
These tags have their usual </body> closing tags.
7
Inline Style Examples
In the style <p style="font-family:Arial; font-weight:bold">
p is the selector, font-family and font-weight are the
properties, and Arial and bold are the values.
In the style <p style="font-size:300%; color:red">
p is the selector, font-size and color are the properties, and
300% and red are the values.
These tags have their usual </p> closing tags.
8
span, div, and p Tags
The previous styles show you how to change the default style of a tag.
What if you want to apply a style to just a section of text (one word, a few
words, a sentence, a paragraph)?
You can use the span or div or p tags, and then apply a style(s):
<span style="font-style:italic"> Hey! </span>
<div style="color:blue"> Good night… </div>
9
Differences between span, div, p
span tags are usually used to format a small amount of text, such
as a single word or sentence.
p tags are typically used to format individual paragraphs
div tags are usually used to format even largers segments of a
web page, such as a table of contents.
– Since div tags specify a division or section of the web page, the tag includes
additional formatting, namely, a line break before and after the <div> and
</div>.
– (This is similar to the additional line breaks automatically placed after <h>
tags).
10
Example of the Span tag
<body>
This sentence has one word in
<span style="color:#0000FF;"> blue </span>
and the rest in standard text color. <span
style="color:#00DD45;">This sentence is in
green.</span>
<p style="font-style:italic; font-size:200%">Note
how unlike tags such as ‘h’ ‘p’ or ‘div’, the
‘span’ tag doesn’t apply extra formatting such as
new lines. </p>
</body>
11
Embedded style sheet (in header)
<style>
selector
</style>
{attribute1:value1; attribute2:value2 …}
<head>
<style>
h3 {font-family:Arial; font-style:italic; color:green}
</style>
</head><body>
<h3>This is H3, Arial, italic and green</h3>
<h3>And so is this H3</h3>
</body>
This is H3, Arial, italic and green
And so is this
External style sheet (in header)
●
Create a text file containing all style declarations:
– File should have extension “.css” such as: mystyle.css
●
Link, or import that file to the HTML file using special
tags in the header.
<link href=“URL” rel=“stylesheet” type=“text/css”>
mystyle.css
OR
<style>
@import url(“mystyle.css”)
</style>
@import or multiple LINK
tags allow you to use
more than one style sheet
in the same document
Using CSS Style Types
●
If you need to format a single section in a Web page,
you’d probably use an inline style.
● An embedded style is applied to various sections
within a Web page
● Create styles that apply to an entire Web site by
creating a text file containing style declarations.
– Most style sheets have the extension “.css”, though this is
not a requirement.
– Within a style sheet, you don’t need <style> tags, just the
style declarations.
External Style Examples
●
http://www.w3schools.com/css/showit.asp?filename=ex1
●
http://www.w3schools.com/css/showit.asp?filename=ex2
Setting fonts and attributes
●
SAFE Font-families:
Times New Roman, text
Arial, Helvetica, headings
Courier New text
Using Font Families
●
To choose a font-family, use
font-family: font1, font2,….
– Examples:
body{font-family: Times New Roman, serif}
p{font-family: Arial, Helvetica, San-serif}
●
A browser will display the body text using the first
font available in the list above.
● Helpful to use a generic family name as the last option.
Font-size style definition
font-size: size
●
h1{font-family: Arial, sans-serif; font-size: 28pt}
● Size can be expressed as
–
–
–
–
Absolute units: cm, mm, pt, in.
Relative units: px, em, ex.
A percentage (of font-size of parental element)
Keywords (absolute): xx-small, x-small,small, medium,
large, x-large, xx-large
– Keywords (relative): smaller, larger (relative to the font-size
of the parental element)
Font styles and weights
●
font-style: style_type
● style_type normal, italic or oblique
●
font-weight: weight
– weight can be
a value from 100(lightest) to 900 (boldest) in intervals of 100.
normal or bold
lighter or bolder (relative to the parental element)
Aligning Test
●
text-align:alignment
– Alignment left, center, right or justify (like in MS words)
●
Examples:
h1,h2,h3,h4,h5,h6{
font-family: Arial,sans-serif;
text-align:center;
font-weight:700;
}
p{font-family: Times new roman,serif;
text-align:justify;}
Combining styles
●
A linked style sheet can help you maintain a consistent
look and feel throughout your Web site
● If you want a certain page to have additional styles,
you can include styles in the head of that particular
HTML document
● If you want just one section of a page to look different,
you might use the inline styles with a <div> or <span>
tag.
Combining styles
●
The @import tag must be the first element within the
STYLE tag
● Embedded style declarations should come after the
@import commands
● If two style sheets define competing style, the
innermost style sheet wins
Style precedence:
inline > global > external > browser
CSS control of Lists
Style declarations for list elements
(applicable to <ul>, <ol> and <li> tags).
list-style-type : type
disc, circle, square, none (<ol> or <ul>)
decimal
(“decimal-leading-zero” is not a valid value)
lower-roman, upper-roman
lower-alpha, upper-alpha
In IE, specify an image for use as a label (<ol> or <ul>)
list-style-image: url(image)
warnings:
1. does not work in Netscape 4.0
2. nested lists will automatically inherit this image unless you
set the list-style-image attribute to “none”
Change the position of the labels (semi works in IE)
list-style-position: inside (“outside” is the default)
Defining colors in CSS
●
Color names (names supported by HTML are also
supported by CSS):
– body {color: teal}
●
Hexadecimal form:
– body {color: #008080}
●
RGB color values:
– body {color: rgb(0,128,128)}
●
RGB color percentages:
– body {color: rgb(0%,50%,50%)}
Colors on the Web
Colors on the web are represented by 3 numbers, called an RGB
triplet based on their Red, Green, and Blue components. So
you can “mix” any color you like.
Each component has 8 bits, so there are 24 bits in all.
The intensity of each component is expressed as a value ranging
between (0-255) in decimal base.
RED = (255, 0, 0)
25
Background color
●
Background colors can be applied to almost any
element in a Web page not just the page itself.
H1 {background-color: rgb(204,102,255)}
This is an H1 headers with a purple background
More background styles
●
Background-image : url (file.jpg)
● Background-attachment: scroll | fixed
(to allow the image to scroll with the element or not)
● Background-repeat: repeat | repeat_x | repeat_y | norepeat
(controls how the image is tiled)
Tables and CSS
●
Recall that the Height and Width attribute for <table> tag have been
depricated. We can use the “style” attribute for CSS instead.
●
Examples:
–
–
–
–
●
<table
<table
<table
<table
style="width:50%; height:20%">
style="width:100%">
style="width:500px; height:700px">
style="width:50%; height:200px">
Similarly for table cells:
– <td style="width:value; height:value">
●
Other Table Attributes?
– Examples from W3Schools
Using class and ID as selectors
●
An HTML tag can be a selector but sometimes you
want to be more specific. For example you have a
huge table and you want to format the rows in 4
different ways. Using TR as a selector will allow you
only one style definition
● Instead you can define a class and then attach it to any
HTML tag, without limiting the tag itself to a
particular style
Using classes as selectors
●
Define a class (in the header) by
– giving it a name preceded by a period
– adding the standard style definitions inside {}
<style type=“txt/css”>
.bright {font-weight:bold; color:red}
</style>
●
Apply the class to any HTML tag
<strong class=“bright”> text </strong>
<h1 class=“bright”> text </h1>
More on classes
●
Define a class for a specific tag by
– Attaching to the tag selector a dot and the class name
– Adding the standard style definition within {}
●
This particular class can only be applied to the tag
used in its definition
<style type=“txt/css”>
h1.bright {font-weight:bold; color:red}
</style>
“bright” can be used only for h1
Hyperlink pseudo-class
●
a: link {style for never visited links}
● a: visited {style for visited links}
● a: active {style for link that is currently being clicked}
● a: hover {style when the mouse cursor is hovering over
the link} – rollover effect.
a:hover {color=red; text-transform:uppercase;
font-weight=bold}
The <div> tag
●
●
●
This HTML tag does not format content
It creates a container for block-level elements
You can assign a CLASS (or ID) to the container
<ul>
<div class=“bright”>
<li> First item
<li> Second item
</div>
<li>Third element
</ul>
The <span> tag is used to
mark inline elements like
letters, words or phrases
Block-level element boxes
●
HTML tags that can be treated as block-level
elements:
–
–
–
–
–
–
●
<h1>-<h6>, <p>, <hr>
<blockquote>
<ul>,<ol>, <li>
<div> (Use this as a block container)
<body>
<img>
You can move them around the page, apply borders
and background colors to them etc.
Formatting block-level elements
Block-level element
padding
margin
border
●
●
●
The size of margins, border and padding are set with the
margin, padding, and border properties respectively
The padding area uses the same background as the
element itself
Margins are always transparent
Formatting block-level elements
CSS Box Model Examples