iGuest 3 Report post Posted January 16, 2008 What is CSS?CSS stands for Cascading Style Sheets. It is a language used to apply style to webpages (Without using font tags, bgcolor, etc.) CSS saves time by letting you apply style to elements of a certain type, or with a certain class/ID instead of having to add it manually to each of them. Most webpages use CSS, as it can create nice-looking websites, without a huge amount of excess HTML.Where do I put it?If you want to just apply some style to a certain element on the page, you can use the style HTML parameter, e.g.<span style="CSS Here">Hello, world!</span>If you want some CSS code to set mproperties for certain elements (e.g. set the link colour, font, etc.), there are two methods.Method 1:Use the HTML style tag. this can be placed anywhere in the document, but usually in the head tags.<style>CSS Here</style>Method 2:You can also place your css code in an external document (With the file extension .css). You can then use a link tag in the head section of your document to link the css file to the page, e.g.<link rel="Stylesheet" href="style.css">Note: The underlined part tells the page that this is a Stylesheet, and the italic part is the filename of the css file.What does it look like?CSS is generally structured like this:element { property: value; property: value; }element { property: value; property: value; }Although, depending on what you prefer, you can also structure it like this:element {property: value;property: value;}When you're using the style paramater of an element (see above), you can simply put this:style="property: value; property: value;"An exampleOk, now we're going to show you how to do something with it.Make a new HTML document, with the following code: <html><head><title>CSS Example</title><style></style></head><body><h1>Hello world!</h1><br><span>This is a span</span><br><span>This is another span</span></body></html> Now open it up in a browser, it should look plain and boring, a bit like this:Hello world!This is a spanThis is another spanNow we're going to use CSS to make it look a bit nicer.Place this CSS inside the style tag in the document h1 { font-family: Verdana; color: #0000FF; } Now look at the page. It should look a bit like this:Hello world!This is a spanThis is another spanThe font and colour of the h1 tag has changed. Let's look at the CSS code we put in.h1 { font-family: Verdana; color: #0000FF; }h1 - This tells the page to apply this style to all h1 elementsfont-family: Verdana; This sets the font family to Verdana;color: #0000FF; - This sets the colour of the text to the hex code #0000FF (Blue)But the rest still looks relatively plain, doesn't it?Add the following lines to the style: .firstspan { font-family: Verdana; color: #FF0000; }#secondspan { font-family: Verdana; color: #00FF00; } Now, change these two lines of HTML: <span>This is a span</span><br><span>This is another span</span> To this: <span class="firstspan">This is a span</span><br><span id="secondspan">This is another span</span> Load the page in the browser, now it should look something like this:Hello world!This is a spanThis is another spanThe CSS we put in is similar to the first line, but lets have a look at what the difference is.firstspan { font-family: Verdana; color: #FF0000; }#secondspan { font-family: Verdana; color: #00FF00; }Look at the start of the lines, you'l notice that firstspan is preceeded by a ., and secondspan by a #.The . means to apply the style to all elements with the following class (firstspan), and the # means to apply it to all elements with the following id (secondspan)What else can I do with it?CSS is a pretty easy language, once you know the basics.You can download a .pdf file here that'll tell you all the different properties, values etc. to help you customize your web page even further, which is useful for both experianced CSS writers and newbies. Share this post Link to post Share on other sites
netcollections 0 Report post Posted March 23, 2008 good tutorial, but css is not just this, if somebody whant to learn more you can find complete tutorials at w3schools.com or html.net. Good luck with css. Share this post Link to post Share on other sites
Miles 0 Report post Posted March 23, 2008 Good tutorial, and I'm sure it will help newbies, but to be honest, I've never used the <span> tag. It would be better if you rewrote it using DIV's instead of SPAN's. Share this post Link to post Share on other sites
Umar Shah 0 Report post Posted March 28, 2008 got startup tutorial.However I would like to emphesasize the real benefits of css.1. If you have a lot of repititive formating then CSS will save time coding the page 2. Due to removed redundancy of repetitive styling code the transfers of pages over http will be faster since lesser data has to travel .2. it becomes easy to maintain the style of the page by using CSS. Share this post Link to post Share on other sites
