Your website should be updated often to keep it fresh. It wouldn't be much fun editing hundreds or thousands of pages by hand, just to change an element's color and then having to check everything to ensure that your changes are consistent. The process is even more complex if you would like a more significant update, like changing the position of components on your web pages.
Fortunately this maintenance work can be made a lot easier by following a few basic rules and efficiently using the tools and features that are accessible with current HTML specifications.
A powerful and essential tool for creating reusable visual styles is Cascading Style Sheets(CSS).
HTML was initially designed to deliver simple text based content and didn't provide a means to specify how particular items would appear in a browser. HTML left it to the individual browsers to present the output according to their own interpretation, based on the limitations of a users’ machine. Although you were able to change font styles, sizes, colors, and so on using HTML tags, this practice leads to verbose code and pages that are very cumbersome to restyle at a later date.
CSS gives web designers the power to create one set of styles in a single location and to apply those styles to all of the pages in your website. All of your website pages that are using a particular style sheet will be affected and will display the same fonts, colors, positioning and sizes for a specific CSS element, which makes it very easy to modify your website's visual elements and maintain a consistent feel.
Regardless of whether your website contains 10 or 10,000 pages, when you alter the styles in a style sheet being used by your site's pages, your changes are immediately reflected in all of your pages that use that style sheet.
This mechanism of re-usable style sheet rules is further enhanced by the use of master pages in an ASP.NET website. A single link to a single CSS file would enable you to have a great degree of granular control of the attributes of just about every element for every page in your website.
CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.
Style Sheets : Style Sheet Rules
By placing your style sheet rules in an external style sheet, you can link to this file from any web page where you would like those styles to be used.
To reference an external style sheet from a web page, you would place the following markup inside the page's head element:
<link rel="stylesheet" type="text/css" href="style.css" />
In the above example, style.css would be a text file containing your CSS rules. In the example below, these CSS rules would control the attributes of your web pages' background color, foreground color, margin, width, relative postion, h1, h2 tags and <a> or link elements:
body {
background-color: #F1F1F1;
color: #444444;
margin: 0 auto;
width: 980px;
position: relative;
}
h1 {
font-size: 130%;
letter-spacing: 1px;
}
h2 {
font-size: 110%;
}
a {
text-decoration: none;
color: #5C80B1;
}
To create your own CSS files. Check out the following free CSS tools in our Free web Development Tools section.
Please contact us to learn more about custom web development for your website.
WEBSITE-DESIGN
website design web design css