Now, that your familiar with how CSS Selectors work, let's take a look at CSS properties. You have already seen some CSS properties in the examples above: font, font size, alignment. These are, a few of the numerous properties which you can change to modify the element styling. In this section, we will look at some common CSS properties.
For a full listing of properties, visit W3Schools CSS Reference Page for a complete CSS2 reference.
Color
The color property allows us to determine the color of the element, such as text, background, etc. You can choose to enter the name of the color. If, however, you want a specific shade of color, you should enter the hexadecimal number. Learn more about this in the Colors section.
{ color: blue; }
{ background-color: #546789; }
Text
There are many properties that you can apply to text on your webpage. One of them is the font-size.
p { font-size: 12px; }
li { font-size: small; }
h2 { font-size: 150%; }
These are different ways you can do to the respective elements.
Another property to note is the font-family. It refers to the type of font which your text is presented in. Let's have a look at the syntax font rule.
{font-family: "family-name", generic-family }
Family name would refer to the font used, such as Verdana or Helvetica. Generic-family would be the typeface of the font, commonly, serif and san serif. You might consider assigning more than one family name in a rule, should your viewer not have that specific font in his/her system. To do so, separate the second font by a comma.
E.g.
{ font-family: "Time New Roman", Gerogia, serif }
[NOTE: It is recommended practice to present your font name within quotation marks should your font name contain spaces.]
In this case, the preferred font is Times New Roman. Should Times New Roman be not available on the viewer's system, the text will be presented in the next best alternative, Georgia. If this is still not available, a system serif font will be substituted.
Background
One example is to set images as your background for any given element.
{ background: url(path) no-repeat top left; }
where path is the url of the image on the directory. This is the most commonly used property when background images are used. The "no-repeat" indicates the the image is not repeated in any axis. The image will be on the top left corner of the element.
Margins and Paddings
Margins refer to the amount of space around elements. You can adjust the amount of space on the left, right, bottom and top of an element. For example,
{margin-left: 2cm; }
The above rule would clear a 2cm space on the left of the element. The values can be in the form of length with units or percentage in relation to the parent element.
Should you want to determine specific margins for every side, you should utilize a single margin declaration, in the form:
{margin: top right bottom left}
replacing the words with values like "5px".
However, if you just provide two or three values, the missing values are taken from the opposite side. For example,
{margin: 2px 3px; }
would mean a 2px margin on the top and bottom and a 3px margin on the right and left. If you declare a single value, that value will apply to all sides of the element.
Padding refers to the amount of space between the element border and the element content. (This differs from margin, padding adjusts the spacing WITHIN the element)
{ padding: 2em 4em 5em; }
Setting the padding of an element is identical to that of setting margins.
Float
The float property sets where an image or a text will appear in another element. The values which float can take are: right, left and none.
img{ float: left; }
In this case, the images will be positioned on the left in the element. Other elements simply continue showing on its right. Please note that the float property is difficult to control and may behave differently on browsers, especially if there are multiple floating elements close to one another.
Inconsistency between browsers
Users of CSS may often be frustrated by how different browsers display markup in a different way. A good example would be the positioning of elements. Try opening any website that uses an external style sheet with 2 different browsers (especially IE6 with other browsers). They may look slightly different.
However, do not be shocked by what you see on a different browsers if everything has been showing well on your favorite browser. They can be solved with some extra work which will be talked about in the following explore deeper item.
For now, let's look at some common differences:
Do not worry, let's look at some useful solutions.
Hacks
It is interesting to note that many sites (including our site) uses browser hacks to maintain as close a presentation as possible across all browsers.
One very useful hack that aims to solve IE6 display problems is the use of child selectors in the CSS. By using something like this:
html>body .box {
width: .1px;
padding: 0;
}
.box {
width: 100px;
padding: 2px;
}
Elements with class "box" will have a width of 100px and padding of 2px in browsers (like IE6) that do not understand child selectors (>), but width .1px and no padding in other browsers (like Firefox and Opera).
The child selector is used on parent elements to select a child element, and thus any element, class or ID can be styled from the child element. For example, if an anchor element with ID "link" is nested in a division element, you can use body>div a#link.
This is the most useful hack around. You can read more from Webcredible. These hacks will be obsolete when everybody moves to the newer version of their browsers.
Rollovers without preload
Many of you may like rollovers a lot, and may want to apply it all over the site's buttons. However, rollovers tend to slow the site down and may take some time to load if a background image swap is involved. Some people have adopted the image preload solution using JavaScript, loading the images together with the page.
The best method would actually be the use of CSS background-position property. Create the desired background image together with its rollover image on one single image file, then control what is to show on the actual page by changing the background position on hover.
View it in action at Wellstyled Tutorials Page