What is a CSS File?

What is a CSS File and How to use it in Html?

CSS: -

CSS stands for Cascading Style Sheet. CSS is a file of style sheets that describe the presentation of a document written in HyperText Markup Language, known as HTML. CSS files show how the HTML elements will appear on the screen. CSS was released in 1996 and is now maintained by World Wide Web Consortium(W3C). The extension for saving cascading style sheet files is ".css".

A CSS file is used for making the content of a web page look customized. In simple words, we created a web page and displayed some content on it, and it appears all in a simple font, so to make it look more beautiful and readable, we use CSS. In short, we design a web page using CSS properties.

We can change a web page's layout, font, border, indentation, etc.

CSS has a simple syntax and has several English keywords to specify the name of various style properties.

CSS is a set of rules which consist of a selector and declaration block.

Syntax:

Selector Declaration block
H2 {font-size: 16px; background-color: green;}

Here in the above syntax, h2, i.e., heading 2 of html is the selector and, in the declaration, block the font-size, and background-color are the property which we want to set for h2 tag and 16px and green are the values which will be applied on the html element.

Example: -

p
{
color: blue;
font-size:12px;
text-align: right;
}

Output: -

Explanation: -

Here p is the HTML element: paragraph tag

color, font size, and text-align are the multiple properties.

Blue,12px, right is the respective value of properties applied to the selector.

In simple words, the blue color is applied to the text written in the p tag, its font size is 12px, and it is aligned on the right-hand side.

There are some basic CSS Selectors, and they are as follows:

1) Element Selector: -

This selector is used to select the HTML element for styling.

Example: -

Here, all <h1> elements on the page will be aligned to center and the text color will be blue.

h1 {
  text-align: center;
  color: blue;
}

2) Id Selector: -

The Id Selector is used to selecting the HTML element's id attribute. As the Id of an element is unique, it is used to select only one unique element. For id selection, we use (#)

Example: -

Here for selecting id we need to apply it on HTML element like id=” p1”

 #p1{
  text-align: center;
  color: blue;
}

3) Class selector: - The class selector is used to select a specific class attribute within the HTML element. The class selector is written (.) dot character and then the name of the class.

Example: -

For selecting a class, we need to apply it to an HTML element like class=" p1," which will be blue in color, and the text will be aligned in the center.

.p1{
  text-align: center;
  color: blue;
}

4) Universal Selector: - The universal selector is used to select all the HTML elements. The universal selector is denoted by using the asterisk symbol (*).

Example: -

The styling will be applied to all html element.

*p1{
  text-align: center;
  color: blue;
}

There are three ways to use a CSS in for our web page and they are as follows:

1. Inline CSS
2. Internal CSS
3. External CSS

So now let’s see each of these CSS is used for designing the web pages.

A) Inline CSS: -

An Inline CSS is used to apply a style uniquely for a single element. We can use an inline CSS just by adding the style attribute to its relevant element, and it can contain any of the property which belongs to CSS properties.

Example: -

<html>
<body>


<h1 style="color: red; text-align: center; font-size:58px">This is first h1 heading </h1>
<p style="color: blue;">It is second paragraph</p>
</body>
</html>

Output: -

So, in the above example, for the h1 tag and p tag, both have their CSS mentioned for their attribute, and this is how inline CSS works.

B) Internal CSS: -

An internal CSS is used to apply styling properties on every element which we want to style on an html page.

The internal style sheet is defined inside <style> tag which comes under <head> section.

Example: -

<html>
<head>
<style>
body {
  background-color: cyan;
}


h2 {
  color: yellow;
  margin-left: 50px;
}
</style>
</head>
<body>


<h2>This is first h2 heading</h2>
<p> It is second paragraph </p>


</body>
</html>

Output: -

 For the above example, all tag styling properties are written inside the style tag.

C) External CSS: -

By using the external CSS, we can change the look and feel of our web page. It is the most commonly used CSS for styling html elements and the web pages.

For doing so, we first need to include the reference of external CSS into each html page by using the <link>tag inside the head section. An external CSS can be written in any editor but must be saved with a .css extension only. And this file should not include any html tag in it. So now, for our example purpose, let us create a style1.css to see the implementation of external CSS.

Example: -

style1.css

body {
  background-color : yellow;
}


h3 {
  color: green;
  margin-left: 40px;
}
<html>
<head>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<h3>This is third h3 heading</h3>
<p>It is 3rd paragraph</p>


</body>
</html>

Output: -