Apply Basic CSS to a Web Page
First teps in Formatting HTML Pages Using a Cascading Style Sheet
The basics of using an external Cascading Style Sheet (CSS) to format text on an HTML web page.
As the Hyper Text Markup Language (HTML) evolved, browser capabilities and interpretations altered to use the enhancements. With variations in HTML usage in older web pages, browsers need to know the version of HTML the page is using. The following statement contains the version of HTML and it is the first line in an HTML page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Further down the page, in the area bounded by the <head>..</head > tags, is the next statement for implementing an external CSS.
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
This tells the browser to link to an external file, and that it is a style sheet and a CSS file in text format. The final part of the statement is name of the file containing the CSS. This example is called stylesheet, but it can be any valid file name with the .css extension. Putting the external CSS is in the same directory as the rest of the web pages enables relative addressing of the stylesheet.
Applying formatting to a text statement in the web page is a simple two-stage operation. In the page, standard paragraph marks <p> in the <body> section enclose the text as in the complete page code below:
Web Page Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS example</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<p> text to be formatted </p>
<p class = “caption”> different text style for picture caption </p>
</body>
</html>
Then in the linked style sheet, the attributes of the “p” tag are declared.
Contents of style sheet
p {
color: blue;
font-size: large;
font-style: normal;
font-weight: bold;
}
p.caption { color: blue; font-size: small; font-style: italic; font-weight: bold; }
In this case the name of the tag or selector is followed by a number of formatting attributes enclosed in French braces “{ }”. One of the handy things about HTML formatting is that the browser applies the default formatting unless there a correct instructions to do otherwise.
This means that not all possible attributes are declared; only those needed are specified. In this example only four of a much greater number of attributes are declared. The format is the attribute name, then a colon to separate it from the property value and completed by a semi-colon. The layout in the first example, where property is shown on a new line is, only for ease of reading for the author. The second declaration is all on the one line, and works the same in the browser but the first layout may be easier to read for humans.
Every time you use either of the tags they will apply the properties declared in the stylesheet.
Using a standard style for a particular function throughout a site is something readers appreciate as they encounter familiar styles on different pages.
Using meaningful names for each style development and maintenance is easier. When designing a page elements have a function to perform so applying a style with name that reflects its function it makes it easier to see how the page as whole is working. Therefore, if the text has the style with a caption tag it is obvious that this text is a picture caption.
To change the appearance of the standard text or the caption text the author only one declaration in the style sheet is edited and all appearances of that style will be changed. For example, to change the color of all caption text in a large document only the one entry in the style sheet needs changing.
