Many of my readers asked me to write a series on CSS learning. So here is my attempt to help them. In this series I will focus on basics of CSS and how one can start learning CSS.

In this post we will learn,

  • Adding Style to document
  • CSS Selectors
  • CSS Compound Selectors
  • CSS Style Priority : Selector Specifity

Adding Style to document

You can add styles in three different ways,

image

Inline as attribute of element style can be added as below. Here we are adding colour to h1 element.

clip_image002

Problem with above approach is

  • Maintenance of style would be complex when size of document will grow.
  • You cannot reuse style

Second approach to include style is to put them as part of head section of document. You can create style in head section of HTML document as below,


<head>
 <title>Demo App</title>
 <style>
 h1
 {
 color:red;
 }
 </style>
</head>

Problem with above approach is

  • Maintenance would be complex as size of document will grow.
  • You cannot reuse style across various HTML files

Third and best approach to add styles in HTML document is using external CSS files. In this approach you put styles in a separate file with extension CSS. You add reference of external CSS file as below

image

In above approach you can reuse styles across various HTML files or documents.

CSS Selectors

You can select elements from HTML document to apply CSS on that in three ways.

image

Element Selector

If you want to apply same style to all appearance of a particular element on document then you apply style using Element Selector. In Element Selector you choose an element with its tag name and apply style on that. For example we want to apply colour red to all h1 elements appear on document.


h1
{
 color : red;
}

As you see above we are selecting element directly with the tag name. Above CSS will make colour of all h1 as red.

Class Selector

You can select an element on name of class associated with it and apply style on that. You select element on basis of class using dot (.) Usually you use class selector when you want to apply a particular style to different set of elements. For example you want to apply color blue style to various elements on document. In that case you will give a class name to all elements and then select them on basis of that class name. To understand it better let us consider below document


<h1 id="titlemessage">Education is must</h1>
 <p class="bluetext">Education in its general sense is a form of learning in
 which the knowledge, skills, and habits of a group of
 people are transferred from one generation to the next
 through teaching, training, or research. Education frequently
 takes place under the guidance of others, but may also be autodidactic
 </p>
 <h3 class="bluetext">Pledge to teach</h3>

As you notice that we have given same class name bluetext to p and h3 element on HTML document. Next in CSS we will select these element using dot (.)


.bluetext
{
 color:blue;
}

Above using class selector we selected class bluetext and applied style in that. So all elements with class name set as bluetext would have blue color.

Bottom line is you select an element on its class using dot (.) in CSS.

Id Selector

You can select an element on its id and apply style on that. You select element on basis of its id using hash(#) on CSS. So let us consider again above HTML we used in class selector. H1 element has id. If you want to apply color red using id you can do that as follows


#titlemessage
{
 color : gray
}

Compound Selector

You can select an element from document using more than one selector approach. Let us consider scenario that “You need apply a particular style to all h1 with id set as temp”. In this case you will use first element selector to select all h1 then id selector to filter particular h1. This approach of selecting element is known as Compound Selector.


h1#titlemessage
{
 color : red
}

Above compound selector will apply color red style to h1 element with id titlemessage on the document.

CSS Style Priority

Let us say you have applied CSS on a particular element at all three levels like

  • Inline in element
  • In head section of document
  • In external CSS file

Then which CSS will get applied to element. In above said scenario style applied at inline on element will get applied.

image

So always style applied as inline has highest priority. However there is way you can override this. By marking a style as important


#titlemessage
{
 color : red !important
}

 

As you see above we have marked color style as important so it will take highest priority while applying styles on elements.

Position based Priority

Now there could be one more scenario that you have style set more than once on the same document. In that scenario position based priority come to action.


#titlemessage
{
 color : red
}

#titlemessage
{
 color : blue
}

In above scenario style color blue will be applied because style which is defined as last in document has more priority.

Now come to the end of first post of CSS basic series. I hope you find this post useful to get started with CSS. Thanks for reading.

Advertisements

8 thoughts on “CSS Basics Part 1: Work with Selectors

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s