Monday, May 7, 2012

CSS Beginner tutorial 5 : Box Model

The Box Model :
Margins, padding and borders are all part of the Box Model. The Box Model consists of following patterns.

In the middle you have the content area
Surrounding content area you have the padding
Surrounding padding you have the border
Surrounding border you have the margin.

Visually, it can be represented as follow.

box model

CSS Beginner tutorial 4 : Margins and Padding

Margin and padding are the two most commonly used properties for spacing-out elements. A margin is the space outside of the element, whereas padding is the space inside the element.
For example, we have following CSS code for h2 tag:

h2 {
margin: 8px;
padding: 10px;
}

<h2>This is secondary Heading.</h2>

Then text inside h2 tag will look like as follow. ( margin and padding are shown with different colors for better understanding, margin is in light and padding is in dark.)

margin and padding

The four sides of an element can also be set individually. Following properties you can use, to set the element side individually.

margin-top, margin-right, margin-bottom, margin-left ( For Margin )

padding-top, padding-right, padding-bottom, padding-left. ( For Padding )

Sunday, May 6, 2012

CSS Beginner tutorial 3 : CSS Selectors, Properties, and Values

Selectors are the names given to styles in internal and external style sheets. For each selector there are 'properties' inside curly brackets, which simply take the form of words such as color, font-weight or background-color etc. A value is given to the property following a colon and semi-colons separate the properties. For example

body {
font-size: 0.7em;
color: blue;
}

Above code will apply the given values to the font-size and color properties to the body selector. When this is applied to an HTML document, text between the body tags will be 0.7 ems in size and blue in colour. Another example

#desc {

font-size: 0.5em;

color: red;

}

The above code will apply the values to all HTML elements having id equal desc. (e.g having id="desc" attribute).

Lengths and Percentages :
There are many property-specific units for values used in CSS, but there are some general units that are used in a number of properties and it is worth familiarising yourself with these before continuing.

em ( e.g font-size: 2em ) is the unit for the calculated size of a font. So "2em", for example, is two times the current font size.

px (e.g font-size: 12px) is the unit for pixels.

pt (e.g font-size: 12pt) is the unit for points.

% (e.g font-size: 80%) is the unit for percentages.

Other units include pc (picas), cm (centimetres), mm (millimetres) and in (inches). In case if a value is zero, you do not need to state a unit. For example, if you wanted to specify no border, it would be border: 0.

Saturday, May 5, 2012

CSS Beginner tutorial 2 : Applying CSS to HTML

There are three way, to apply CSS to HTML tags, These are

In-line
Internal
External

In-line :

In-line styles are plonked straight into the HTML tags using the style attribute. For example, they look something similar as follow.

<p style="color : blue"> This is some text. </p>

This will make text color blue inside that paragraph .

Internal :
Internal (or embedded) styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page. For example, It look like as follow.

<head>
   <style type="text/css">

   p { color : blue };

   div { text-align : left }

   </style>
</head>

This will make all the paragraphs in the page blue and text inside all div element start from left side.

External :
External styles are used for the whole, multiple-page website. There is a separate CSS file. which has file extension ".css" e.g mystyle.css , which looks like as follow>

p { color : blue };

div { text-align : left }

This external CSS file must linked to each HTML page. We link CSS file to HTML page by using <link> tag as follow.

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>

CSS Beginner Tutorial 1 : What is CSS

CSS stands for Cascading Styles Sheets, It is a way to style HTML elements. Whereas the HTML is the content, the style sheet is the presentation of that document. Styles don't smell or taste anything like HTML, they have following format

'property: value'

For example

color : blue

It applys to HTML tag as follow:

<p style="color:blue">The sun rises in the east.</p>

There are many properties, which can be applied to HTML tags, to present HTML in different ways.

There are three ways, which can be used to apply CSS to HTML tags, These are:

In-line
Internal
External

We discuss these ways in details in next tutorial.