|
Cascading Style Sheets
Inline Style Sheet declared in head tags. ":"
denotes a pseudoclass, where you don't explicitly have to call an
instance. "." dot operator denotes a user-defined
class.
<head>
<title>More Styles</title>
<style type = "text/css">
a.nodec { text-decoration: none }
a:hover { text-decoration: underline;
color: red;
background-color: #ccffcc }
li em { color: red;
font-weight: bold }
ul { margin-left: 75px }
ul ul { text-decoration: underline;
margin-left: 15px }
</style>
</head>
Example 2: (Generates Background Image and Keeps it in bottom left
corner of page)
<head>
<title>Background Images</title>
<style type = "text/css">
body { background-image: url(logo.gif);
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed; }
p { font-size: 18pt;
color: #aa5588;
text-indent: 1em;
font-family: arial, sans-serif; }
.dark { font-weight: bold; }
</style>
</head>
Example 3: (Creating colored borders around text)
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Borders</title>
<style type = "text/css">
body { background-color: #ccffcc }
div { text-align: center;
margin-bottom: 1em;
padding: .5em }
.thick { border-width: thick }
.medium { border-width: medium }
.thin { border-width: thin }
.groove { border-style: groove }
.inset { border-style: inset }
.outset { border-style: outset }
.red { border-color: red }
.blue { border-color: blue }
</style>
</head>
<body>
<div class = "thick groove">This text has a border</div>
<div class = "medium groove">This text has a border</div>
<div class = "thin groove">This text has a border</div>
<p class = "thin red inset">A thin red line...</p>
<p class = "medium blue outset">
And a thicker blue line</p>
</body>
</html>
Example 3:
<html>
<head>
<title>Borders</title>
<style type = "text/css">
body { background-color: #ccffcc }
div { text-align: center;
margin-bottom: .3em;
width: 50%;
position: relative;
left: 25%;
padding: .3em }
</style>
</head>
<body>
<div style = "border-style: solid">Solid border</div>
<div style = "border-style: double">Double border</div>
<div style = "border-style: groove">Groove border</div>
<div style = "border-style: ridge">Ridge border</div>
<div style = "border-style: inset">Inset border</div>
<div style = "border-style: outset">Outset border</div>
</body>
</html>
Example 4 (Floating text left and right)
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Flowing Text Around Floating Elements</title>
<style type = "text/css">
div { background-color: #ffccff;
margin-bottom: .5em;
font-size: 1.5em;
width: 50% }
p { text-align: justify; }
</style>
</head>
<body>
<div style = "text-align: center">
Deitel & Associates, Inc.</div>
<div style = "float: right; margin: .5em;
text-align: right">
Corporate Training and Publishing</div>
<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>
<div style = "float: right; padding: .5em;
text-align: right">
Oh no, oh no, oh no.....</div>
<p>The company's clients include many Fortune 1000
companies, 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.<span style = "clear: right"> Here is some
unflowing text. Here is some unflowing text.</span></p>
</body>
</html>
DHTML 1 DHTML
2
Home
DHTML 4
Example
|
Contact
