CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

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.

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

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: -

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

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: -

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

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: -

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

 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: -

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



ADVERTISEMENT
ADVERTISEMENT