On This page we explain two things, one how to create a style sheet, two how to attach it to your Web Page.
How to you create a style sheet, well just open up your editor and start creating some styles...
We will take you from novice and timid CSS User to someone who shows some confidence in using all aspects of Cascading Style Sheets!
Redefining an HTML Tag
So how to create a style, (or more correctley redefine an html tag style), well first here is the general syntax to create a new style, here we are actually redefining an html tag,:
p{font-size:1em;}
That doesn't look hard does it? You are allowed to redefine say how h1 and h2 tags look within the same line, too do that you would have a line like this:
h1, h2{font:Georgia, "Times New Roman", Times, serif; color:#FF0000; font-style:italic;} Note that in this example the rules writen affect both h1 and h2 tags, and that there are two rules, a font definition and a color definition. You can have 1, 2 or more than 2 definitions affecting the tag or tags you type into the style sheet. Each rule you define must end in a ; and then a space before the new rule is typed! Also note that if two html tags typed they must be seperated with coma.
Notice the HTML selector comes first, followed by the braces, inside the braces is the property then a colon then the value then a semi colon, then you close the braces. Always these things will be in this order, the HTML selector in this specific example is the p tag, (so we are defining a style for the P tag). The p tag is the paragraph tag in html. So what we have done is to define the font size of the paragraph tag. The thing to learn here: i.e. the lesson is not understanding the font-size or the 1em part, Noooo the lesson is the order of the parts, so to make it clear we repeat it here:
- the html Selector
- the open braces
- the property
- the colon
- the value
- the semi colon
- the closing of the curly braces.
there are lots of properties and values, but fortunately you do not need to learn them all at once. The important things to remember is that you simply must close the curly braces, forgetting to do this will reallty screw things up and give you a bad Hair day plus to boot the style will not work. Do NOT Try to put normal HTML tags into a Style sheet other wise this will also give you a headache or generally ruin your day..., in other words no style tags, or indeed any html tags are needed!!
Once you have created your style, save the file as mainstyle.css The name you give the style sheet is up to you, call it something meaningfull and avoid any spaces in its name and any underscores or hyphens, because some browsers may not be able to cope with such names at all!!?. Now you are done... Ok there is only one style defined that effects the P Tag in this case, but thats a start, we will mention other styles in other CSS Lessons. Now we move on to How do you attach an external style sheet to a web page.
How do I attach a Style Sheet to a Web Page.
There are infact two ways to do this you can import the css style sheet or you can link the style sheet to the web page. So as to keep things real simple we are just going to talk about how to link a style sheet to a web page, if you want to know about importing style sheets follow the link at the top of this page Tight Cotton Gusset.
You use a html tag called link to link the style sheet to the web page in question, but this is important you must put the link tag inside the head tag of your web page.. So here is the code you need to link a style sheet to a web page:
It should be clear that the name of the linked file is mainstyle.css in this case. Also do notice that the link tag is closed with a />, this is important, as is the fact that the style sheet called mainstyle.css must exist. This is a clue a bit like a swip across the face by a sleepy grzzley bear...., create the style sheet, then save it, then go to the web page that you want to link to it. Where to place this line of code??
The answer is inside the head tag of your web page. In reality there is likley to be other things inside your head tag, such as a title tag, various meta tags, and there could be some embedded styles in the head tag, we will write a page about embedded styles shortly. In breif place this speific link tag after the title tag and after any meta tags you have, but before the close of the head tag of your web page.
More help to untwist your knickers:
Look get this flat now, every HTML Tag that exists in the HTML Language will produce something, either a link tag or a heading or a picture on a page or what ever, but each of these tags will be seen on the screen in a standard way as rendered by Internet Explorer or Safari or Fire Fox. You do not need a Casacading Style sheet or even a style sheet, a P tag will create a paragraph and that works fine.... but here comes the bomb shell or that Wow Wee ahhhhhh..that feels good moment.. If you want to render that p tag in a diffrent font and colour on your web page you need to create a redefined p tag, with its own attributes and put it into a style sheet and link that sheet to your web page. That's Why you need CSS. You can use inline styles and we will mention that on the Taught Red G-String Web Page, and you can use Embedded styles that need no Style Sheet and we mention that on the Twisted Black Lace Panties. Page