Examples of CSS definition headings

A simple style

The easiest thing to do with CSS is to set a different font style for our headings. We can create a CSS rule that will apply the style to all

Let's get to know our own super Cool title:

Change colors, fonts, and dimensions with CSS:

H1 {
Font-family:arial, Sans-serif;
font-size:24px;
Color: #369;
}

All places found

Figure 2-2: The title after applying the style

Next, let's add a 1-point gray border below the text to enhance the sharpness (see Figure 2-3):

H1 {
Font-family:arial, Sans-serif;
font-size:24px;
Color: #369;
padding-bottom:4px;
border-bottom:1px solid #999;
}

Figure 2-3: A styled title with a shaded bottom border

We added a little filler to the bottom of the text to make the line a little looser. Because the title is a block-level element, its boundaries are not just text, but are flexible and consistent with the horizontal width of the page.

It is worth noting that this particular method of creating a border is a three-part statement: width, style, color. Try changing their values to see what the different effects will be.

Add background

The background can enhance the neat effect of the title. With a bit of filler and background color, we have a title that doesn't require a picture, but it looks like it. As follows:

H1 {
Font-family:arial, Sans-serif;
font-size:24px;
Color: #fff;
padding:4px;
Background-color: #696;
}

We change the text to white, add 4 dots around the filler, and then change the background to green. As shown in Figure 2-4, this can create a nice green bar to traverse the page and separate the paragraphs.

Figure 2-4: Title with background color and filler

Backgrounds and Borders

Add a narrow border below the title, and with a faint background color, you can create a three-dimensional effect without using a picture.

This CSS is similar to the previous example, just change a little color and add a 2-point border to the bottom.

H1 {
Font-family:arial, Sans-serif;
font-size:24px;
Color: #666;
padding:4px;
Background-color: #ddd;
border-bottom:2px solid #ccc;
}

Try to create different shades of the same color, resulting in a stereo effect as shown in Figure 2-5.

Figure 2-5: Title with background and lower border

Tiled background

When the background picture is joined together, it becomes more creative. With Photoshop or your favorite picture editor, create a 10*10 picture with a black border at the top and a gradient gray all the way down, as shown in Figure 2-6.

Figure 2-6:a Create a 10x10 point size picture in Photoshop (magnified)

We can use CSS to tile this tiny image at the bottom of the

H1 {
Font-family:arial, Sans-serif;
font-size:24px;
Color: #369;
padding-bottom:14px;
Background:url (10x10.gif) Repeat-x bottom;
}

Repeat-x notifies the browser to tile horizontally only (repeat-y will be tiled vertically). We set the picture in bottom and added extra padding-bottom, we can adjust the distance between the tiled picture and the above text. (See Figure 2-7)

Figure 2-7: a title with a tiled background

replaceable icons

As a substitute for hard coding, we can continue to use the CSS Background property to set the icon to the left of the text when handling decorative dots and icons in the line. This method can quickly change the entire site's look and feel--upgrade a CSS file to immediately change the entire site page.

The code is similar to the previous tile example:

H1 {
Font-family:arial, Sans-serif;
font-size:24px;
Color: #369;
padding-left:30px;
Background:url (icon.gif) no-repeat 0 50%;
}

Here, we leave extra space on the left (where we will display an icon), set to No-repeat, to have the background picture displayed only once (see Figure 2-8). We put it on the first 0 points and the 50% position from the top.

Figure 2-8:a: Title with icon

Easy upgrades

Imagine such a scenario instead of the previous example, where we have encoded the icons with tags in a site containing 100 documents. These icons match the entire site's problems. A few weeks later, the owner of the site decided to change the look and feel of this site. The new icon and the old icon have different specifications. Oh, my God! We will need to go back to all 100 documents and change each tag to update its image path. For a project's budget, this extra time will delay the original deadline. Time is money.

Keeping the unwanted, decorative pictures in the CSS file allows you to change the background picture in just a few minutes without needing a few more days and the entire site can be upgraded immediately. You should begin to understand the power of separating the markings of the structural and presentation layers.

The effect that can be transformed

The following tips can be useful in some situations. This is the way I used to use the standard refactoring Fast Company magazine (www.fastcompany.com) site in April 2003.

We used a small icon for the 13*13 point in most

Width= "height=" alt= "*"/> A-impression

There are two reasons why we encode this method. One reason is that there are all kinds of icons, depending on the subject of the title (a book in the Reading Club, quotation marks for daily quotes, etc.). The second reason is that at that time, we changed the color scheme for the entire site based on the current issue magazine cover. This replacement should be possible, of course, with CSS.

To have these icons transform colors along with other elements on the page, you don't need to create a new icon each time. We create an icon that uses only two colors: white and transparent (the transformed color will be revealed). Figure 2-9 shows an example of these icons, which are used in the daily quotes on the home page.

Figure 2-9:a Transparent icon with 13x13 point size (enlarged)

Through the transparent part of the icon, we again use the simple CSS Background property to set the color that you want it to penetrate. In addition, we want the color to appear only in the back of the icon, without affecting the text of the caption, so we use the following method to apply the rule only to the tag contained within the

H3 img {
Background: #696;
}

The preceding code determines that all tags contained within

Align label

To align the icon and text correctly (we want it to be centered vertically), we added the following CSS rules:

H3 img {
Background: #696;
Vertical-align:middle;
}

This ensures that the picture contained in the

Figure 2-10: Effect of transparent pictures applying a CSS background

This method also has another noteworthy place--not only can you use a separate CSS block to specify the background color to be displayed behind the picture, but also to specify inside the CSS code block.

For example, let's go back to the previous example of "replaceable icons" and add some background color:

H1 {
Font-family:arial, Sans-serif;
font-size:24px;
Color: #fff;
padding-left:30px;
Background: #696 URL (transparent_icon.gif) no-repeat 0 50%;
}

Transparent_icon.gif will be placed on top of the colors we specified above, using the same rules (see Figure 2-11)--Here is #696, a lovely green.

Figure 2-11: Title with background picture and color

This technique makes it particularly convenient to place small rounded corners or decorative pictures that are associated with the color of the page. These non-necessary images are completely included in the CSS file and will be easily changed if you want to upgrade in the future.