Types of CSS

by Barry Allen | Dec 25, 2020 | Website Development

Table of Contents

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

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:

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:

Now, the output looks something like this:

CSS code

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

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 name	Description	Example
1. Element selector	Under 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 selector	Under 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 selector	Under 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”.

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;
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.
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

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:

Output

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

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

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

Output

Thus, the output will be as shown below:

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:

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

0 Comments