XHTML and CSS - An Introduction to CSS
An Introduction to CSS
In this tutorial we'll be starting to work with CSS, the difference between CSS and HTML are, HTML is pretty much the basic building blocks for a website, how to add all the main elements to your website, images, headings, paragraphs, text, links etc. Now what CSS dose is it makes it pretty, it gives you a nice layout, adds colors, changes the fonts, spaces things out etc. HTML is the core foundation, CSS is the designer pretty much. CSS stands for cascading style sheet, now let's look into using it. To use CSS you add style tags into the header with the attribute type set to text/css like below.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> </body> </html>
Let's go ahead and make our website look a bit nicer, go ahead and type out the following code, save it and load it into your browser.
<html> <head> <title> This is the title. </title> <style type="text/css"> </style> </head> <body> This is normal text. <p>This is paragraph text.</p> </body> </html>
As you can see this text is pretty boring, let's make it look better with css. We'll change the color and the font, in order to change any element on your website, between your style tags you need to do is type the name of the element, the element name is whatever is between the brackets and then add curly brackets. Between the curly brackets you type what you want to change.
<html> <head> <title> This is the title. </title> <style type="text/css"> p { } </style> </head> <body> This is normal text. <p>This is paragraph text.</p> </body> </html>
The first thing you need to do is type the property's you want to change, there are thousands of property's you can find them by searching Google, you don't have to remember all of these, most people use a reference page, you can find a good reference page on Google. For now we'll just be using something simple, one of the property's you can change in a paragraph is the text color, type color , then a colon, then the value of the color you want the text, then put a semi colon.
<html> <head> <title> This is the title. </title> <style type="text/css"> p { color: blue; } </style> </head> <body> This is normal text. <p>This is paragraph text.</p> </body> </html>
p is the selector, color is the property, blue is the value and the semi colon is to mark the end of the line, all CSS property's use something similar to that. Next we're going to change the font, to change the font you need to use the property font-family and we'll set it to arial.
<html> <head> <title> This is the title. </title> <style type="text/css"> p { color: blue; font-family: arial; } </style> </head> <body> This is normal text. <p>This is paragraph text.</p> </body> </html>

Page generated in 0.0058 seconds.