CSS Part 4: Common Attributes

**Lop** · 02-07-2009, 12:42 PM

CSS Tutorials
Chapter 4: CSS Common Attributes

We will list out common attributes of CSS categorically as follows

Font
Element Formatting
Background
Border

1. Font
font-family: Using this attribute, you can specify a list of fonts which are delimited by comma. The CSS engine will browse through the list of fonts you entered and will select the first font that is available. Make sure you specify at least one system font that suits your web page in the end of this list.

font-size: Using font-size you can specify the size of the font to appear in your HTML element. You can also specify the size in various units. The units can be appended to the end of the size. The units supported are cm, mm, in, pt, pc, px, %. We also have predefined font sizes like medium, large etc.

font-weight: Using this you can define how the text should appear. Values that you can give for this attribute are normal, bold, bolder, lighter

Lets see a code sample for Font attributes.

HTML Code:

<html>
<head>
<style>
.myFontStyle
{
font-family: Comic Sans MS, Times New Roman, Arial;
font-size: 40px;
font-weight: bold;
}

</style>
<body>
<h3>I am on my own style</h3>
<h3 class='myFontStyle'>I am using myFontStyle</h3>
</body>

Here is the screenshot:

As you can see, I am running this script under Linux. But since Comic Sans MS is not something Linux system could have, the CSS engine took the next available font Times New Roman.

2. Element Formatting
color: Using this attribute, you can change the color of the text within the specified selector. There are two ways of giving a color value. You can either specify a color literal for standard colors like red, blue, lightblue, violet etc. OR you can specify a hexadecimal color code like #FF2131. The First FF stands for Red components which is set to its full. The second component 21 is for Blue component. And the third component, 31 is for green. So if you say color to be #FFFFFF it is white and #000000 it is black.

text-decoration: We have used this attribute in our previous examples. It specifies the positioning of a line relative to text. Possible values for this attribute include underline, overline, line-through.

Lets see a code sample for element formatting

HTML Code:

<html>
<head>
<style>
.myFormat
{
font-family: Comic Sans MS, Times New Roman, Arial;
font-size: 40px;
font-weight: bold;
color: #FF3311;
text-decoration: overline;
}

</style>
<body>
<h3>I am on my own style</h3>
<h3 class='myFormat'>I am using myFontStyle</h3>
</body>
</html>

Here is the output:

3. Background
background-color: As you can guess, this sets the background color of the element on which this is applied. We can also specify the background-color to be transparent to show the color beneath the element.

background-image: Using this attribute, we can specify the image to appear as the background of the element

background-attachment: Specifies, how the image attached moves according the scroll of screen. This applies in cases where we have image larger than the corresponding container size. Values for this include scroll, background-repeat, repeat

We have already seen examples for some background attributes like background-color.

4. Border
Borders are another common thing that we utilize in HTML pages. The common attributes used for border tag include

border-style: We can specify the border style using this attribute. Values for this attribute include, border-style: none OR dotted OR solid OR double border-color: This attribute lets us specify the color for the border-style we chose earlier

Lets see an example for this,

HTML Code:

<html>
<head>
<style>
.myBorder
{
border-style: dotted;
border-color: blue;
}

</style>
<body>
<h3>I am on my own style</h3>
<h3 class='myBorder'>I am using myBorderStyle</h3>
</body>
</html>