This document discusses different methods for using cascading style sheets (CSS) to control the appearance and formatting of web pages, including inline styles, embedded style sheets, and linking to external style sheets. It covers CSS syntax and properties for formatting elements like font, color, and layout. Style sheets allow separation of design from HTML content and uniform styling across pages.
3. In this lesson, you will learn:
To control the appearance of a Web site by creating
style sheets.
To use a style sheet to give all the pages of a Web site
the same look and feel.
To use the class attribute to apply styles.
To use style sheets to separate presentation from
content.
3
Cssfounder.com
4. Cascading Style Sheets (CSS)
Separation of structure from presentation
Three methods of CSS:
Inline Styles
Embedded Style Sheets
Conflicting Styles
Linking External Style Sheets
4
Cssfounder.com
5. Declare an individual element’s format
Attribute style
CSS property followed by a colon and a value
i.e: style = “font-size:20pt”
5
Cssfounder.com
6. <body>
<p>This text does not have any style applied to it.</p>
<p style = "font-size: 20pt">This text has the
<em>font-size</em> style applied to it, making it 20pt.
</p>
<p style = "font-size: 20pt; color: #0000ff">
This text has the <em>font-size</em> and
<em>color</em> styles applied to it,
making it 20pt. and blue.</p>
</body>
6
The style attribute allows you to declare inline styles.
Separate multiple styles with a semicolon.
Cssfounder.com
7. Embed an entire CSS document in an XHTML document’s
head section
Attributes Description
MIME type
type = “text/css”
Multipurpose Internet Mail Extensions (MIME) type
Describes a file’s content
Property Description
background-color Specifies the background color
font-family Specifies the name of the font to use
font-size Specifies a 14-point font
7
Cssfounder.com
8. <head>
<style type = "text/css">
em { background-color: #8000ff; color: white }
h1 { font-family: arial, sans-serif }
p { font-size: 14pt }
.special { color: blue }
</style>
</head>
<h1 class = "special">Deitel & Associates, Inc.</h1>
<p>Deitel & Associates, Inc. ..
programming, and Object Technology.</p>
<h1>Clients</h1>
<p class = "special"> The company's clients include
many <em>Fortune 1000 companies</em>,
government agencies, branches ….
and World Wide Web courses.</p>
8
this begins the style sheet section
Cssfounder.com