Let us see how links in CSS are styled.

With CSS, links can be styled in different ways. Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

Example
a {color: hotpink;}

Below are the four links states:
1. a:link – a normal, unvisited link
/*syntax of unvisited link */
a:link {
color: #FF0000;
}

2. a:visited – a link the user has visited
/*syntax of visited link */
a:visited {
color: #00FF00;
}

3. a:hover – a link when the user mouses over it
/*syntax of mouse over link */
a:hover {
color: #FF00FF;
}

4. a:active – a link the moment it is clicked
/*syntax of selected link */
a:active {
color: #0000FF;
}

 
In CSS pseudo-class is a keyword added to selectors. It defines a special state of an element. In other words, Pseudo class selectors are CSS selectors with a colon preceding them. CSS pseudo-classes add special effects to some selectors. For example, they can be used to determine the style of an element when a user hovers it. In the examples above link, visited, hover, active are pseudo classes.

Check out the below syntax of pseudo-classes:

selector:pseudo-class {
property:value;
}

pseudo classes can be used with class as well. See the syntax:

selector.class:pseudo-class {
property: value;
}

List of pseudo-classes keywords:

:link
:visited
:active
:hover
:focus
:first-child
:last-child
:nth-child
:nth-last-child
:nth-of-type
:first-of-type
:last-of-type
:empty
:target
:checked
:enabled
:disabled

 

Easy thing is that pseudo-class names are not case-sensitive while it is important to note that a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! This sequence is considered standard. Pseudo classes are different from pseudo elements. PSEUDO-ELEMENTS are used to address sub-parts of elements. Unlike pseudo-elements, pseudo-classes can appear anywhere in selector chain. There is double colon when a pseudo element is used.

 

 

 

 

 

 

Identification and grouping of elements (class and id)

You can use class and id to specify properties for selected elements.
Uniqueness is achieved using id attribute while, class can be used to separate things out, so that a particular set of elements can be styled using class

Suppose you want to color one particular headline differently than the other headlines on your website. So you want to group your links into different categories and give each category a special style.

Grouping elements with class

Let’s say that we have two lists of links of different beverages. The HTML code could look like this:
<p>Alcoholic drinks</p>
<ul>
<li><a href=”vo.html”>Vodka</a></li>
<li><a href=”be.html”>Beer</a></li>
<li><a href=”wh.html”>Whiskey</a></li>
</ul>

<p>Non alcoholic drinks</p>
<ul>
<li><a href=”ma.html”>Maaza</a></li>
<li><a href=”sl.html”>Slice</a></li>
<li><a href=”ko.html”>Kokam Sarbat</a></li>
</ul>
I want that the alcoholic drink links to be brown, the non alcoholic drink links to be mango-orange and the rest of the existing links on the webpage to stay blue.

For this, I need to divide the links into two categories. This is where I need a class to each link using the attribute class.

Let us try to specify some classes in the example above:
<p>Alcoholic drinks</p>
<ul>
<li><a href=”vo.html” class=”alcoholic”>Vodka</a></li>
<li><a href=”be.html” class=”alcoholic”>Beer</a></li>
<li><a href=”wh.html” class=”alcoholic”>Whiskey</a></li>
</ul>

<p>Non alcoholic drinks</p>
<ul>
<li><a href=”ma.html” class=”nonalcoholic”>Maaza/a></li>
<li><a href=”sl.html” class=”nonalcoholic”>Slice</a></li>
<li><a href=”ko.html” class=”nonalcoholic”>Kokam Sarbat</a></li>
</ul>

Now it’s time to define special properties for links belonging to alcoholic and non alcoholic drinks, respectively.
a {
color: blue;
}

a.alcoholic {
color: #990012;
}

a.nonalcoholic {
color: #DC8700;
}

This way we can define the properties for elements which belong to a certain class by using .classname in the style sheet of the document.

 

 

Identification of element using id

Using class we have seen grouping elements, sometimes we require that we need to identify one unique element. Tthe attribute id is used for this purpose.

The attribute id distinguishes two elements in the same document, so there can only be one unique element with the same id. Take a look at below usage of id:
<h1>Vodka</h1>

<h2>Beer</h2>

<h2>Whiskey</h2>

<h1>Red wine</h1>

<h2>White wine</h2>

<h3>Kokam Sarbat</h3>

Every drink is unique and we want to style the name using id attribute.

<h1 id=”d1″>Vodka</h1>

<h2 id=”d2″>Beer</h2>

<h2 id=”d3″>Whiskey</h2>

<h1 id=”d4″>Red wine</h1>

<h2 id=”d5″>White wine</h2>

<h3 id=”d6″>Kokam Sarbat</h3>

Obviously, I’m trying with the red wine. This can be done accordingly with CSS:
#d4 {
color: red;
}
The CSS Box Model
If you could observe carefully every element in web design is actually a rectangular box. So you can consider all HTML as boxes. When we talk about CSS “box model” it means we’re talking about the design and layout.

The CSS box model consists of: margins, borders, padding and the actual content.

The image below illustrates the box model:

boxmodel
CSS box-model

Explanation of the different parts:

Content – This is the content box, where text and images appear
Padding – It is around the content. It is transparent
Border – Border goes around the padding and content
Margin – An area outside the border. It is transparent.
The box model allows us to add a border around elements and also it allows us to define space between elements.

Example
div {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
Width and Height of an Element
For cross browser competencies we need to understand how the box model works.

When we set the width and height properties of an element in CSS, we just set the width and height of the content area. The full size of an element, can be calculated using padding, borders and margins.
Let us style a

element to have a total width of 350px:

Example
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
You’re good at math, right?
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

To avoid cross browser problems. add a to the HTML page.
Grouping of elements (span and div)

The and

elements are used together with the attributes class and id.

The and

HTML elements are at the core of CSS.
Grouping with

In CSS, adds visual features to your document online.

There were various brands represented at the
conference, including Lakme,
Nivea, Gillette, and Ponds.

The CSS belonging to it:
span.brandname {
font-style:italic;
color:#006;
}

Grouping with

So now it’s vivid that we use within a block-level element while we use

to group one or more block-level elements.

Let’s go through the below example;

  • Narendra Modi
  • Atal Bihari Vajpayee
  • Manohar Parrikar
  • Arun Jaitely
  • jSushma Swara
  • Smriti Irani
  • Sharad Pawar
  • Laluprasad Yadav
  • Mamta Banerjee
  • Mayavati
  • Praful Patel
  • Dr.Manmohan Singh

You like the styled colors?

#BJP {
background:green;
}

#UPA {
background:yellow;
}

Now we’ve seen how to group and identify, more or less, all parts of a document using CSS.

 

 

Advertisements