Getting your Knickers in a Twist with Cascading Style Sheets. (Tight Satin Knickers.)

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...

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? 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:

  1. the html Selector
  2. the open braces
  3. the property
  4. the colon
  5. the value
  6. the semi colon
  7. 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 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, 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. Now you are done... Ok there is only one style defined that effects the P Tag, 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.  So here is the code you need to link a style sheet to a web page:

image of code to attach a style sheet using a link tag

It should be clear that the name of the linked file is mainstyle.css. 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, 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