style sheets
Download
Report
Transcript style sheets
CHAPTER 3
STYLE SHEET
Madam Hazwani binti Rahmat
http://fsktm2.uthm.edu.my/hazwani/v2/
WEB STYLE SHEETS
HTML is limited in its ability to define the appearance, or style, of one or more web
pages. (Ex: changing characteristics such as font family, font size, margins, and link
specifications.)
As a result, cascading style sheets (css) specifications were defined by W3C. CSS is a
language used to enhance the display capabilities of HTML.
A style is a rule that defines the appearance of an element on a web page.
A style sheets is a series of rules that defines the style for a web page or an entire
web site.
2
WEB STYLE SHEETS (2)
Style sheets allow a web developer to control the style of elements on a web page by
assigning several properties at once to several or single elements on a web page.
For instance, you can change all of the text in a paragraph to a particular font family
and font size using a style sheet.
While you could use HTML to specify the font family and font size within each individual
paragraph tag, using style sheets allows you to change styles such as font family, font
size, and others more easily and consistently.
3
TYPES OF WEB STYLE SHEETS
CSS provides support for THREE types of style sheets:
1) Embedded (internal)
Is used to control the style for a single web page.
2) Inline
Is used to define a style for only a single HTML tag.
3) External (linked)
Is used to control the appearance of multiple pages in a web site.
4
EMBEDDED STYLE SHEETS
How to apply:
1) Insert a start <style> tag at the top of the web page within the <head> tags of the
HTML document.
2) Put style statement within the <style> tag.
3) End the embedded style sheet by adding an end </style> tag.
Example:
<style>
p{ text-indent:8pt}
a{
color: navy;
font-size: 14 pt;
}
</style>
5
INLINE STYLE SHEETS
How to apply:
Enter declaration within the HTML tag to which the style is to be applied.
Example:
<h1 style=“font-family: Garamond; font-color: navy”>
declaration
declaration
The style changes only that specific tag and does not affect other tags in the
document.
Because they take precedence over the other types of style sheets and affect the style
for individual HTML tags, inline style sheets are helpful when one section of a web page
needs to have a different style than the rest of the web page.
6
EXTERNAL STYLE SHEETS (1)
Is a separate text file that contains the style statements that define how the web page
elements will display.
Ensures each page uses a consistent style.
The format of the external style sheet is very similar to the format of the embedded
style sheet.
However, it does not need <style> tags to start and end the style sheet (it includes just
the style statements).
7
EXTERNAL STYLE SHEETS (2)
How to apply :
Involves a two step process:
1) creating a text file that contains all of the styles to be applied, saved with a
.css extension.
2) Linking this external style sheet into any desired web page in the web site by
adding<link> tag inserted within the <head> tags of the web page.
To
apply this style sheet to other pages in the web site, insert the same <link>
tag within <head> tag of each web page.
8
EXTERNAL STYLE SHEETS (3)
Example:
<link rel=“stylesheet” type=“text/css” href=“style1.css”>
document type
Language used in
specified file
url of the css file
where;
rel=“stylesheet” establishes that the linked document is a style sheet.
type=“text/css” indicates the css language is used in the text file containing the
style sheet.
href=“style1.css” indicates the name and location of the linked style sheet.
9
STYLE SHEET PRECEDENCE
The three style sheets supported by CSS control the appearance of a web page at
different levels.
Each style sheet type also has a different level of precedence in relationship to the
others.
Because style sheets have different levels of precedence, all three types of style sheet
can be used in a single web page.
For example, you may want some elements of a web page to match the other web
pages in the web site, you may also may want to vary the look of certain sections of
that web page.
10
STYLE SHEET PRECEDENCE (2)
Embedded style sheet overrides or take precedence over any style defined in an
external style sheet.
An inline style sheet takes precedence over the styles defined in both embedded and
external style sheet.
TYPE
LEVEL AND PRECEDENCE
Inline
Level : Change style within an individual HTML tag
Precedence : Overrides embedded and external style sheets.
Embedded Level : Change style of one web page
Precedence : Overrides external style sheets
External
Level : Change style of multiple pages in a web site
Table : Three Types of Style Sheets
11
STYLE STATEMENT FORMAT
A style statement format is made up of a selector and a declaration.
A selector identifies the page elements.
A declaration identifies how the elements should display.
A declaration defines style for one or more properties, for selected element.
For each property, the declaration includes a related value, which specifies the display
parameters for that specific property.
12
STYLE STATEMENT FORMAT
Style sheets allow you to control many different property values for various elements in
a web page.
PROPERTY NAME OPTIONS THAT CAN BE CONTROLLED
background
Color, image, position
border
font
list
margin
Color, style, width
Family, size, style, variant, weight
Image, position, type
Length, percentage
text
Alignment, decoration, indentation, spacing, white space
Table : Properties and Values
13
CLASSES IN STYLE SHEETS (1)
Class is a category defined for specific elements of HTML files.
Once defined, a specific style can be created for each class.
Classes in style sheets gives web developer more control over the style for different
sections of a web page where they can apply styles to HTML tags selectively.
Drawback:
1) Classes can be defined for use only in embedded or external style sheets.
2) Because the purpose of using classes is to format a group of elements at once,
not individual elements, classes do not work in inline style sheets.
14
CLASSES IN STYLE SHEETS (2)
Defining and using classes in style sheet is a two-step process:
1) Name the class and marking elements that belong to the class
Assign a defined class name by adding the tag class=“classname” to elements
which will apply the class defined.
Example:
<p class=“beginning”>
element
Class name
where;
beginning is the class name and the <p> tag indicates that the class is a
specific type of paragraph style.
15
CLASSES IN STYLE SHEETS (3)
2) Define specific style for the class
Within the <style> tags in embedded or external style sheet, enter style statement
as the following format:
p.beginning{
color:red
}
where;
The p indicates that the classes applies to a specific category of the
paragraph tag and beginning is the class name.
The tag and class name are separated by a period.
The declaration then lists the property-value statements that should be
applied to elements in the class.
16
SETTING PARAGRAPH STYLE
Syntax of style statement:
p{
property : value
}
Example:
p{
text-indent : 10%
/* indent first word of each paragraph 8
points from the left edge of browser
window */
}
17
SETTING LINK STYLE
Syntax of style statement:
a{
property : value
}
Example:
a{
text-decoration : underline
/* underline links */
}
18
SETTING LINK STYLE
Links have three common states (normal, visited, and active).
Styles can be set for the states either individually or for all states at once.
Syntax of style statement:
a:state{
property : value
}
Example:
a:visited{
color: blue
/* change colors of visited links into blue */
}
19
SETTING BODY STYLE
Syntax of style statement:
body{
property : value
}
Example:
body{
margin : 8pt
/* change margin of web page body to 8 points */
}
20
SETTING TABLE STYLE
Syntax of style statement:
table{
property : value
}
Example:
table{
font-family : Verdana;
font-size : 11pt
/* Set table content display to 11pt Verdana */
}
21