CSS : It's Different Types And How To Apply CSS To Your Website?

In today’s article, we will be learning about What is CSS? What are different types of CSS and How to apply a CSS to your website?

Therefore let’s first see What is CSS?

CSS stands for Cascading Style Sheet. It is a style sheet language used for Describing the presentation of a document written in markup language. Such as HTML. CSS is ruled based language that applies to style to your HTML element. You can write CSS rules anonymous and modify properties of those elements such as color, background color, width, border thickness, fonts, size etc.

CSS helps the developer to create visually engaging web pages and use interfaces for web applications. CSS has a simple syntax and uses a number of English keywords to specify the names of various style sheet properties.

CSS has some variations or versions like CSS, CSS 2, CSS 2.1 and now we are using CSS. CSS3 is the latest version in which some additional features and properties are introduced. There are 3 types of CSS :

Inline CSS
External CSS
Internal CSS.

Let’s discuss each of them in detail :

Inline CSS :- It is used to apply a unique style to a single HTML element. It uses the style attribute of an HTML element.
External CSS : – It is a file containing any CSS syntax. The style information is not explicitly typed directly to the documents file. So selectors syntax is used to specify which style tag and what style attached to which area or a portion of the document tree.
Internal CSS or Internal style sheet :- It is also called an embedded CSS. An Internal style sheet is a section of the HTML page that contains style definition. Internal style sheets are defined by using style tags within the head area of the document.

Thus these are the 3 types of CSS. Let’s discuss each of them with the example: Consider that you have a basic .html file. and assume that there are different tags like heading, paragraph, and title tags etc. which are enclosed in body structure.

As you already know 3 types of CSS, the first type is Inline CSS which is a type of CSS which apply to an element. For example : heading tag or element. So with the help of Inline CSS, we can apply CSS to an element, directly without using a style tag.

So if you want to add the background to the heading tag then with the help of an Inline CSS you will have to write a code like :

<h1 style =”background-color : red”>heading1 </h1>

You can write the value of the property here. If you want to apply the red color to this heading tag then there are many ways to do this. We can write RGB color code or hexadecimal color code or the color name itself.

So we have written color name i.e. red and save it and launch in chrome. You can see that red color in the heading part of the browser.

Like this, we can align text also using text-align. Suppose if you want to apply a yellow color to the text, you will need a color property which sets the color of the text, the value may be a color name, RGB value or the hexadecimal code and check the output.

These were the examples of Inline CSS.

Now Let’s see the example of writing an Internal CSS :–

By default, inline CSS has more priority above internal CSS or External CSS. So let’s check the examples of internal CSS also.

If you want to apply internal CSS property then you should apply internal CSS in the head section with the help of style tag. You should close the style tag, there is some standard which we need to follow while writing internal CSS Like We should write type, it can be text or also can write relation – it can be style sheet. If you don’t write these then also it will not give you any error. Because the browser is smart enough to understand the missing code and correct it itself.

So let us go ahead and write CSS: For Ex : If you want to apply a background color to a body then you will have to write body tag, the background color and whichever color that you want to apply. Refresh the page and then it will show you that particular color.

Let’s see another example :

While applying or changing the color of the hading1 text which we have applied in 1st example i.e. red color. So it will not apply that color to this heading tag. Because Inline stylesheet has more priority above internal or external style sheet or CSS.

Here you can use a Trick: i.e. you can use “Important ” keyword which overwrites the default property and forces the CSS to apply whichever value is given before the important keyword.

So in this case, the new color will get applied now because of the “Important” keyword.

There is another CSS which is called external CSS. It is present in the external file. For that create an external CSS’s blank document as there is no need to add style tag because this file itself tells the browser that its extension is .css

So go ahead and save this file. It should not be a text file. Then include style .css in your web page. For that use the link tag, which is used for linking the tag to include external CSS to your web page. Type of link and relation and hypertext reference attribute is required. Hypertext reference attribute is used so that it will set the path of your external CSS file.

Write some CSS in this file for checking whether this file got included in our web page or not. Write whichever tag you want to add. Save the file and launch in chrome.

This is how external CSS runs. So thus you can give as much as property that you want to apply to a particular element and this is how external CSS, internal CSS, and Inline CSS works.

Visit – Hostdens

Best Web Hosting Company In USA

Vishwajit Kale

Vishwajit Kale blazed onto the digital marketing scene back in 2015 and is the digital marketing strategist of Hostdens, a company that aims to provide reliable web hosting solutions. Vishwajit is experienced in digital and content marketing along with SEO. He's fond of writing technology blogs, traveling and reading.