CSS is a Style Sheet whereas HTML is a markup language. Both are different from each other in structure, features, and application. However, they both serve a common goal, to build an attractive-looking website. HTML defines a website's structure and CSS beautifies it by its various properties. So, how to integrate CSS with HTML?
Before answering the question above, you should be familiar with different types of CSS. Different types of CSS don't mean any change in the properties or features but different ways to embed CSS with HTML. There are no 'types of CSS' but different methods to add CSS. Each method is given a name of its own, with a specific purpose and advantage.
So, how to integrate CSS with HTML? There are three ways to embed CSS with HTML:
| CSS Type | Description |
|---|---|
| Inline CSS | Inline CSS gives CSS style to a particular HTML element only. |
| Internal CSS | Internal CSS defines CSS for a particular webpage only. No other webpage can inherit the CSS style from internal CSS. |
| External CSS | External CSS is a whole new .css file. It can be added on multiple pages, therefore, defining style for various pages from a single CSS file. |
Inline CSS gives style to a single HTML element. We add inline CSS in the opening tag of the HTML element that we want to stylize. We add style attribute inside the opening tag and then write CSS as its value.
Remember that inline CSS is for a single element. It is used when we want to give a particular style to a specific element. Suppose, all the paragraphs in a webpage are red but we want to make the first paragraph blue in color with bold text formatting. One way is to use ID and class(covered later) or we can use inline CSS on the first paragraph to make it blue colored. For example: <p style="color:blue; font-weight:bold;">...</p>
NOTE: It is to be noted that inline CSS has the highest priority as compared to Internal or External CSS because it is more specific. The browser overrides the internal or external CSS applied to an element if it finds any inline CSS.
This is a paragraph.
In Internal CSS we define CSS for the whole webpage. Instead of writing inline CSS for each element, we take the help of CSS selectors and define a style for HTML elements.
For Example, if we give CSS to a paragraph selector, then all the paragraphs in that webpage will be of that CSS style. Unless that style is overridden by inline CSS. In a similar way ID, classes, tag selectors, pseudo selectors are used in Internal CSS to give style to HTML elements. All these selectors are covered later in the tutorial.
Internal CSS is written inside <style> tags. These tags are paired tags, i.e., one opening and one closing tag. All the CSS is written with these tags. You can write <style> tag anywhere in the page, within <head> or in <body> tag also. However, it is recommended to add internal and external CSS in the <head> tag as it will load the CSS before the webpage body.
In the opening style tag, you have to specify the type of code you are going to write inside <style> tag. In this case it is CSS, so, the tag will look like <style type="text/css">. Look at the example below:
This is a paragraph of text.
External CSS is written just like Internal CSS. It also uses ID, class, tag selectors, etc. However, it is written in a separate .css file and not in a <style> tag. The reason for using an external file for CSS is to increase the range of CSS style and promote reusing of code.
Take the example of our website coderepublics.com, we have the same CSS styling for every tutorial page. The font style is the same, heading style, links color, font size, navbar color, etc, are identical. So, do you think that we have written CSS for each page separately? No, we have an external CSS file that is added to all web pages. This is reusing of code, written once, used multiple times.
The External CSS file is embedded with HTML using <link> tag. You can use multiple link tags to add various CSS files. The <link> tag also needs the type of the linking file to be specified. Here, the rel attribute is used for defining the relationship of file with HTML document and the type attribute specifies the type. The href attribute specifies the name/location of the external CSS file. For example, <link rel="stylesheet" type="text/css">. Look at the syntax of using the <link> tag below:
This is a paragraph.
Follow Us: