CSS Course Hindi - Beginner to Pro ( 2023 ) | Chapter 3

Notes

Pseudo-classes

To access different state of element. we use pseudo classes
To access hover state we use :hover selector
similarly for active state we use :active selector
 

Height & Width

The CSS heightand width properties are used to set the height and width of an element.
example 

<style>
div {
  height: 200px;
  width: 400px;
  background-color: red;
}
</style>

<div> 400 X 200 </div>
notion image
height and width unit you should know:
height: 100vh / width: 100vw , vh & vw will take full height or full width of page according to screen size;
height: 100% / width: 50% , % will take height and width according to parent elements
 
Note : Fixed Height & Width is very practice height:100px, width:200px;
when you will make website responsive fixed height and width is hurt you most.
try to use max-height or max-width
max-width :400px → max-width means element will maximum take only 400px if you will increase screen size it will stay at 400px. but if you will shrink screen size it will reduce fixed 400px to parent element width; max-height will also act same. and min-height & min-width will act opposite to max-height and min-width respectively.
look at below image max-width provide. due that container size fixed on large device
notion image

Box Model

Box Model is help you analyse how much space your element taking on page.
if you are not sure about your layout then box model will help you visualise your element.
 

Text

We will look various properties of text→
  • color: blue → it will apply colour to text;
 
For Text Horizontal Alignment
  • text-align: center,left,right → horizontal alignment of text according to parent elements
  • text-align:justify; → this property will optimise text and spread according to container width.
For Text Vertical Alignment
 
img.a {
  vertical-align: baseline;
}
img.b {
  vertical-align: text-top;
}
img.c {
  vertical-align: text-bottom;
}
img.d {
  vertical-align: sub;
}
img.e {
  vertical-align: super;
}
 
notion image
 
We Can also change direction of text 

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}
 
Text Decoration
notion image
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

p.ex {
  text-decoration: overline underline;
}

<h1>Overline text decoration</h1>
<h2>Line-through text decoration</h2>
<h3>Underline text decoration</h3>
<p class="ex">Overline and underline text decoration.</p>
 
Text Transformation
text-transform: lowercase uppercase capitalize;
notion image
Text Spacing Properties
  • text-indent - Provide Space before any text
  • letter-spacing - spacing between letters
  • line-height - height of text
  • word-spacing - spacing between words
  • white-space: wrap,nowrap;
      • You can also apply text shadow
text-shadow:2px 2px rgba(0,0,0,0.5)

Exercises