DO NOT TRY THIS AT HOME : Rotteneggs.com text files and message bases are for INFORMATIONAL PURPOSES ONLY. DO NOT undertake any project based upon any information obtained from this or any other web site.We are not responsible for, nor do we assume any liability for, damages resulting from the use of any information on this site.
(39 votes) Published: Apr 01, 2008 4:11 p.m. In 2 Favorites Lists Viewed 220 times
This is the first in a two part CSS Egg
In this egg I will show you how to use CSS in your web page. The best thing about using CSS, for your web site is you make one CSS file and link it to all of your web pages. With out having to write the code on each page.
Quote:
In web development, Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.
I use notepad++ but any text editor will work.
Create a style sheet.
1. On the Notepad Menu Bar, click File, then New.
2.When the blank document appears, save it in the folder of your choice i am naming mine format.css 3. On the blank page type:
h1 {font-family:verdana,helvetica,sans serif;
font-weight:bold} Tip: This means that every time a or (heading, size 1) tag comes up on a page is this site, the text they enclose will be displayed in the font families specified, and bold.
The first font family, verdana is for Windows.
The second font family, helvetica, is for Macs.
The third font family, sans serif, ensures that a computer that doesn’t have the arial or helvetica fonts, the computer will choose a font that looks like them.
4. Save format.css
Integrate a style sheet
1. In Notepad, open your html index page. Mine is index.html
2. Below the tag, add a tag that links the page to format.css
3. Save index.html
Apply Formatting
1. Enclose the words My Home Page.(heading size 1) tags:
2. Save index.html and view it in the browser.
Tip: click the refresh button to see the page with recent changes.
It should look like this:
Ya I know its nothing special!
Change text size
1. In Notepad, open [b]format.css.
2. Add the attribute
font-size :16pt to the h1 formatting:
h1 {font-family:verdana,helvetica,sans serif;
font-weight :bold; font-size:16pt}
3.Save format.css.
4. Reload index.html in the browser
So I know it doesn’t seem like much but you really can make a great web site with css. So that is it for part one, part II will cover paragraphs Text alignments and more. Watch for it in the next week or so.