Types of CSS

Types of CSS

CSS can be added into our website in following three ways:

  • External CSS (In a separate file)
  • Internal CSS (At the top of a web page document)
  • Inline CSS (Right next to the text it decorates)

External CSS

As discussed above, we have already created a file with name “style.css” in folder “styles”. But, our HTML file i.e. index.html doesn’t know its location. Therefore, we need to add given code in the header section [between <head> and </head>] of our HTML file:

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


Example

External CSS Example

As of now, we have just added the location of CSS file but no code into our CSS file. Thus, the output looks something like this:

External CSS Output

Now we will add codes into our CSS file. We will make the Header Red, Sub Header Blue and the paragraph Green as mentioned below:

External CSS File

Now, the output looks something like this:

External CSS Final Output

CSS code

From above example, we can derive that a CSS code includes following:

External CSS Code

  1. Selector: A selector helps us to know exactly for which element we want to add a given style. In the diagram above, we are applying green colour for all the <p> tags. This type of selector is called Element selector [also known as tag or type selector]. If you need to style a different element, say <h1>, just change the selector name in CSS.
    There are many types of selectors. Following are the three mostly used selectors:
Selector nameDescriptionExample
1. Element selectorUnder this category, we define a common style for an individual html tag and it reflects same style for that tag, wherever it is used.p {

  color: green;

}

This will reflect green colour for all the p tags.

2. ID selectorUnder this category, we give ID to any html tag, and for that ID we define a style. Same ID cannot be assigned to multiple HTML tags; hence it is mostly used in case unique style is needed for a specific HTML element.

In CSS, we define it using hash-symbol (#).

CSS:
#my-id1 {
  color: green;

}
HTML:

<p id=”my-id1″>

This will reflect green colour for any html tag which has ID equal to “my-id1”.

3. Class selectorUnder this category, we define a class for any html tag, and for that class we define a style. It is the most used CSS selector because same class can be assigned to multiple html tags, hence a CSS style can be reused.

In CSS, we define it using a dot(.).

CSS:
.my-class {
  color: green;

}
HTML:

<p class=”my-class1″>
This will reflect green colour for any html tag which has class equal to “my-class1”.

 

 

 

  1. Declaration: A declaration is a field value pair, where field is one of the element properties that you want to change, and the value is the required change. E.g. color: red;
  2. Property: As discussed above, property is the attribute of an element which can be modified. Possible attributes for paragraph tag i.e. <p> can be color, alignment, font, etc.
  3. Property Value: This is the possible value for a property and changes accordingly. For color, it can be any colour in Hexadecimal or colour name.

Important points regarding CSS declaration

  • The whole structure of a CSS is called a rule or rule set. Each rule set must be declared within curly braces ({ }).
  • Each Declaration must be in the form of a field: value or Property: Property value pair i.e. it must have a colon (:) between field and value.
  • Within each rule set, we can have multiple declaration. Each declaration must be terminated or separated from one another via semicolon (;).

Internal CSS

In above examples, we have used an external CSS file to place our styling code, but you can also add all these codes altogether with HTML code. For that, you need to add CSS under <style> </style> within the header section [between <head> and </head>] of HTML. This can be better understood from given example:

Syntax

Internal CSS Syntax

Example

We will take our old example of Sachin Tendulkar. We will remove the link between External CSS and add same CSS within our HTML code:

Internal CSS Example

Output

Here, we have just added an extra CSS declaration for <p> tag and made it bold. Thus, the output looks something like this:

Internal CSS Output

Inline CSS

Suppose, you have applied CSS for all <p> tags, and there is a need to add unique style for one of the <p> tag, then you will have to use Inline CSS. An Inline CSS is used to add unique style to a single element.
To use inline style, we add “style” as an attribute of that element.

Syntax

<tag_name style= “<Relevant Style Code>”> </tag_name>

Example

Inline CSS Example

In the previous example, we will just add one inline style with internal CSS.

Output

Thus, the output will be as shown below:

Inline CSS Output

CSS Priority

From above example, we can also conclude that an Inline CSS can override another type of CSS. Thus, the priority of CSS that will be followed by the webpage will be as follow:

  1. Inline Style (Highest Priority)
  2. External and Internal Style (they have nearly same priority)
  3. Browser’s Default (Even browser apply CSS to our elements)

 

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.