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; } <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; } <p class=”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