Arrow
Logo

CSS

Introduction to Cascading Style Sheets

CSS Selectors

CSS color property

CSS Background Color

CSS Background Image

CSS Background Repeat

CSS Background Gradients

CSS Background Size

CSS Background Blend Mode

CSS Background Clip

CSS Background Attachment

CSS Background Position

CSS Background Origin

CSS Font Family

CSS Font Size

CSS Font Style

CSS Font Weight

CSS Font Variant

CSS Text Color

CSS Text Alignment

CSS Text Align Last

CSS Text Direction

CSS Vertical Align

CSS Text Decoration

CSS Text Decoration Line

CSS Text Decoration Color

CSS Text Decoration Style

CSS Text Decoration Thickness

CSS Text Transform

CSS White Space

CSS Overflow

CSS Overflow X

CSS Overflow Y

CSS Text Overflow

CSS Text Shadow

CSS Text Spacing

CSS Letter Spacing

CSS Word Spacing

CSS Line Height

CSS Text Indent

CSS Links

CSS Border

CSS Border Color

CSS Border Style

CSS Border Width

CSS Selectors

AuthorHariom Prajapati

Pubish Date23 Jul 2022

categoryCSS

CSS selectors is used to select HTML elements which you want to syle.

Id selector

  • It is used to apply CSS in a particular HTML element.
  • We must have use ‘id’ with a unique name to specify a single element and apply css in this.
  • Id name is used in CSS with a hash character(#), after this, we can use CSS attribute in ‘{ }’.
  • Id name must have no space.
  • You can use only one id name in a single HTML element.

 

Syntax –

Id=” unique id name here ”

 

For example

<html>

<head>

	<title>Teknowize</title>
	<link rel="stylesheet" type="text/css" href="G:/style.css">
	<style>
		#kuchv {
			Color: red;
		}
	</style>
</head>

<body>

	<h2> welcome to teknowize</h2>
	<h2 id="kuchv"> thank you </h2>
	<p> this is my website </p>

</body>

</html>

 

Output

css selectors

Class selector

  • It is used to apply CSS in a particular HTML element.
  • We must have use ‘class’ with a unique name to specify a single element and apply CSS in this.
  • class name is use in CSS with the punctuation character(.), after these, we can use CSS attribute in ‘ { } ’.
  • class name must have no space.
  • You can use one or more than one class name in a single HTML element with giving space between two class name.

 

Syntax –

class=" unique class name here "

 

For example

<html>

<head>
	<title>Teknowize</title>
	<link rel="stylesheet" type="text/css" href="G:/style.css">
	<style>
		.kuchv1 {
			Color: red;
		}
		.kuchv2 {
			font-size: 1rem;
		}
	</style>
</head>

<body>

	<h2> welcome to teknowize</h2>
	<h2 class="kuchv1 kuchv2 "> thank you </h2>
	<p> this is my website </p>

</body>

</html>

 

Output

css selectors

CSS Universal Selector

  • The universal selector (*) selects all HTML elements on the page.
  • The CSS rule below will affect every HTML element on the page.

 

For example

<html>

<head>

	<title>Teknowize</title>
	<link rel="stylesheet" type="text/css" href="G:/style.css">
	<style>
		* {
			Color: red;
		}
	</style>

</head>

<body>

	<h2> welcome to teknowize</h2>
	<h2> thank you </h2>
	<p> this is my website </p>

</body>

</html>

 

Output

css selectors

CSS element Selector

  • It is used to apply CSS in a particular HTML element based on the element name.
  • we need to write element name only, after these, we can use CSS attribute in ‘ { } ’.

 

For example

<html>

<head>
	<title>Teknowize</title>
	<link rel="stylesheet" type="text/css" href="G:/style.css">
	<style>
		p {
			Color: red;
		}
	</style>
</head>

<body>

	<h2> welcome to teknowize</h2>
	<h2> thank you </h2>
	<p> this is my website </p>

</body>

</html>

 

Output

css selectors