The Getting Down Series which I started 3 years ago with Getting down with HTML is here to get you into a topic quickly and without having to go through all the work of a full book. With this book I am going to start a transisition from straight HTML to DocBook Sources.
Hopefully we'll keep creating tutorials and books that are easy to read and understand for all ages.
Cascading Style Sheets (CSS) is a pair of World Wide Web Consortium standards dating from December 1996 for CSS1 and May 1998 for CSS2. CSS3 is under development. CSS development can be followed with the World Wide Web Consortium
Example 1-1. Introductory Example
<style type="text/css">
body {
background-color= rgb(255,255,255);
color: #000000;
}
a {
text-decoration: underline;
color: #0000FF;
}
</style>
Example 1 is a simple CSS block defining the background color and text color for all text. Then it defines a change to the text color for anything in a tags and underlines anything in an a tag. There are 2 ways of defining colors presented as well. The rgb style and the double hex style. In rgb style the 3 comma seperated fields are intensities of red, green, and blue color between 0 and 255. The double hex style is 2 hex digits of red, green, and blue with values between 00 and FF with a # in front.
example: hex: #FFFFFF rgb: rgb(0,0,0)
Example 2-1. More of an Introductory example
<style type="text/css">
body {
background-color= rgb(255,255,255);
color: #000000;
}
a {
text-decoration: underline;
color: #0000FF;
}
<!-- -------------------------------------------------------------- -->
td.menu {
height: "90%";
background-color: #DDDDDD;
color: #FFCCCC;
width: 300px;
}
td.head {
height: 100px;
background-image: url("http://www.ibiblio.org/images/logo.jpg")
color: #CCCCCC;
width: "100%";
}
</style>
The Example above introduces a pair of definitions relating to
<td>tags. The .head and .menu are classes of td. That means that to use that definition you need to add to your tag class="head" or class="menu". An example of classes would be
<td class="head">.
In the example above there are height and width attributes to the td tags. The heights and widths can be specified in either percentages of the object they are contained in (like a td is contained in the table that it is defined as a part of). They can also be defined as a number of pixels or millimeters. Pixels are related to the monitor resolution, see desktop properties or you're X config, and millimeters are a standard measurement regardless of configuration.
xx-small is the smallest font size. (equivelant to font size 1)
x-small is the second smallest font size. (equivelant to font size 2)
small is the third smallest font size and is 1 smaller than normal font size. (equivelant to font size 3)
medium is the normal font size. (equivelant to font size 4)
large is the third from largest font size. (equivelant to font size 5)
x-large is one from the largest font size. (equivelant to font size 6)
xx-large is the largest font size. (equivelant to font size 7)
In the example above there is a url associated with the menu class of td. It will set the background image of the menu td to whatever is at the url http://www.ibiblio.org/images/logo.jpg. A URL can also be relative as in index.html.
Example 3-1. And Now for Something New
<style type="text/css">
body {
color: #000000;
background-color: #FFFFFF;
font-family: Sans-Serif;
}
a {
color: #0000FF;
background-color: #DDDDDD;
text-decoration: underline;
}
a:hover {
font-weight: bold;
}
:link {
text-decoration: underline;
}
:visited {
text-decoration: blink;
}
input:focus {
background-color: #DDDDDD;
color: #000000;
}
#pink {
color #FFCCCC;
background-color: #FF0000;
}
p {
font-size: 12px;
text-align: left;
}
</style>
Fonts are done through font- attributes and text- attributes. The five font and text attributes you need to know are font-family, text-decoration, font-weight, font-size, and text-align.
Font Families are a set of 5 different fonts that the World Wide Web Consortium has required by standard for browsers to have. They are serif, sans-serif, cursive, and fantasy for variable width fonts. For fixed width font there is monospace. You may also define a specific font family as long as there is a generic family defined afterward.
Text Decoration is where lines and blinks are defined. The decorations are overline which is a line over the text in question, underline which is a line under the text in question, line-through which puts a line directly through the text in question, and blink which makes the text blink. Note: Browsers MAY ignore the blink tag and still be conformant to CSS.
The Font Weight is where you define bold. The values range from 100 to 900 where 900 is most bold and 100 is least, or you can say none or bold and the browser will display it properly.
Font Size sets the font size. There are 2 ways to set the size: Pixels or Points (px and pt). Or you can use a system similar to
<font size=(1-7)>in HTML. You use xx-small, x-small, small, medium, large, x-large, xx-large instead of 1 through 7.
Text align is easy. You have left, right, justify, and center. Justify MAY be either left or right in CSS1 depending on the language (english is left).
IDs are a lot like classes except that an ID is used once and actually identifies the tag. They have a # infront of the id name. A good example would be td#menu. That would be the menu td, and because we used an ID it knows that the attributes are for that td only.
Psuedo-Classes are Classes that deal with runtime events. They use a : instead of a . and have only five possible classes. Those are :link, :active, :visited, :hover, and :focus. The first four have to do with Hyperlinks, the first three are the same as link, alink, and vlink in the body tag of an HTML document. The fourth is similar to a javascript mouseover except that it is cleaner. The fifth is to change the properties of a text field when there is keyboard focus on it.
Psuedo-Elements are addressing content and look at runtime blocks of html. The two useful ones are :first-letter and :first-line. :first-letter renders that first letter in the way defined and :first-line does it for the first line of the element.