Chapter: Web or internet Programming : Dynamic HTML
Cascading style sheets(CSS)
Cascading
style sheets
• Cascading
Style Sheets (CSS) allows document authors to specify the presentation of
elements on a Web page (spacing, margins, etc.) separately from the structure
of the document (section headers, body text, links, etc.).
• This
separation of structure from presentation simplifies maintaining and modifying
a document‘s layout.
Inline Styles
• Inline
styles that declare an individual element‘s format using attribute style.
Inline styles to p elements to alter
their font size and color.
<head>
<title>Inline
Styles</title>
</head>
<body>
<p>This
text does not have any style applied to it.</p>
<!--style
attribute allows declaring inline styles. Separate multiple styles with
semicolon-- > <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>
</html>
• Attribute
style specifies the style for an element. Each CSS property (the font-size property in this case) is
followed by a colon and a value. We declare the p element to have 20-point text size.
• Element
em to ―emphasize‖ text, which most browsers do by making the font italic. The
two properties, font-size and color
are separated by a semicolon. Set the text‘s color to blue, using the hexadecimal code #0000ff.Color names may be used in place of hexadecimal codes.
Embedded Style Sheets
• Embedded
style sheets enable a Web-page author to embed an entire CSS document in an
XHTML
document‘s head section.
<head>
<title>Style
Sheets</title>
<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>
<body>
<h1
class = "special">Deitel & Associates, Inc.</h1>
<p>Deitel
& Associates, Inc. is an internationally recognized corporate training and publishing
organization specializing in programming languages, Internet/World Wide Web
technology and object technology education. Deitel & Associates, Inc. is a
member of the World Wide
Web
Consortium. The company provides courses on Java, C++, Visual Basic, C,
Internet and World Wide Web 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 of the military and
business organizations. Through its publishing partnership with Prentice Hall,
Deitel & Associates, Inc. publishes leading-edge programming textbooks,
professional books, interactive CD-ROM-based multimedia Cyber Classrooms,
satellite courses and World Wide Web courses.</p>
</body>
</html>
Related Topics