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