Build Your First Style Sheet

Category	: CSS		Views	: 8241
Version	: 2.1		Rating	:	2.0/5 (37 votes) Currently 2.03/5 1 2 3 4 5
Type	: Text

Assuming that you are interested in CSS (or at least you need to work with it, otherwise why would you have stumbled into this article) and also interested in doing a style sheet on your own, then this article is the right one for you. Let’s also assume that you have edited CSS scripts before and you known the basic things about CSS but you never made a style sheet on your own. In this article, I will show you how to modify a HTML page in CSS. Afterwards we will apply the CSS file to the HTML file to see exactly how cascading influences the look and feeling of web page.

Generating the HTML page

Since I am not really interested in the content of the web page, I will advise you to use as a HTML page generator Microsoft Word (I, myself will be using Word 2003). All you have to do is write several paragraphs (or even better, copy paste them from any source) and then let Word handle the HTML translation of the document. If you do not know, or need a refresher course, just follow these steps:

• Launch a new session of your Microsoft Word edition
• Type or copy paste (whichever you like) a few paragraphs
• Format one of those paragraphs italic.
• Now, write a few words randomly on a line and press enter.
• Drag your mouse over the words you just wrote and go to the Format menu.
• Select the Styles and Formatting submenu and select Heading 1 from the list of styles.
• Create several second level headlines by repeating the last 3 steps over and over again.

Your word document should look something similar to the picture below.

Transforming your Word document into a web page

Now that we have the Word document, all we have to do is turn it into a web page with the help of Microsoft Word. Follow the next steps:

• Go to the File menu and then click the Save as Web Page submenu – Now a Save dialog box will appear and it will ask you whether you want to save you current document as an .mht web page. You will not need that extension since it is a specialized Microsoft format – you only need a plain HTML document generated from what you already have.
• Find the Web Page (*.htm, *.html) option, and choose it. Name it however you would like it. Now, you have finished creating a HTML document. You can take a look at the HTML source now by simply choosing View > HTML source in Word.

Aside from the fact that you might find a lot of strange new code lines (some of them are XML, while some of them are mso – which stands for Microsoft Office) we are only interested in editing it with CSS. All you need to know are some of the rules regarding specificity in CSS:

• Child elements will inherit the parent’s style. For example a <p> tag is a child for the parent, the tag, therefore, if has assigned to it a style that specifies bolding of certain elements, then any paragraphs within that certain parent will inherit that bolding.
• Within any HTML document, any type of CSS style contained will take precedence over any external style that is located separately in a .css file, and only referenced in the code through the linking tag.
• If you want to make a style that takes precedence no matter what other factors are involved, then use the !Important command.

Using these, you can edit most of your Microsoft Word document, with new CSS styles.

Good luck!