Advertisement
Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

How to Make Cascading Style Sheet (CSS) Tags Redefine Styles

By default, all HTML tags in Cascading Style Sheets (CSS), are structurally preformatted to look a particular way and perform specific functions. Take the <h1> tag, for example. This tag is preformatted to be big, black, and bold, and it is intended to identify the main heading within the text, as opposed to the regular text, which is marked up with <p> tags in the content.

When you create a tag redefine style, you use the tag name as the selector name to overwrite the preformatted look of any existing HTML tag, such as <p> and <h1>.

The tag redefine style can be changed to anything you like, such as tailoring the default look of all content between <h1> tags to match the design and color scheme of your site, whether that be Impact, 28 pixels, bold, italic, and #000000 or Palatino Linotype, 32 pixels, bold, and #FF99FF:

h1 {
 font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
 font-size: 32px;
 font-weight: bold;
 color: #FF99FF;
}

Redefining existing tags is one of the best ways to globally style content on a site without having to selectively apply the styles here and there, as you must with custom class styles. In fact, to streamline the CSS process, most designers at a minimum begin each CSS file by creating tag redefine styles for the <body>, <p>, <h1>, <h2>, <ul>, <ol>, <li>, and <td> tags.

A tag redefine style for the <body> tag, for instance, can take on many of the attributes that were formerly applied to the opening <body> tag in HTML code, such as the default page margin spacing and page background color.

In addition to modifying a tag’s preformatted styles, tag redefine styles can also be used to add new styles to a particular tag. For example, all web pages, unless otherwise specified, have a default 9-pixel margin of space between the edge of the browser window and its contents.

image0.jpg

To remove or change this setting, the margin attribute may be redefined in the body tag. The illustration shows an example of how a style for the <body> tag might be redefined in the CSS, where the margin spacing is set to 0 on all four sides of the browser window, the background color of the page is set to black, and the font color for text within the body is set to white, as in the following style code:

body {
 margin: 0px;
 background-color: #000000;
 color: #ffffff;
}
blog comments powered by Disqus
Advertisement
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win an iPad Mini. Enter to win now!