Can we format/style the document using html?
This is a short introduction to styling and cascading.
Please feel free to compare page source with the screen.
For more information, please refer to Sebesta book.
CSS (Cascading Style Sheet) is a style sheet language that let you style the html elements on your web page. It is embedded inside html but it is not html itself.
Define how display html elements
Can we format/style the document using html?
style="property_1:value_1; property_2:value_2; ...;
property_n:value_n;"
Example:
<h1 style="color:red; text-decoration: underline;">CSS Examples</h1>
...
<font size=-1; color=red>
Specify the style property in
the opening tag of the particular html element
</font>
<head>
...
<style>
rule list
</style>
...
</head>
.css.
Example:
432-style.css
.css file in the header of
the html document
<head>
...
<link rel="stylesheet" type="text/css"
href="http://www.cs.gmu.edu/~uprapham/classes/swe432/432-style.css" />
...
</head>
h1 {property-value list}
h2, h3 {property-value list}
#intro {
color: green;
font-size: 0.8em;
}
Usage:
<p id="intro">
This is a short introduction to writing CSS.
Please feel free to compare page source with the screen.
</p>
p.normal {property-value list}
p.warning {property-value list}
Usage:
<p class="normal">
A paragraph of text that we want to be presented
in normal presentation style
</p>
<p class="warning">
A paragraph of text that is a warning to the reader,
which should be presented in an especially noticeable style
</p>
.sale {property-value list}
Usage:
<h3 class="sale"> Weekend Sale </h3>
...
<p class="sale">
...
</p>
a:link { /* unvisited link */
color: red; /* text color */
}
a:visited { /* visited link */
color: blue;
}
a:hover { /* mouse over link */
color: green;
}
a:active { /* current link */
color: purple;
}
a:focus { /* focused link */
color: purple;
}
/* group selectors */
a:hover, a:active, a:focus {
background-color: yellow;
}
color: red; /* specified by name */
color: #ff0000; /* specified by hexadecimal value */
color: rgb(255, 0, 0); /* specified
Usage:
body {
color: red;
}
background-color: black;
background-color: #000000;
background-color: rgb(0, 0, 0);
Usage:
body {
background-color: yellow;
}
table {
background-color:#000080; /* navy */
}
font-family: Arial, Helvetica, Futura
Usage:
body {
font-family: Arial, sans-serif;
}
font-size: 14px; /* absolute size: pixels */
font-size: 1.2em; /* relative size: 1.2 times or 120% of the current font size in pixels */
font-size: 75%; /* relative size: 75% of the current font size in pixels */
font-size: larger; /* relative size: adjust the font size relative to the font size of the parent element */
font-style: italic;
font-weight: bold;
Usage:
h2 {
font-family: 'Time New Roman';
font-size: 2em;
font-style: italic;
font-weight: bold;
}
font: property-value-list
Usage:
h2 {
font: 'Time New Roman' 2em italic bold;
}
text-decoration: line-through;
text-decoration: overline;
text-decoration: underline;
text-decoration: none;
Usage:
p.delete {
text-decoration: line-through;
}
p.cap {
text-decoration: overline;
}
p.attention {
text-decoration: underline;
}
p.indent {
text-indent: 2em;
}
...
<p class="indent">
A homework exercise is not only an important contributor
to what you learn in a class, but is often an important
part of your grade as well. From a student's point of view,
homework is usually the first time the information
from the course is used, and thus is a very valuable
early feedback mechanism that helps the student
prepare for exams.
</p>
text-align: left;
text-align: center;
text-align: right;
text-align: justify;
Usage:
p {
text-align: right;
}
float: left;
float: right;
float: none;
Usage:
img {
float: right;
}
<style type="text/css">
.spanred {font-size: 1.5em;
color: red;
font-weight: bold;}
</style>
...
<p>
Homework is due <span class="spanred">before</span> class.
</p>
<style type="text/css">
.primary {font-size: 1.5em;
color: purple;
font-weight: bold;}
</style>
..
<p>This is some text.</p>
<div class=primary">
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
<p>This is some text.</p>
This is some text.
This is some text in a div element.
This is some text.
/* cstyle.css – an external style sheet for use with cascade.html */
p {font-size: 0.8em; }
<!doctype html>
<!-- cascade.html -->
<html lang =“en”>
<head>
<title> Style sheet levels </title>
...
<link rel="stylesheet" type="text/css"
href="cstyle.css" />
<style type="text/css">
p.docstyle { font-size: 1.2em; }
</style>
</head>
<body>
<p>
Now is the time
</p>
<p class="docstyle">
for all good men
</p>
<p class="docstyle" style="font-size:1.6em">
to come to the aid
</p>
</body>
</html>
#id1 #id2 h1 {color: red; }
#id1 #id2 h1 {color: green; } /* winner */
#id1 h1 {color: blue; }
| Assignment | Due |
|---|---|
| Assignment 5 | 09/30 |
| Assignment 6 | 10/09 |
"Advice on submitting homework," by Dr. Jeff Offutt Although the professor will usually make an honest attempt to grade the homework completely objectively and solely on the basis of content, unfortunately, most homeworks require some judgement to evaluate. This means that the presentation of your homework can have a significant impact on the amount of time needed to grae, and ultimately, on your grade that you receive. Thus it is to your advantage, as well as your professor's, for you to do your best to make your homework not only correct, but easy to grade.