Post by Gamoc on Jan 9, 2007 18:28:11 GMT -5
Hello there, I am going to write you a tutorial on the basics of CSS(cascading style sheets)
Right now, you should know HTML, if you don't blaze has made a couple of tutorials on how to use HTML.
To start, you would use style tags to start a CSS code.
In the CSS syntax, there are three parts, the selector, the property, and the value, here is an example syntax.
I think that it is a little self explanatory, here, let me give you two examples on what this would look like.
Can you guess what this does, if you can't, then go back to the HTML for a while. What this does is make things in the head green.
Here, it is saying that I want the font family of all the h1 tags to be sans serif.
Now this time you will notice that I used quotes around the value. This is simply because if your value is more than one line long, you must use quotes, other words an error will occur.
Lets say you want to add more than one value to something using CSS. How would you do this? Simple, you would simply use a semicolons between them, as so.
This one tells the browser that I want paragraph elements to have a font of verdana, color blue, and a center alignment. Can you see how the semi color works.
Now lets take that and make it neater.
Now you tell me which one is neater. I think it's the second one, each value and property has its own line to work on, plus, nothing changes if you had done it the same way for the first one.
Well, now you're thinking about a lot of work. This should lower this work load for you.
So, what did I just do. I just declared that all of the header elements in the document need to be in blue text and a font family of arial.
This method is called grouping. You take all of the tags that you would like to have as the same value and use them as the selector, seperating them with commas, then assign a property then a value to that property.
Well, what if you don't want all of your header elements as the same color. You would assign class selectors. Here is an example of what they are and how to use them.
Here is how you would assign them.
Now, how did it work like this. Well, the p in the p.red noted that we wanted to give some of the paragraph elements red text. The .red states that it can be help as an id for a paragraph element. The property and value tell what the id does.
Well, what if you send the code to someone who knows nothing about CSS or HTML. You would use comments to tell what it does. You use the /* and the */ to display comments.
The browser completely ignores anything between /* and */'s, so nothing will happen if you say something talking about pickles in there.
Okay, I think that is enough basics, hope this helps start with an understanding, www.w3schools.com is a good place to get more on CSS, but that is all here.
-Pikablu-
Right now, you should know HTML, if you don't blaze has made a couple of tutorials on how to use HTML.
To start, you would use style tags to start a CSS code.
<style type = "text/CSS">
<!--
....some script...
-->
</style>
In the CSS syntax, there are three parts, the selector, the property, and the value, here is an example syntax.
selector {property: value}
I think that it is a little self explanatory, here, let me give you two examples on what this would look like.
Head {color: green}
Can you guess what this does, if you can't, then go back to the HTML for a while. What this does is make things in the head green.
h1 {font family: "sans serif"}
Here, it is saying that I want the font family of all the h1 tags to be sans serif.
Now this time you will notice that I used quotes around the value. This is simply because if your value is more than one line long, you must use quotes, other words an error will occur.
Lets say you want to add more than one value to something using CSS. How would you do this? Simple, you would simply use a semicolons between them, as so.
p {font family: verdana; color: blue; text align: center}
This one tells the browser that I want paragraph elements to have a font of verdana, color blue, and a center alignment. Can you see how the semi color works.
Now lets take that and make it neater.
p
{
font family: verdana;
color: blue;
text align: center
}
Now you tell me which one is neater. I think it's the second one, each value and property has its own line to work on, plus, nothing changes if you had done it the same way for the first one.
Well, now you're thinking about a lot of work. This should lower this work load for you.
h1,h2,h3,h4,h5,h6
{
color: blue;
font family: arial
}
So, what did I just do. I just declared that all of the header elements in the document need to be in blue text and a font family of arial.
This method is called grouping. You take all of the tags that you would like to have as the same value and use them as the selector, seperating them with commas, then assign a property then a value to that property.
Well, what if you don't want all of your header elements as the same color. You would assign class selectors. Here is an example of what they are and how to use them.
p.red {color: red}
p.green {color: green}
p.blue {color: blue}
Here is how you would assign them.
<p=red>This will display red text.</p>
<p=blue>This will display blue text.</p>
<p=green>This will display green text</p>
Now, how did it work like this. Well, the p in the p.red noted that we wanted to give some of the paragraph elements red text. The .red states that it can be help as an id for a paragraph element. The property and value tell what the id does.
Well, what if you send the code to someone who knows nothing about CSS or HTML. You would use comments to tell what it does. You use the /* and the */ to display comments.
/*This is a comment*/
The browser completely ignores anything between /* and */'s, so nothing will happen if you say something talking about pickles in there.
Okay, I think that is enough basics, hope this helps start with an understanding, www.w3schools.com is a good place to get more on CSS, but that is all here.
-Pikablu-