HTML style code in Web Pages
Many HTML Elements (Tags) accept the style attribute. HTML style code has a large number of rules that can be assigned to it. Style in Web Pages is like paint for a painting, or EQ for a recording. It colors and shapes the output. And just like other mediums, style must be used wisely. In designing web pages, it’s an art form.
Common Style Rules
The rules of the style attribute are also called attributes. They are constructed of a handle and value pair separated by a colon. A simple example is color:black.
A complete example of how style is used is <div style=”color:black”>My Black Text</div>. This will make all text within the Div Tag the color black. Additional pairs are separated by a semi-colon. The last or only pair does not need the semi-colon.
Some commonly used style rules are:
- background
- color
- font
- margin
- padding
- width
- height
- text-align
- border
There are several variations on these base rules for the HTML style code. For example font-size. This provides a large pallet to choose from when designing your web interface.
Tips and Optimization Tricks.
Styling HTML Tags is a powerful way of managing the layout of a web page. One of the benefits is its ability to affect individual tags or groups of tags dependent on need. It is common to set font, background and other rules that applies to the entire page in the body, table, div and other main elements. Main elements are Tags where all other content is enclosed. Styling can also be used on individual Tags for more presentation options. For example changing the color of a link, or sizing a div tag.
Using rules mostly in main elements will reduce the size of the page dramatically. Constantly repeating the same code that can be written once is not only a time saver but helps trim the fat.
Another excellent method of optimizing a web page using style is by creating a very small image. It could be a solid color, a gradient, or a pattern, less than five pixels wide and fifteen pixels in length. By repeating this image over a defined area by using the background style rule will not only reduce the weight of the page, but the speed at which it loads. On top of that, it’s very easy to maintain an image of that size.
Cascading Style Sheet
The HTML style attribute holds a lot of information. Sometimes most style information is written in the head of a web page. Specifically it is held between the <head></head> tags. And between the <style></style> tags. An example of this is:
<style type=“text/css”>
<!–
#body {
color: #666666;
font-size: 15px;
}
–>
</style>
</head><body></body></html>
Alternatively there is a more efficient way to manage virtually all the style rules in a Website. By linking to an external file that holds all the information. This block of code looks like this:
<link rel=“stylesheet” type=“text/css” href=“styles.css” media=“all” />
Where the value of the href attribute is a URL, or file name. And it’s placed in between the <head></head> tags. The rules are written pretty much like the example above, but without the style tags in a separate file with an extension of .css. This file can be edited with a normal notepad program.
To Recap
Style for Web Sites is a very simple yet powerful tool. It can be used to add beauty to a web site, or to greatly optimize the speed at which it’s delivered to the user. It also can vastly increase the management of the design layout.
One very important thing to keep in mind, style rules written directly in the body of the page takes precedence over rules written in the head of the page or a separate style sheet. Why is this important? Well, in more advance web programming involving php and javascript, it might be necessary to style tags dynamically. More on this later.
Comments are closed.