How to add CSS to a Web page

HTML is where you should start if you’re creating a website. This markup language allows for the addition of headings, paragraphs, graphics, tables, forms, lists, and much more. The presentation and arrangement of these items on the website are not very possible to do with html.

We can do this using CSS. The browser renders a page according to how CSS specifies it should appear. CSS can be used for a wide range of stylistic purposes, such as altering a page’s background and text color, getting rid of links’ underlines, and animating images, text, and other HTML elements.

Knowing how to include CSS in your website will provide you with more control over how it appears.

Ways to add CSS in HTML

CSS can be inserted into HTML documents in three different ways:

Inline CSS

Internal CSS

External CSS

Let’s discuss each one by one.

Inline CSS

You can include CSS in HTML by using inline CSS. You apply a style attribute and insert it within the opening tag of an HTML element to add inline CSS.

<h1 style = "color:red;"> Codeshruta </h1>

In the above html code, we use Inline CSS. Here we add a style under the html opening tag in which first we write out the css property color and assign a property value red and close our opening h1 tag.

Similarly, you can add other CSS properties too, in the same style. For example :

<h1 style = "color:red; font-size:12px; opacity:0.6;"> Codeshruta </h1>

Here you can see we add the next css property value just next to the previous css value.

Example of Inline CSS

<p style = "color: blue; text-transform: uppercase;">Don't forget to check out our others blog posts.</p>

You can see we add the color blue and text-transform uppercase CSS properties in our paragraph tag.

Internal CSS

Inline CSS appears as the same line as html tag but internal CSS adds in html head tag using style tag. A CSS property and value are still set, but now they are enclosed in brackets and defined by a CSS selector rather than being contained within a style attribute.

CSS Introduction for web developers

This rule set is then contained within the tags and is located in the HTML file’s head section.

<!DOCTYPE html>
<html>
<head>
<style>
h1{  
color: blue;  
text-transform: uppercase;
}
</style>
</head>
<body>
<h1>We are awesome.</h1>
</body>
</html>

It is recommended to use internal CSS rather than inline CSS. Instead of repeatedly adding the same style attributes to elements, internal CSS enables you to style groups of elements at once. Additionally, internal CSS is perfect for one-page websites since it divides the HTML and CSS into distinct sections while keeping them in the same document.

If your website consists of multiple pages and you want to make changes to them all, you must open each HTML file for those pages and add or modify the internal CSS in each head section, and here you can use external CSS.

Example of Internal CSS

<!DOCTYPE html>
<html>
<head>
<style>
p{  
color: pink;  
background: black;
}
</style>
</head>
<body>
<p>We are awesome.</p>
</body>
</html>

Here you can see we changed the text color of the paragraph element on the web page to a pink color and the background is black. To do this, we add a style tag to the head tag and add a paragraph selector and set our color and background css property and close our paragraph selector.

External CSS

Although it is styled similarly to internal CSS, external CSS is not contained within tags or the head section of your HTML code.</span> It is stored in an external file with the “.css” extension. You only need to include a link to this external stylesheet in the head section.

Add this type of link tag to your head tag to connect or create an external CSS file :

<link rel="stylesheet" href="style.css">

Here style.css is an external css file name and we add this link tag in our html head tag.

For a number of reasons, using external CSS is regarded as the best practice. It’s the fastest option because you may alter the CSS in this external file and apply it to your entire website. Additionally, it is the quickest and most SEO friendly. Your HTML page will be simpler for search engines to read if CSS is stored in a separate file. Additionally, it makes it possible for a visitor’s browser to store the CSS file to speed up their subsequent visits to your website.

Example of external CSS

Html code :

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Be happy always with you!</p>
</body>
</html>

External CSS file code (style.css) :

p{  
color: black;  
background: green;
}

Conclusion

With CSS, changing the appearance of your website is simple. You can quickly and easily apply CSS to your website using any of the ways mentioned above to make it reflect the distinctive look of your website. We have a preference order here.

CSS Introduction for web developers

According to the following guidelines, all of the styles on a page will “cascade” into a new “virtual” style sheet, with Inline style having the highest precedence after that, External style and then internal style sheets are used next. An inline style is given top importance and will take precedence over both internal and external styles as well as browser defaults.

Thank you for reading!

Written by: Vipin