7.2 external style sheets
Bulldogs83
924 views
5 slides
Mar 19, 2012
Slide 1 of 5
1
2
3
4
5
About This Presentation
No description available for this slideshow.
Slide Content
External Style Sheets
External Style Sheets:
An external style sheet is a separate file with a
.css extension. It contains only CSS code and
no XHTML.
Utilized to maintain consistent styling across
multiple pages.
Enables us to make global changes to a website
from a single file.
Further separates our page content from our
page styling.
An external style sheet is a separate file with a
.css extension. It contains only CSS code and
no XHTML.
Utilized to maintain consistent styling across
multiple pages.
Enables us to make global changes to a website
from a single file.
Further separates our page content from our
page styling.
Linking to an External Style Sheet:
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
For each XHTML page that will use the styling of
the external CSS file, place a <link> statement in
the <head> section of the document.
This is the name of the external CSS
file. If no path is specified, the file
must reside in the same folder as the
XHTML file.
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
For each XHTML page that will use the styling of
the external CSS file, place a <link> statement in
the <head> section of the document.
This is the name of the external CSS
file. If no path is specified, the file
must reside in the same folder as the
XHTML file.
The External CSS File:
The syntax for the external
CSS file is nearly identical to
an internal style sheet. We do
not need the <style> element
or any other introductory code.
p {
color: brown;
font-style: normal;
font-weight: bold;
font-family: Arial;
font-size: 12px;
}
h1 {
text-align:center;
font-style:italic;
font-weight:bold;
font-size:24px;
font-family:Arial;
}
style.css:
It doesn't matter whether or
not we place a space between
the selector and the property.
Using spaces does make the
style sheet easier to read.
The syntax for the external
CSS file is nearly identical to
an internal style sheet. We do
not need the <style> element
or any other introductory code.
p {
color: brown;
font-style: normal;
font-weight: bold;
font-family: Arial;
font-size: 12px;
}
h1 {
text-align:center;
font-style:italic;
font-weight:bold;
font-size:24px;
font-family:Arial;
}
style.css:
It doesn't matter whether or
not we place a space between
the selector and the property.
Using spaces does make the
style sheet easier to read.
Adding CSS Comments:
p {
color: brown;
font-style: normal;
font-weight: bold;
font-family: Arial;
font-size: 12px;
}
/*This main heading will be
changed to Verdana in June.*/
h1 {
text-align: center;
font-style: italic;
font-weight: bold;
font-size: 24px;
font-family: Arial;
}
Just as we add comments to
our XHTML code, we can do
the same with CSS. Everything
between the opening /* and
closing */ will be ignored by the
browser.
CSS comments can be used
when experimenting with styles.
Instead of deleting style
declarations and then retyping
them, we can "comment them
out" temporarily and then
remove the /* and */ later.
p {
color: brown;
font-style: normal;
font-weight: bold;
font-family: Arial;
font-size: 12px;
}
/*This main heading will be
changed to Verdana in June.*/
h1 {
text-align: center;
font-style: italic;
font-weight: bold;
font-size: 24px;
font-family: Arial;
}
Just as we add comments to
our XHTML code, we can do
the same with CSS. Everything
between the opening /* and
closing */ will be ignored by the
browser.
CSS comments can be used
when experimenting with styles.
Instead of deleting style
declarations and then retyping
them, we can "comment them
out" temporarily and then
remove the /* and */ later.
Tags
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 924
- Slides 5
- Favorites 1
- Age 5008 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
48 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
47 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
37 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
35 views
21
Know for Certain
DaveSinNM
23 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
26 views