Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

CSS Part 4: Common Attributes


  • Please log in to reply
4 replies to this topic

#1 Lop

Lop

    Speaks fluent binary

  • Just Joined
  • PipPipPipPipPipPipPip
  • 1112 posts

Posted 07 February 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>
<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:
Posted Image

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>
<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:
Posted Image

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>
<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>


Here is the output for this code:
Posted Image

Now lets move to our final tutorial, Advanced topics in CSS.
  • 2

#2 Xav

Xav

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 8356 posts

Posted 07 February 2009 - 01:39 PM

color: #FF3311;

This can be put more simply like this:

color: #f31;

Just thought I'd point out.
  • 0
If you enjoy reading this discussion and are thinking about commenting, why not click here to register and start participating in under a minute?

#3 Guest_Jordan_*

Guest_Jordan_*
  • Guest

Posted 07 February 2009 - 03:09 PM

Nice work! +rep

Posted via CodeCall Mobile
  • 0

#4 Egz0N

Egz0N

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1155 posts

Posted 08 February 2009 - 04:15 AM

nice one .. +rep :)
  • 0

#5 WingedPanther73

WingedPanther73

    A spammer's worst nightmare

  • Moderator
  • 17757 posts
  • Location:Upstate, South Carolina
  • Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
  • Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others

Posted 08 February 2009 - 04:39 AM

nice! +rep
  • 0

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

My MineCraft server site: http://banishedwings.enjin.com/





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download