CSS background color,
text
alignment and fonts
HTML is an authoring language which - among other things
- includes several tags that instruct a browser how to display text.
CSS is, among other things, a means of further telling a browser how to style text within those tags. CSS provides parameters for
specifying quite a number of elements of style including, colour, size, and positioning.
Starting simply, consider a basic web page containing some text and pictures on a plain background. The colour of the background can be
left to the browser to choose, or can be suggested by the HTML. Note the word suggested, because as with all HTML commands the browser may
be instructed to ignore what the HTML says and do what the reader wants.
The following simple example uses a document-level style sheet to suggest a white coloured background to be displayed for all text
contained within the <body> and </body> tag pair, which of course is
all the text on the current page.
<html>
<head>
<title></title>
<style type="text/css">
<!--
BODY
{
background : white;
}
-->
</style>
</head>
<body>
Some text
</body>
</html>
But CSS allows you to define the style for all tags (and your own, but that's for later). So this example snippet not only defines the text
within the <body></body> tags to be displayed with a white
background, but further suggests that text within <h1></h1> tags should be
displayed with a red coloured background
<style type="text/css">
<!--
BODY
{
background : white;
}
H1
{
background : red;
}
-->
</style>
Another popular and useful style is the text alignment style, known as 'text-align' which can be used to center text. The following example
further centers all "h1" headings within the page.
<style type="text/css">
<!--
H1
{
background : red;
text-align: center;
}
-->
</style>
And so to fonts. CSS defines several generic names for fonts:
"Proportional", "Serif", "Sans-serif",
"Cursive", "Fantasy", "Monospace"
These can be defined in some browsers, but currently not very many, though the popular browsers do
recognize these names. Or you can specify an actual font name, or a series of font names. However, if
the browser cannot access a specified font it will fall back to choosing its own. To specify a font for a tag you use the
"font-family" style parameter, for example:
body {
font-family : "Gill Sans Ultra Bold", serif;
}
In this example, the browser will attempt to display all text within the <body></body> tags in the "Gill Sans Ultra Bold" font.
If that font is not installed on the computer, then the browser will fallback to it's generic "serif" font, whatever that may be. You can specify
many font names in the font-family style, for example:
body {
font-family : "Gill Sans Ultra Bold", "Cooper Black",
"Arial",
serif;
}
Matt Probert
|
