Define headings and several instances with CSS

Css

• Original: What is the best Way to Mark up the Title of a Document?
• Description: This is a chapter in the book "Web Standards solutions:the Markup and Style Handbook". ISBN: isbn:1590593812. We will continue to translate the valuable chapters in this book.
• Original Author: Dan Cederholm
• Translation: Ahom

A document title, what is the best way to define it? To answer this question, imagine that we want to define the title of the article on a page, and we usually have three ways to achieve this simple goal:

Method One: Does it make sense?

<span class= "heading" > article title </span>

Although <span> is a handy label in some cases, it does not convey the full meaning of the title. One advantage of adopting this approach is that we can attach a CSS rule to it, assign it a heading class, and make its text appear as headings.

. Heading {
font-size:24px;
Font-weight:bold;
Color:blue;
}

OK, now all the headings are marked with heading class in bold font size and blue. That's great! But is that the right thing to do? What if someone is watching with a browser that doesn't support CSS?

For example, what happens if we set the rules for this external style sheet without being supported by the older version of the browser? Or do people with visual impairments use screen readers to read this page? What a visitor sees (or hears) through these channels should be no different from the normal text on the page.

Although class= "heading" adds a bit of meaning to the label, <span> is still just a normal label that can be modified by the default style of most browsers.

The search engine retrieves the page by skipping the <span> tag, as if it doesn't exist, without giving a little extra attention to the keywords it might contain. In the back we will talk more about the relationship between search engine and title.

Finally, because the <span> tag is an inline element, we may need to nest it in an extra block level element, such as a <p> tag or <div> tag, so that it can form a separate line, which will further confuse your label with unnecessary code. These additional tags are necessary to enable browsers that do not support CSS to display text that is not different.

Method two:<p> and <b> combination

<p><b> article title </b></p>

Using a paragraph label will give us a block-level display,<b> the text into bold. But when you mark an important title in this way, we face the same meaningless result.

Unlike the method a,<b> tags can display text as bold in a visual browser-even in browsers that do not support CSS. But like <span> tags, search engines do not give a higher priority because there are some things that are not bold in the paragraph.

Difficult to design style

With the combination of common <p> and <b>, there is another drawback--it is not possible to design this title differently from other paragraphs. We may want to use a special style to highlight the title to make the page content clearer and more structured, but this method only makes it bold.

Method Three: Style plus essence

Well, what a good title definition. Most web designers are familiar with it. In fact, the proper use of them,

It's also a smart way to define, and you'll find it simple. No longer need additional tags, you can say, this is only a little bit less than the other two methods, which can be negligible, but saving a little.

Easy customization Style

Because we use

More importantly, even without the style, a title tag can clearly indicate a title! The Visual browser displays

Screen readers, PDAs, mobile phones, and both visual and non-visual browsers will understand that when you hit a title tag, the right thing to do is to treat it more seriously than the plain text on the page. With <span> tags, browsers that do not support CSS do not treat it specifically.

Nasty default Style

In the past, because the default browser defaults were ugly, designers might avoid using headline tags altogether. Alternatively, avoid

However, it is important to emphasize that we can simply use CSS to change the title tag--for example, a <;h1> is not necessarily a huge scale that covers most of the screen. In the end, I'll show you how easy it is to use CSS to style title tags, and hopefully it will help you reduce your fear.

For search engine Friendly

This is a huge benefit. Search engines like title tags. On the other hand, a <span> label or plain bold paragraph label means a little bit more. The proper use of

Search engine robots will give special attention to title tags--this is where you might put some keywords. Just like retrieving <title> and <meta>, they look up the title tag below the page. If you do not use these tags, the keywords contained in them will not be considered valuable and thus ignored.

So with a little effort, you can increase the likelihood that people will find your site based on page content. Sounds good, doesn't it?

About the order of headings

In the example, this particular title is the most important part of the page, because it is the title of the document. Therefore, we use the most important title tag,

The title we're going to take (if not another

As mentioned earlier, the designer may use

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

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.