CSS | WHAT IS CSS | CSS BASICS

Share the post

What is CSS?

Cascading Style Sheet (CSS) is used to design the web page. How our screen should look like that can be handled by CSS. It will handle the HTML elements so that the elements are adjusted on the web page. In page responsiveness, CSS plays a major role. By editing style, you can make your page more responsive. It can be easily managed to display the same screen as a mobile browser or desktop browser.

The Cascading Style Sheet can be applied to HTML elements in two ways :

  1. Inline Styling (Not Recommended)
  2. Creating Separate <style> tag on same page (Recommended)
  3. Creating CSS file Separately (Recommended)

1.By Inline Styling :

<h1 style="font-size: 30px;"> This is Header </h1>

by defining style attribute to the h1 tag we can write any style.

2.By Creating Separate <style> tag on same page :

<style>

h1 {

font-size: 30px;

}

</style>

<h1> This is Header </h1>

3.By Creating Cascading Style Sheet file Separately :

Write below code your CSS file.

<style>

h1 {

font-size: 30px;

}

</style>

Write the below code to your HTML file.

<h1> This is Header </h1>

In which h1 is the selector. font-size is the property & 30px is the property value.

What are the different types of CSS Selectors?

There is a total of 5 types of Selectors.

1.Simple Selectors : When we select HTML element on the basis of id, class

The id can be selected by using # 

For Example :

<style>

#mainheader {

font-size: 30px;

}

</style>

<h1 id="mainheader"> This is Header </h1>

The class can be selected by using .

For Example :

<style>

.mainheader {

font-size: 30px;

}

</style>

<h1 class="mainheader"> This is Header </h1>

Every element on-page can be selected by using *

For Example :

<style>

* {

font-size: 30px;

}

</style>

<h1> This is Header </h1>

2.Cascading Style Sheet Combinator: When the HTML elements are combined with other elements.

For Example :

<style>

div h1 {

background-color: yellow;

}

</style>

</head>

<body>

<div>

<h1>test</h1>

</div>

3.Pseudo Class Selector in CSS:

Its mainly used to define the state of the HTML element. There are many Pseudo class selectors available, Please see below for details

For Example :

:link

<p><a href="index.html" target="_blank">This is a HTML link</a></p>

<style>

a:link {

color: green;

}

</style>

:hover

<p><a href="index.html" target="_blank">This is a HTML link</a></p>

<style>

a:hover {

color: hotpink;

}

</style>

4.Pseudo elements Selector in CSS :

There are many pseudo-elements are available.

For Example :

::selection

<style>

::selection {

color: white;

background: black;

}

</style>

</head>

<body>

<h1>This is Header</h1>

5.By selecting the HTML attribute type:

We can select the specific attribute to which we want to apply the styles

For Example:

Suppose we want to style the input button

<style>

input[type="button"] {

font-size: 30px;

color : red;

background-color: white;

}

</style>

<input type="button" value="OK">

Leave a Comment