Understanding and implementing cascading style sheets (CSS) is one of the best ways to give your web pages a professional, appealing design. Although you can write style sheets for each page you code, it is best to import an external style sheet and customize specific parts of each page with styles in the header and elements tags. This gives your site a cleaner look, eliminates hassle, and allows you more control over your design. In this tutorial, you will learn how to integrate CSS into several pages, and get hands-on experience with a sample HTML page.
In order of importance from highest to lowest, your styles are displayed in your pages as follows:
1. Inline styles
2. Styles in page headers
3. External style sheets
4. Browser default
This means that if you specify the background color in an individual <p> tag, this will take precedence over paragraph background color set in the header, which will in turn override the style set in an external style sheet. This is why most of your styles should be written in an external style sheet and later tailored to each page or element tag; you will not need to write them many times, and they will affect a larger range of tags. Let’s look at an example page.
<html><head><link rel=”stylesheet” type=”text/css” href=”style.css” /></head><body><div class=”container”><div class=”bar”><a href=”about.html”>About me</a> | <a href=”mystyles.html”>My style sheets</a></div><div class=”left”>This is the left column.</div><div class=”main”>This is the content area.</div><div class=”right”>This is the right column.</div></div></body></html>
Notice that the link in the header refers to an external file called “style.css.” This is where the styles for the classes “container”, “left”, “right” and so on are specified. This file looks like the following.
a{text-decoration:none;}.bar{margin-left:140px;margin-bottom:5px;}.left{width:140px;float:left;margin-right:5px;}.container{margin-top:50px;margin-left:auto;margin-right:auto;width:80%;}.main{width:670px;padding:10px;background-color:lime;float:left;height:70%;}.right{width:170px;float:left;margin-left:5px;}
Test this out in a text editor and open the result in a browser so that you can get familiar with linking style sheets. The great part about using an external style sheet is that it serves as a template for all the pages on your website. If you decide to make another page with the same styles, all you have to do is make another <link> tag to the appropriate CSS file.
To customize the styles within a certain page, add a <style> tag inside the head tag. For example, if you want to change the background color of the class “main” to light blue on a page, simply add the following.
<style type=”text/css”>.main{background-color:lightBlue;}</style>
If you only want to change the style of one HTML element, add an inline style to that element as follows.
<div class=”main” style=”font-family:helvetica;font-size:12px”>Now the font type is helvetica, with a 12px font size.</div>
So just remember that CSS styles are inherited from the most specific style sheets in your HTML documents. Inline styles are the most specific and they affect the least amount of style, while the browser default is the least specific but it affects all parts of every page unless other styles are indicated. Now that you know how to use CSS in your pages, all you need to do is learn the syntax of CSS properties so that your web pages look uniform and stylish.
0 comments:
Post a Comment