Archive for the ‘CSS Basic’ Category

« Older Entries
Newer Entries »

CSS Span

Monday, October 5th, 2009

What Does CSS Span ?

Spans are very similar to divisions (div) in CSS, except they are an inline element versus a block level element.

No linebreak is created when a span is declared.

You can use the span tag to style certain areas of text, as shown in the following,

Look at this Examples :

<span class="bold">Css Spans</span>

Then in my CSS file:

span .bold{
font-wight: bold;
}

The final result is: Css Spans.

The purpose of this article to provide you with a basis for using CSS in an (X)HTML file.

Tags: , ,
Posted in CSS Basic | No Comments »

Css Div

Monday, October 5th, 2009

What Does CSS Div ?

Divisions are a block level (X)HTML element used to define sections of an (X)HTML file.
A division can contain all the parts that make up your website. Including additional divisions, spans, images, text and so on.

You define a division within an (X)HTML file by placing the following between the tags:

<div>
Site contents go here
</div>

Though most likely you will want to add some style to it. You can do that in the following fashion:

<div id="mainBox">Site contents go here</div>

The CSS file contains this:

#mainBox{
width: 70%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}

Now everything within that division will be styled by the “mainBox” style rule, I defined within my CSS file. A division creates a linebreak by default. You can use both classes and IDs with a division tag to style sections of your website.

Tags: , ,
Posted in CSS Basic | No Comments »

CSS ID Selector and Class Selector

Friday, September 25th, 2009

In addition to the standard way of writing CSS style or giving properties inherent in the HTML selector, we can also provide their own name on a particular element by making the ID selector and Class selector.

ID Selector is a selector that can be used only once in an element, while the Class Selector can be used several times on an element.
Writing ID Selector in CSS begins with the symbol # (octothorpe), while writing the CSS class selector begins with a dot (.)
Example:

<html>
<head>
<title>CSS ID Selector</title>
<style type=”text/css”>
#header_title {
font-size:24px; font-weight:bold; color:#CC0000;}
#header_desc {
font-size:18px; font-weight:bold; color:#000066;}
.main {
font-family:Arial, Helvetica, sans-serif; line-height: 9px; }
</style>
</head>
<body>
<div>
<p id=”header_title”>CSS Syntax<br/><span id=”header_desc”>About CSS Id Selector and Class </span></p>
</div>
<div>
<p>Fill Your Stuff here</p>
<p>Fill Your Stuff here 2</p>
</div>
</body>
</html>

When viewed in a browser will be like this:
css-id-selector-result

Tags: , , , ,
Posted in CSS Basic | 1 Comment »

CSS Font and Text

Thursday, September 17th, 2009

What Does CSS Font ?

Font property serves to set the font on an HTML element, be it type, size, style or its variations.

The font family of a text is set with the font-family property.

The font-family property should hold several font names as a “fallback” system. If the browser does not support the first font, it tries the next font.

Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Note: If the name of a font family is more than one word, it must be in quotation marks, like font-family: “Times New Roman”.

There are several kinds of font properties include:

  • Font, to set the overall values that are used on an element.
    example:
p {
   font: bold 20px   Arial, Helvetica sans-serif;
  }
  • Font-family, to set the model / type of font in an element.
    example:
p {
   font-family:"Verdana" Arial  Helvetica sans-serif ;
  }
  • Font-size, to adjust the font size on an element. Value can be a unit, percentage, or inherit, xx-small, x-small, small, smaller, xx-large, x-large, large, larger and medium.
    example:
p {
  font-size:xx-large ;
  }
  • Font-style, to set the model / style of the font in an element. Value can be inherit, italic, normal and oblique.
    example:
p {
   font-style:italic ;
  }
  • Font-weight, to set the thick / thin font in an element. Value can be bold, normal, inherit, bolder, lighter, or the unit number from 100-900.
    example:
p {
   font-weight:bold;
  }

What Does CSS Text ?

Text property serves to set the style or style of text in an element.
There are several types of Text properties include:

  • Text-align, to determine the alignment of text on a elemen.Nilainya can be left, center and right.
    example:
p {
   text-align:left;
  }
  • Text-transform, to change the text to be large or small letters on an element. Its value can be either uppercase, lowercase, capitalize, and none.
    example:
p {
  text-transform:uppercase;
  }
  • Text-indent, to set the distance in the first text in a paragraph in an element. Its value can be either inherit or units.
    example:
p {
   text-indent:4px;
  }
  • Line-height, to set the distance between lines of text in an element. Its value can be either a percentage or units.
    example:
p {
  line-height:14px;
  }
  • Letter-spacing, to adjust the distance of space between the text of an element. Value can be inherit, normal, or the percentage of units.
    example:
p {
   letter-spacing:1px;
  }
  • Text-decoration, to specify the text decoration on an element. Value can be underline, line-through, overline, blink, and none.
    example:
p {
   text-decoration:underline;
  }

Tags: , , ,
Posted in CSS Basic | No Comments »

« Older Entries
Newer Entries »