html

What is CSS

CSS acronym of “Cascading Style Sheet” is a designing language that defines how to design an eye-catching webpage. It describes the appearance and formatting of a site that is created in a markup language. Usually, CSS is used along with HTML to set the styles of websites and user interfaces.

Cascading Style Sheet

Cascading means look, Style means design on HTML element/ adding style to web documents and Sheet means page e.g. web page document.

Types of CSS

CSS can be used in three ways:

  • Inline CSS: The inline CSS implements the style on one line.
  • Internal CSS: The internal CSS apply a specified style on a single page.
  • External CSS: The external CSS is a separate file and it can be used by multiple HTML documents/pages.

For this purpose, simply import the external link of CSS file within the head section.

CSS Syntax

Let’s take a look at the following css styling to have a better understanding of CSS syntax:

In the above-given snippet, p is a selector that points to an HTML element you want to style. While “background-color” is a property, and “gold” is its value.

Similarly “font-size”, and “text-align” are properties, while “medium” and “right” are values of these properties.

Example-1: This example will provide you an in-depth view of how inline CSS works:

<html>
<head>
<title>Inline CSS</title>
</head>
<body>
  <h1 style="background-color: aquamarine; color: violet;">Welcome to linuxhint.com</h1>
  <h1>The best site to read high quality articles</h1>
</body>
</html>

The above script implemented some style on the first <h1> element using inline CSS. It will display the following output:

In this example, we have only two <h1> elements and we have to implement the style on only one element so, we utilized the inline CSS. So, whenever we have to style a few HTML elements we can use inline CSS for each element.

But what if we have hundreds of HTML elements on a page e.g. we have hundred <p> elements on a webpage. Will we implement the style on each element separately? Technically we can do this but definitely, it wouldn’t be a good coding practice. It would be a time taking process.

Therefore when we have to implement a unique style on the entire page we will use the internal CSS.

Example-2: The following example will implement the same background color, text color to the entire body of the HTML document:

<html>
<head>
<title>Internal CSS</title>
<style>
body{
    background-color: gold; color: black;
}
</style>
</head>
<body>
  <h1>Welcome to linuxhint.com</h1>
  <p>The best site to read high quality articles<p>
</body>
</html>

The above snippet will provide the following output:

Now what if we have to style more than one pages? In such cases, the external CSS will be implemented. Only a single file can modify the entire look of the website. Therefore, It is recommended that always use external CSS.

If you are working with external CSS you must have to determine the <link> in the <head> section.

Example-3: This example will create a CSS file to define the style. The link to this file will be provided in the head section. Both HTML and CSS files are given-below:

External.html

<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" href="external.CSS">
</head>
<body>
  <h1>Welcome to linuxhint.com</h1>
  <p>The best site to read high quality articles<p>
</body>
</html>

External.CSS

body {
    background-color: brown;
    color: goldenrod;
    font-style: italic;
  }
 
  h1 {
    color: black;
    text-align: center;    
  }

The output will verify that the external CSS file is linked with the HTML file properly:

Cascade Style Order

Now you might have a question? What if we use inline, internal, and external CSS styles on a webpage? Then which of them will be implemented? Which style has maximum precedence?

Well! If there is a conflict in CSS style declaration then inline CSS will override internal CSS which in turn will override the external CSS. This means inline CSS has higher precedence than both internal and external CSS. The browser default styles have the lowest precedence.

If the various CSS styles are determined at the same precedence level then the style which is closest to the targeted element will have higher precedence.

Example-4: Let’s consider the following example which determines the multiple styles:

External.CSS file

body {
    background-color: brown;
    color: goldenrod;
    font-style: italic;
  }

Precedence.HTML file

<html>

<head>
  <link rel="stylesheet" href="external.CSS">
  <style>
    body {
      background-color: gold;
      color: black;
    }
  </style>
</head>

<body style="background-color: blueviolet; color: tomato;">
  <h1>Welcome to linuxhint.com</h1>
  <p>The best site to read high quality articles
  <p>
</body>

</html>

The above code determines three styles the output will verify that the inline CSS has highest precedence:

Advantages

  1. It saves a lot of time while developing any web page because we can use one CSS file within multiple HTML files. For example, we have multiple HTML files then we have to deal with their look, style, etc. Instead of implementing the style on each HTML file separately, it is better to import the CSS file in any HTML document you want to style.
  2. Web pages load quickly because CSS doesn’t utilize HTML attributes again and again instead it creates only one CSS rule for a tag and implements it to all of its occurrences in the HTML file.
  3. CSS provides easy maintenance as we can handle it in a single file. Suppose we have ten paragraphs in a document and we want to change their style. Instead of doing it ten times, we can do it one time in the CSS file and it will be applied to all the ten occurrences of the <p > element.
  4. CSS provides compatibility. This means it is compatible with multiple devices.

Conclusion

CSS is a design language that builds attractive web pages. It is used for creating styles and customizing HTML elements available on a web page. It improves the site speed and provides easy customization of any webpage.

In this post, you will come to know what is CSS, how to use CSS, and what are the key advantages of CSS. Additionally, you will learn about the Cascading Styles precedence order.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.