└>Lesson 4: CSS Properties Tutorial
What are properties in CSS used for?
Every css rule needs properties, otherwise it will just be a blank rule that essentially does nothing. First I will go through some of the more common properties in CSS, followed by a quick list of them all. Just to get you up to speed, I will remind you of what a property in css is, here is the syntax example:
selector {
property: value;
}
Setting the background
background-color: value;
The background-color property is used to set the background color of an element. Here is an example that will make the background of a div element red:
div {
background-color: #FF0000;
}
background-image: url;
This sets the background of an element to use a specified image:
div {
background-image: "/url/to/background/image.jpg";
}
Positioning elements
For these examples I will pretend we are changing the look of a <div> called "example", here is the html:
<div id="example">Positioning Example</div>
top: value;
This is a simple way to specify where on the screen you want an element to be placed, most often you will use pixels as the type of value for this. This example will move the element with the id "example" to the very top of the screen:
#example {
top: 0px;
}
left: value;
This is the same as the top property, except it positions from the left side of the screen. Expanding on the example above we will move the "example" element into the middle of the screen:
#example {
top: 0px;
left: 50%;
}
bottom: value;
I am sure you can guess what this does, its the same as top and left, but positions from the bottom, so now lets move "example" to the bottom of the screen:
#example {
bottom: 0px;
left: 50%;
}
right: value;
This is the same as the other 3, I wont even bother with the example here :)
float: value;
This is much like a way to align an element, you can make it "float" to the left or right of the screen for example:
#example {
bottom: 0px;
float: left;
}
position: value;
This is a very interesting element, it takes a bit to understand exactly how it works in some situations, but for the most part its simple. This defines what the position of an element is relative to. The values are: static,
relative,
absolute, and
fixed. Lets pretend for a moment that our "example" div is inside another div tag, if we set the position of "example" to "relative", it will be relative to the div that "example" is nested in, instead of relative to the browser window itself. This will be used most of the time when you have one div inside of another. This is one property you will just need to play around with a few times to get the hang of how it works. A very nice page of examples can be found at BarelyFitz.
visibility: value;
This is a handy one, all it does is set whether or not an element is visible or hidden, which is also by luck has it, the name of the values. This example will make our "example" div hidden:
#example {
visibility: hidden;
}
height: value;
This sets the height of an element (usually a div) to the value. Most often this is pixels, but you can also use % and em.
#example {
height: 50px;
}
width:
value;
This sets the width of an element (usually a div) to the value. Most often this is pixels, but you can also use % and em.
#example {
width: 50px;
}
z-index: value;
The z-index can be thought of as a stack, all elements are normally placed at the same height in the stack, if your positioning things yourself with css you will often need to change the order of elements. Lets say for example you have a sidebar, and and a search box, each in their own <div>, and you want the search box to be inside the sidebar. Now lets say you set it up but it doesnt work, what has happened? Most likely the search box is actually where you want it, but the sidebar is overlapping it so you cant see the search box. In this case you want to specify your own z-index for the search box's <div>, and make it a higher number then the z-index for the sidebar. Generally any number will work as long as its higher then 2, unless the sidebar is set at 5, then the search box will need a z-index of 6 or higher to appear layered on top. Here is the example:
#sidebar {
width: 200px;
z-index: 2;
}
#searchbox {
width: 150px;
z-index: 3;
}
I hope that was not too confusing, it will be easy to understand once you get in there and try it out yourself, you should be able to use large number if you need, I was able to use a z-index of 100 one time with no problem.
Font Properties:
font-size: value;
This will set the size of the font, I like to specify it in pixels, but you can use other value types as well (I wont name then since I cant explain them). Example sets font size for entire page at 14 pixels:
body
{
font-size: 14px;
}
font-family:
value;
This just sets the typeface to be used, this example will set all text on the page to use the arial font:
body {
font-family: arial;
}
Note that if the name of your font has a space in it, you should enclose it with quotes "lucida console". You can also specify more then one font, the second font will be used if the first is not available, then the third, and so on. For example:
p
{
font-family: verdana, arial, helvetica, sans-serif
}
color: value;
The color property is used to set the color of text inside an element, you can specify the color in hex (#FF0000) or for common colors, as a word: red, green, etc. This example will set the color of all text on the page to be red:
body {
color: red;
}
Well, thats it for the basics of CSS properties. Eventually you should learn them all but this should get you started :)
Now on to Lesson 5, which teaches you the different value types that go after properties.
