CSS
Creating Style Classes
If you want to apply the same style to multiple parts of your HTML document, it'd be rather tedious to repeat it all over the place, as in the following HTML fragment:
<p style="font-size: 20pt; color: blue; font-family: sans-serif">
Paragraph 1 Text.
</p>
<p style="font-size: 20pt; color: blue; font-family: sans-serif">
Paragraph 2 Text.
</p>
<p style="font-size: 20pt; color: blue; font-family: sans-serif">
Paragraph 3 Text.
</p>
CSS enables you to create classes that consist of a set of style rules, defined in a <style> tag within the HTML <head> section. You can then associate these styles with HTML tags by setting the class attribute as shown in the following example:
<html>
<head>
<style type="text/css">
.bigblue {
font-size: 20pt;
font-family: sans-serif;
color: blue;
}
</style>
</head>
<body>
<p class="bigblue">
Paragraph 1 Text.
</p>
<p class="bigblue">
Paragraph 2 Text.
</p>
<p class="bigblue">
Paragraph 3 Text.
</p>
</body>
</html>
The <head> tag, which precedes the HTML <body>, is a special area of an HTML
document called the HTML head section.
It contains tags that describe the HTML document (so-called meta information)
or provide other information required for
the document, such as the CSS class definitions in the previous example.
 |
To create a simple HTML page, follow these steps:
-
First, you need to set up folders in Tomcat's webapps directory to create a new JSP application. For this example, call it PhoneBook and create a folder inside it called WEB-INF.
As you may remember from the first chapter, this folder must exist for Tomcat to recognize your files as a new Web application.
-
Save the following code as phoneNumbers.html in the PhoneBook folder:
<html>
<head>
<style type="text/css">
BODY {
font-family: sans-serif;
font-size: 10pt;
background-color: navy;
color: white;
}
TABLE {
border: 1px solid black;
font-family: sans-serif;
font-size: 10pt;
}
.row1 {
background-color: gray;
color: black;
}
.row2 {
background-color: silver;
color: black;
}
</style>
</head>
<body>
These are some of my friends.
<p />
<table>
<tr>
<th>
Name
</th>
<th>
Phone
</th>
</tr>
<tr class="row1">
<td>
Amy
</td>
<td>
415-555-1212
</td>
</tr>
<tr class="row2">
<td>
Geoff
</td>
<td>
415-555-1213
</td>
</tr>
</table>
</body>
</html> -
Start Tomcat, and view the file by navigating to the following URL in your browser:
http://localhost:8080/PhoneBook/phoneNumbers.html
If you've entered everything correctly, you should see a page similar to Figure 2-3.
How It Works
This HTML file is a good example of the tags introduced earlier. You added a few new twists to the CSS in the <style> tag, such as the ability to redefine a tag's default style (the BODY and TABLE style names) and the border attribute.
It's important that you save the HTML file with a name that ends in .html or .htm, as you've done, so that the Web server (in this case, Tomcat) knows that the file contains HTML markup.
|
Specifying a Style for a Single Element
The previous code uses the .stylename form to apply the style to all elements with that class. Sometimes, however, you'll want to be able to specify styles for individual elements, some of which may have identical names. For example, you may want to have a <table> element of class red and a <td> element of class red, each of which with a different property you want to alter.
In this case, you can use the tag.stylename form:
TABLE.red {
border: 1px solid red;
}
TD.red {
color: red;
}
These settings will override any general CSS settings for <table> or <td>. Therefore, you can think of CSS as hierarchical because you can specify a toplevel setting for all elements of a certain type and then override these as you get more specific needs. So, in these examples, a <table> element of class red will have all the attributes from the TABLE entry, except border, which is specified with TABLE.red.
Using the id Attribute
The id attribute is common to all HTML elements and is used to uniquely identify an element in a document. As such, you can use it to uniquely style an element in a document. Suppose you have the following HTML:
<tr id="grade"/>
You could style it using the following syntax:
#final_marks {
background-color: red;
}
Styling an Application
So far you've been adding style to a single document, but most Web sites consist of more than one document. If you wanted consistency of style across all the documents, you'd have to copy and paste all the style information from phoneNumbers.html into all the other documents. This is a time-consuming and error-prone process.
Luckily, CSS has an answer to this problem: You can move all your style information into an external file that can be shared by all pages in your Web site. For this you have to create a style sheet with the .css extension. This file contains the contents of the <style> element that you would have used across your Web site.
Open phoneNumbers.html, and copy the contents of the <style> element into a new file called format.css, which should be in the PhoneBook directory as follows:
BODY {
font-family: sans-serif;
font-size: 10pt;
background-color: navy;
color: white;
}
TABLE {
border: 1px solid black;
font-family: sans-serif;
font-size: 10pt;
}
.row1 {
background-color: gray;
color: black;
}
.row2 {
background-color: silver;
color: black;
}
Delete the <style> element, and replace it with the following <link> element:
<head>
<link rel="stylesheet" type="text/css" href="format.css" />
</head>
View phoneNumbers.html again. There should be no difference in the output, but it's now much easier for you to reuse style information.
Related Items
Comments
Leave a comment
Or, take a look at Archives and Categories
