Anda di halaman 1dari 3

HTML Project 8 Vocabulary

Creating Style Sheets

Cascading style sheets are used to maintain a consistent look across a Web site—especially Web sites that contain
many pages.
There are three different style sheets:
1. embedded style sheets
2. external style sheets
3. inline style sheets

style  A rule that defines the appearance of an element on a Web page


style sheet  A series of rules that defines the appearance of an element on a Web page
 Cascading Style Sheets
CSS  A common language with set standards and rules that allows Web developers to
write code statements that control the style of elements on a Web page

 Made up of a selector and a declaration that defines the style for one or more
properties

<h1 style =”font-family: Garamond; font-color: navy”>

selector  Part of the style statement that identifies the page elements
declaration  Part of the style statement that identifies how the elements should
display
 Includes at least one type of style, or property, to apply to the
selected element
style statement o Properties include color; text-indent; border-width; font-style
o For each property, the declaration includes a related value—
which specifies the display parameters for that specific
property

h1 {font-family: Garamond; First property value sets the h1 font family to


Garamond
font-size: 32 pt} Second property value sets the font size to 32
point
selector declaration (The browser will display all h1 headers in 32-point
Garamond)

 Add a style to an individual HTML tag, such as a heading or paragraph


 The style changes that specific tag, but does not affect other tags in the document
 Takes precedence over both embedded and external style sheets—helpful when
inline style one section of a Web page needs to have a different style than the rest of the Web
sheet page

<p style=”font-style: italic; font-size: 8 pt”>


(Changing the style for one paragraph)
embedded style  Add the style sheet within the <head> tags of the HTML document to define the
sheet style for a single Web page
 Use the start <style> tag at the top of the Web page within the <head> tags and
then the end </style> tag
 Has the second highest level of precedence—takes precedence over an external
style sheet

<style type=”text/css”>
<!--

p {text-indent: 8 pt} selector p defines the style for all paragraphs—indented 8


points
selector a used to indicate the link element
a {text-decoration: none; text-decoration: none changes the default to no
line for links;
font-family: Verdana;
font-size: 14 pt; Changes the font, color and point size of
the links
color:navy}

a:hover {background: navy; color: white}


defines the style of a link when the mouse pointer points to, or hovers over the
link
-->
</style>

 Create a text file that contains all of the styles you want to apply and then save the
text file with the file extension, .css
 Then add a link to this external style sheet into any Web page in the Web site
 Give the most flexibility and are ideal to apply the same formats to all of the Web
pages in a Web site
No style tags are needed; just style
A {text –decoration: none; statements
color: blue}

P {font family: Verdana, Garamond;


font-size: 11pt}

external style table {font-family: Verdana, Garamond;


sheet (linked) font-size: 11pt}
Enter the style statements in Notepad and save
th {color: white; the file with a .css extension
background-color: blue;
font-size: 11pt; Add a link tag on each Web page to which you
text-align: left} want to apply the styles

This link tag must be inserted within the <head> tags of each Web page
to which you want to apply the stylesheet

<link rel=”stylesheet” type=”text/css” href=”styles1.css”>

classes  You can create several different variations for any one tag
 You might utilize three different classes of paragraphs, and each one can have a
different style sheet declaration
 You can name classes anything that you want, but be sure to use a period before
the class name in the style sheets rule

<style type=”text/css”>
<!-->

p.beginning {color: red} Defining Classes:


p.middle {color: green} Style Statements
p.end {color: navy}

-->
</style>

<p class=beginning> This paragraph will have red text. </p>


Applying the
classes to the
<p class=middle> This paragraoh will have green text </p> paragraphs

<p class=end> This paragraph will have navy text </p>