| Your first CSS experience |
 |
 |
 |
| CSS - Basics | ||||||
| Written by Stuart Duncan | ||||||
| Thursday, 01 October 2009 13:17 | ||||||
|
Before you can learn the terminology or the list of available attributes you can use, it helps to know how to get CSS working on your page. The absolute best way to to learn something is to try it yourself so for this article, we're going to dive right in to having real working CSS on your HTML page. This is of course, assuming you have an HTML page to try this on. If not, take a few minutes to make up a rough basic page with some text on it. It doesn't have to be fancy but it does have to follow standard HTML rules and have some text on it. Once you have that, I will tell you: 1. Where the CSS goes
Open up your HTML page in your favourite editor... when learning, the best is usually to use plain old notepad. This way you aren't being helped or worse, confused, by things the editor might do on it's own. Then you will want to open it in your browser, whether that be Firefox, IE, Safari, Chrome, Opera or.... what ever. Now you can type in the editor, hit save and reload in your browser and see what you've done.
1. Where the CSS GoesHTML is hardly a strict language which means that if you really wanted to, you could put stuff just about anywhere but for the sake of doing things right and keeping things uniform, you really should try to keep header items in the header and body items in the body. Your HTML should have a header section which is contained within these HTML tags: <head> </head>. First you start with something like this:
This is where information about your page goes that doesn't necessarily show up on your page and CSS falls right into that category. It affects your page but doesn't physically show up on your page itself. What you are going to do is create a new element called <style> which is what tells your browser to find CSS information wthin it. It will then look something like this:
You will notice that it doesn't simply just look like <style> but rather it includes the attribute type="text/css" which just lets the browser know that it is indeed CSS that is listed there. This is where our CSS information will live. It is important to note that there is a way to have a CSS file that is separate from the HTML page itself, and you just include it. And that is done like this:
You will notice that it no longer says style but rather link as it is now essentially, a link to the style. rel tells it that it's linking to a stylesheet (Cascading Style Sheet), the href tells it where it is and again, we have the type just like before.
2. The Basic StructureNow that you have a place to put your CSS, either between the <style> tags or in a separate style file, you can start entering in some CSS information that will affect your HTML page. The thing to remember here is that each HTML tag is like an object. A table is an object, a table cell is an object, a list is an object. And the CSS is merely a way to style that object. So in your CSS information, you have to reference that object and tell it what style it has. For the sake of making things easy and dramatic (you will definitely notice a change), we will use the <body> element as our object because it affects everything within it. Having CSS reference an HTML object is extremely easy as all it requires is for you to mention it's name... in this case, body. What comes next are squiggly brackets which encase the styles you want the body to have. For example:
Right now it doesn't tell it to do anything but the CSS will be registered with your browser, it will know what HTML element it's talking about and it will know to do what is in the brackets... in this case, nothing. Now let's give all of the text a little style... following up from the introduction article, we'll make the text red.
Here is how the information inside the brackets breaks down. First you have the attribute which is to say, the feature of the HTML element which you want to change. In this case, the color changes the text color. background-color changes the background color and so forth. We'll get into more later. After the attribute, you have a colon which tells the attribute to use what follows and what follows is the modifier or style to use... in this case, red. A semi colon finishes off the statement so that you can have more that follows after. You can string along as many CSS statements as you like so long as they're all separated by semi colons. Now you have a CSS line which tells the browser "Go to the <body> tag and set the color of all text within it to red." Your end result should be something like this:
And if you did it correctly, your text will now be red even though the HTML says no such thing, the CSS does. Now that you have this example, you can try to experiment with more, for example, add in more lines... You'll also notice, if you do that, the text in a td cell will become blue even though the td is technically within the body tag and the body tag says to make it red. This is why it's called Cascading Style Sheets... it reads the first line, which is body and makes all the text red, but then it reads the next line which tells it to make any text within <td> tags blue. So it overrides the red. If the text in the <td> is centered using <center> tags, then it will be made green because that's next. Experiment and see what happens. If you don't get it right, don't worry.. nothing will break. It simply won't style it correctly, that's all. You go back to your editor and try again. |
||||||
| Last Updated on Friday, 09 October 2009 09:59 |
