How to Use CSS in HTML? - Scaler Topics

Overview

In this era of technology, we encounter numerous websites every day. You visit and use an assortment of various websites, ranging from Amazon to Facebook, and so on. These websites draw their target audiences not just on the basis of their functionalities, but also as a result of their attractive layouts.

Cascading Style Sheets are pillars of web development used to enhance the layout of web components. They help to modify the presentation of the website and induce portability by making the website presentable across multiple devices.

Getting Started with HTML/CSS

Markup Languages like HTML and XML are rendered visually appealing by using cascading stylesheets. CSS can help alter the styling aspects of the web components such as the background color on the page, the font face, etc. To sum it up, CSS enables you to exercise complete control over the presentation of your website.

How to Link HTML with CSS?

Let's assume that you have created a website using HTML and it functions exactly the way you want it to. Now, you intend to make it visually appealing to the target audience by adding CSS to it.

There are 3 ways of linking CSS with HTML:

Inline CSS- This allows users to put CSS properties within HTML elements
Internal CSS- This means defining the CSS properties within the <style> </style> tags nested within the <head> tag.
External CSS- This means linking an HTML document with a separate file containing the CSS properties.

Let us see how these different operations are carried out.

How to Add Inline CSS to HTML?

The method of inline CSS or embedded stylesheet allows users to specify CSS properties within HTML elements themselves. This means that CSS properties are defined within the HTML tags.

The tag name is followed by the "style" attribute to specify the CSS properties for the tag.

Inline CSS is always given preference over internal and external CSS alternatives. This means that if you have specified contradictory CSS properties internally/externally, only the inline CSS properties would be rendered. This makes them beneficial for specialized and targeted formatting.

Syntax

Example-1

Let us take a look at the implementation of inline CSS.

In the aforementioned code, the values 'pink' and 'center' have been assigned to the CSS properties 'color' and 'text-align' respectively. The required changes would be made only within the <h1> </h1> tag.

Output: How to Add Inline CSS to HTML example

Example-2

Let us check out another example.

In this example, you can clearly differentiate the different CSS properties associated with the tags <h1> </h1> and <span> </span>.

The CSS property "text-align" within the <h1> </h1> tags is used to align the text "Welcome to Scaler" towards the center of the webpage.

The CSS property "color" within the <span> </span> tags is used to render the text within the <span> </span> tags in blue color.

Output:

How to Add Inline CSS to HTML example 2

How to Add Internal CSS to HTML?

To deal with the redundancy of specifying similar CSS properties for each tag, inline CSS is replaced with options that are less tedious and faster to execute.

If you intend to format all the tags of one particular type in your document, internal CSS is your go-to. Consequently, using internal CSS is a better alternative for pages with more content than inline CSS.

Syntax

To use internal CSS, the <style> </style tags must be nested within the <head> </head tags of the HTML document.

After specifying the name of the tag you intend to format, you can modify its CSS attributes and values.

Example-1

Let us check out an example to see how internal CSS works.

In this code, we can see how the CSS properties 'background-color', 'color', and 'text-align' for the tags <body> and <h1> respectively are specified within the <style> </style> tags.

Output: How to Add Internal CSS to HTML example

Example-2

Let us take a look at another example to illustrate how the same CSS effects could be applied onto various instances of the same tag without writing a single extra line of code.

Output:

How to Add Internal CSS to HTML example 2

This is how the CSS properties are defined for the <P> tags are assigned to every instance of it. The 2nd line is deprived of the formatting effect because it is not nested within <p> </p> tags.

How to Add External CSS to HTML?

Do you know that you can format the entire appearance of your HTML document by attaching just one file? Attaching an external CSS file to the HTML document is the best practice for linking CSS with HTML. You must create an external file with the extension ".css" and then attach it to the link section of the HTML document. Storing the file externally makes it easier for the browser to read your CSS specifications and render them in a fast and smooth manner.

Syntax

The external stylesheet "styles.css" of type "text/css" is linked to the HTML document.

Example-1

The stylesheet scalerstyle.css is linked to this html document.

Let us take a look at the stylesheet for this HTML code.

The tags <h1 and <P> have been formatted with the CSS properties linked externally.

Output:

How to Add External CSS to HTML example

Example-2

Let us check out another example.

This HTML file is attached to an external file 'scalerstyle.css'

In this example, all the CSS properties including 'font-family', 'color', and 'font-weight' have been applied to the <div> tag only.

Output: How to Add External CSS to HTML example 2

This is how you can link CSS with your HTML documents externally. This process is not only fastidious, but it also reduces redundancy and is more browser-friendly.

Adding All the Three Types of CSS

It is possible for you to cascade or layer different CSS properties one after the other. This means that you can use inline CSS, Internal CSS, and external CSS all on the same HTML document. There is a pre-established hierarchy that browsers follow when they are rendering CSS. Inline CSS is always more prevalent than internal CSS or external CSS and overrides them all. Similarly, internal CSS holds more authority than external CSS. This means that inline CSS has higher specificity than internal CSS, which has higher specificity than external CSS.

In the above code, all three examples of linking CSS have been used. The text within the <h1> tags uses inline CSS. The text within the <span> tag uses internal CSS, whereas the text within the <div> tag uses an external stylesheet scalerstyle.css.

Let us take a look at this stylesheet.

Output:

Adding All The Three Types of CSS example

Example-2

Now, if we make slight alterations to the 'scalerstyle.css' stylesheet and specify properties for the <h1> tag externally, we can still see no changes in the final output.

Output: Adding All The Three Types of CSS example 2

This is because of CSS specificity. The browser gives more preference to inline CSS over internal CSS and external CSS. Consequently, there are no changes in the final output. inline CSS specificity> internal CSS specificity> external CSS specificity.

Conclusion

CSS is used to enhance the attractiveness of web components written in markup languages.
There are 3 methods of linking CSS with HTML: inline, internally, and externally.
Inline CSS allows users to specify CSS properties within the HTML elements they are intended to format.
Internal CSS allows users to format CSS properties within the <style></style> tags declared in the head section of the document.
External CSS allows users to format CSS properties by externally linking the HTML document with a separate CSS file.
In case multiple methods of linking CSS are used for the same element, inline CSS is given the most priority, followed by internal CSS, and external CSS respectively.
This means that inline CSS has the highest CSS specificity.