CSS Beginner tutorial 11 : Background Images

There are a number of properties involved in the manipulation of background images. But the property background can deal with them all. For example


body {
background: white url(http://www.yoursite.com/images/bg-image.jpg) no-repeat top right;
}


There are some other properties, which you can use instead using above single property. These properties are as follows.

• background-color
• background-image 
• background-repeat 
• background-position

The details of these properties are below.


background-color : 
It is the color of background.


background-image : 
It is the location of the image.


background-repeat : 
It will set, how the image repeats itself. This can be 

• repeat
• repeat-y         (repeating on the 'y-axis', above and below) 
• repeat-x         (repeating on the 'x-axis', side-by-side)
• no-repeat       (which shows just one instance of the image).

background-position : 
It can be top, center, bottom, left, right or any sensible combination, just like as above.

CSS Beginner tutorial 10 : Shorthand Properties

Shorthand Properties allow a string of values, replacing the need for a number of properties. These are represented by values separated by spaces. For example, margin, padding and border-width allow you to set margin-top-width, margin-right-width, margin-bottom-width etc. in the form of property: top right bottom left; For example we have following code to set border width. of a paragraph


p {
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 20px;
}


This can be summed up into one shorthand property as follows.


p {
border-width: 1px 5px 10px 20px;
}


Further, border-width, border-color and border-style can also be summed up as follow.


p {
border: 1px red solid;
}


By stating just two values in format margin: 1em 10em; , the first value will be the top and bottom and the second value will be the right and left.


Font-related properties can also be gathered together with the font property. For example


p {
font: italic bold 1em/1.5 courier;
}


Where the '/1.5' is the line-height.

CSS Beginner tutorial 9 : Pseudo Classes

Many CSS proposals are not supported by all browsers, but there are four pseudo classes that can be used safely when applied to links. Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They take the form of selector:pseudo class, simply with a colon in between the selector and the pseudo class. For example property: value;


The four pseudo classes that can be used safely when applied to links are following.


link :
It is for an unvisited link.
visited :
It is for a link to a page that has already been visited.
active :
It is for a link when it is gains focus, for example, when it is clicked on.
hover :
It is for a link when the cursor is held over it.




CSS Code for above four classes are :


a.snow:link {
color: blue;
}


a.snow:visited {
color: purple;
}


a.snow:active {
color: red;
}


a.snow:hover {
text-decoration: none;
color: blue;
background-color: yellow;
}


Although CSS gives you control to bypass it, maintaining different colours for visited links is good practice as many users still expect this. As pseudo classes (other than hover) are not often used, this is a feature that is unfortunately not as common as it once was. Because of this, it is less important than it used to be, but if you are looking for the optimum user response, then you should use it.


Traditionally, text links were blue if not visited and purple if visited, and there is still reason to believe that these are the most effective colours to use, although, again, with the increasingly widespread use of CSS, this is becoming less commonplace and the average user no longer assumes that links must be blue or purple.

CSS Beginner tutorial 8 : Grouping and Nesting in CSS

Grouping :
By using Grouping, you can give the same properties to a number of selectors without having to repeat them by separating the selectors by commas. For example, we need to assign same property to different selectors as follows.


h2 {
color: red;
}
.titleclass {
color: red;
}
.descclass {
color: red;
}


By using grouping, we can write them as


h2,  .titleclass , . .descclass  {
color: red;
}


Nesting :
In well structured CSS, there is no need to use many class or ID selectors. Because we can specify properties to selectors within other selectors. For example


#top {
background-color: #cccccc;
}
#top h2 {
color: #ff0;
}
#top p {
color: red;
}


It will remove the need for classes or ID's if it is applied to HTML that looks like as follows.


<div id="top">
<h2>Hello Word !</h2>
<p>This is a paragraph</p>
</div>


By separating selectors with spaces, It is saying 'h1 inside ID top is colour #ff0' and 'p inside ID top is red'.

CSS Beginner tutorial 7 : What is Class and ID Selectors

In the CSS, a class selector is a name preceded by a full stop (.) and an ID selector is a name preceded by a hash character (#). It might look like as follows.


#top {
background-color: #cccccc;
}


.intro {
color: red;
}


The HTML refers to the CSS by using the attributes id and class. It could look something like as follows.


<div id="top">


<p class="intro">This is my text.</p>


</div>


The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one. You can also apply a selector to a specific HTML element by simply stating the HTML selector first, so p.desc will only be applied to paragraph elements that have the class 'desc'.

CSS Beginner tutorial 6 : CSS Borders

Borders can be applied to most HTML elements within the body. To make a border around an element, all you need is border-style. The values of border can be solid, dotted, dashed, double, groove, ridge, inset and outset. For example,

border-style: solid;

You can set the width of border by using border-width property, which is usually in pixels. For example

border-width: 3px;

The four sides of border can be set individually by using these properties, border-top-width, border-right-width, border-bottom-width and border-left-width. e.g

border-top-width : 10px;
border-right-width : 5px;
border-bottom-width : 10px;
border-left-width : 5px;

The color of border can be set by "border-color" property. For example

border-color: red;

After applying all properties to h2 tag, It 'll look like as follow.

h2 {
border-style: dashed;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red;
}

It will show h2 tag, in browser as follows.

border

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 )

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.

CSS Beginner tutorial 2 : Applying CSS to HTML

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

1. In-line
2. Internal
3. 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:

1. In-line
2. Internal
3. External

We discuss these ways in details in next tutorial.