External Cascading Style Sheets (CSS) can be linked to HTML
documents from external ASCII text files, they can be internal
(defined in a <style>...</style> element; also called
embedded style sheets), or inline (defined as a style
attribute within an element opening tag).
Assume we have a file (ASCII text file) named my_style.css
with the following contents:
/* my_style.css */
body {
color: #339999;
background-color: #FFFFCC;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
Then in one or more HTML documents where we wanted to apply these styles we would add the following in the head element:
<html> <head> <title>Linking External CSS</title> <link rel="stylesheet" type="text/css" href="my_style.css" /> </head> <body> <!-- page content goes here --> </body> </html>
Do not use any HTML code in the external style sheet, and do not use HTML comment delimiters. A common mistake is including the HTML style open and close tags, usually after a cut and paste operation from an internal style sheet.
That same style sheet could be defined within a style element
as follows:
<html>
<head>
<title>Linking External CSS</title>
<style type="text/css">
body {
color: #339999;
background-color: #FFFFCC;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<!-- page content goes here -->
</body>
</html>
Style sheets can be defined "in line" as an element attribute. This is useful to see the effects of a specific style sheet during development.
A paragraph with bold and italic sans-serif (Arial) font.
<html> <head> <title>In Line CSS</title> </head> <body> <p style="font-style: italic; font-weight: bold; font-family: Arial, sans-serif;"> A paragraph with bold and italic sans-serif (Arial) font. </p> </body> </html>
Note that the format of the style declaration is exactly the same as external and internal/embedded style sheets excluding the selector and curly brackets.
A Cascading Style Sheet consists of one or more rules. Each rule consists of a selector and a curly bracket delimited declaration block. The declaration block consists of one or more declarations, and each declaration has a property followed by a colon and a value. Declarations are terminated by a semi-colon. More than one declaration may be on the same line, although it is common practice to place each declaration on its own line, using consist ant indentation for readability. A comma separated list of more than one selector can be applied to a single rule.
/* rule example 1 */
body { /* selector = "body"; 3 declarations */
color: #339999; /* property = "color" value = "#339999" */
background-color: #FFFFCC; /* property: value pairs separated with */
font-family: Arial, sans-serif; /* colons, terminated with semi-colons */
}
/* rule example 2 */
h1, h2, h3 { /* comma delimited list of selectors */
text-align: center;
}
/* rule example 3 */
#footer { /* "footer" is an ID; HTML example: */
text-align: right; /* <div id="footer"> */
font-style: italic; /* footer content</div> */
}
/* rule example 4 */
.listing { /* "listing" is a CLASS; HTML example: */
font-family: Courier, monospace; /* <div class="listing"> */
background-color: #EEEEEE; /* lines of sample */
margin-left: 10%; /* code follow */
margin-right: 10%; /* </div> */
}
A good Cascading Style Sheet reference is the W3 Schools CSS2 Reference: http://www.w3schools.com/css/css_reference.asp
Here are some commonly used properties with example values. Most values are a single word and therefore do not need to be quoted. If, however, a value is more than one word with spaces (common in font names), then the value must be quoted. Old HTML style or deprecated HTML has a light gray background.
The center element and the align attribute
have been deprecated
Center content in one or more elements such as headings: declare a rule for those elements as in rule example 2 above. If one specific element needs centering, or one section of the page (such
as a quotation, picture, etc.), use a CSS ID selector and label the
element or enclose the section in a labeled If several elements or sections need centering (such as 2 or more pictures) use a CSS CLASS selector and label the elements. |
|
| HTML |
<p align="center"><center><p> . . . </p></center> |
|---|---|
| CSS |
#mypic { /* id selector uses '#' (pound, or "hash" symbol) */
text-align: center;
font-weight: bold;
}
|
| HTML |
<p id="mypic"> |
| CSS |
.pictures { /* class selector uses '.' (dot, or period character) */
text-align: center;
font-weight: bold;
font-style: italic;
}
|
| HTML |
<p class="pictures"> |
The font element and the text and
bgcolor attributes have been deprecated.
Use the CSS To change the appearance of content without starting a new block
element (such as a div, paragraph, list, etc) use the |
|
| HTML |
<body text="#000000" bgcolor="#FFFFFF" link="#003377" vlink="#663366"></body>
|
| CSS |
body {
background-color: #FFFFFF;
color: #000000;
}
a:link {
background-color: #FFFFFF;
color: #003377;
}
a:visited {
background-color: #FFFFFF;
color: #663366;
}
|
| HTML |
The <font color="red">Mid-term Exam</font>
will cover the first 5 weeks . . .
|
| CSS |
#mid-term {
color: red;
}
|
| HTML |
The <span id="mid-term">Mid-term Exam</span>
will cover the first 5 weeks . . .
|
|
When you specify a list of font names the browser will try to use the
first font it finds installed on the system. You should always include a
generic font name in case the browser cannot find any of the named fonts
in the list.
Generic font family keywords are: |
|
| CSS |
body {
font-family: "MS Serif", "Times New Roman", serif;
}
|
Listed below are some common (and a few not so common) CSS attributes that should solve most text formatting tasks for basic Web pages. Consult a reference for the complete list.
| HTML | CSS |
|---|---|
| <b> . . . </b> | font-weight: bold; |
| <i> . . . </i> | font-style: italic; |
| <u> . . . </u> | text-decoration: underline; |
| <strike> . . . </strike> | text-decoration: line-through; |
| text-decoration: overline; | |
| <{element_tag} align="value"> . . .</{element_tag}> |
text-align: right; /* other values: center left justify */ |
| <p> . . .</p> |
text-indent: 2em; |
| <body background="sand.gif"> . . . </body> |
body {background-image: url(sand.gif);} |
| <ul type="circle"> <ol type="a"> |
list-style-type: circle; /* must be applied to <li> */ list-type: lower-alpha; /* see additional notes below */ |
The last example in the table above shows how to use CSS to control the
style of lists. In HTML the list style is applied as an attribute of the
<ul> or <ol> tag. Using CSS the
list-style-type property is applied to the list elements themselves
(<li> tags). If you define a rule for all list elements then of
course all lists will have the same style. You may, however, only
want to change one ordered list to use lower-case letters, or perhaps Roman
Numerals. Also, you do not want to write a class attribute for each applicable
<li> tag like this: <li class="alpha-list">.
The solution is a contextual (also called descendant)
selector. Define a rule with a class selector (.alpha-list in the
example), a space, and the element that the rule will be applied to. Note that
there is no comma between the class selector and the element name. The
example says to apply the rule to only those list items that occur in the
context of (or, put another way, are descendant of) a parent element with the
class name of alpha-list.
.alpha-list li {
list-style-type: lower-alpha;
}
Then in the applicable list where you want lower-case letters as the list style write this HTML:
<ol class="alpha-list"> <li>First item (a)</li> <li>Second item (b)</li> <li>Third item (c)</li> </ol>
The resulting list should look like this: