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

 

Notes

What is CSS ?

CSS, or Cascading Style Sheets, is a stylesheet language that is used to describe the look and formatting of a HTML.
  • Using same CSS classes you can provide styling to multiple html layout.
  • Using CSS you can make responsive design for any kind of devices.
  • CSS Saves a Lot of work → You can change the look of an entire website by changing just one file.

CSS Syntax

Basic CSS Syntax →
notion image

Complete CSS Property Ref

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

 
The element on the page with the specified ID. On a given HTML page, each id value should be unique.
 
#SubscribeBtn {
color:white;
backgroud:red;
}
 

How to apply CSS to HTML

inline > internal > external → power of css

Different ways for selecting HTML element in CSS.

Element Selector

All HTML elements of the specified type.
 
h1 {
color:red;
}
 

ID Selector

The element on the page with the specified ID. On a given HTML page, each id value should be unique.
 
#SubscribeBtn {
color:white;
backgroud:red;
}

Class Selector

The element(s) on the page with the specified class. Multiple instances of the same class can appear on a page.
.subscribe-btn {
color:white;
backgroud:red;
}

Universal Selector

Universal selectors are used to reset browser pre-defined css stylings.
* {
margin:0px;
padding:0px;
border-box:0px;
}

Group Selector

if all selector has common css property then you can apply group selection.
h1, h2, p {
text-align: center;
color: red;
}
 
 

Colors

how to apply apply color in html tags
p { color:red; }
CSS Provide various default colors → red , green ,yellow and many more.
notion image
 
But only this colors are not enough for building website. hence we need more colors
Popular Color Generating Codes

RGB Colors

RGB stands for Red, Green, and Blue, and these are the primary colors of light. In the RGB color model, each color is represented by a combination of these three colors. In CSS, you can specify a color using the rgb()
notion image
Range 0 → 255
0 → Min amount of color
255 → Max amount of color
Example :
White →rgba(255, 255, 255) Black → rgba(0, 0, 0)

RGBA Colors

RGBA stands for Red, Green, Blue, and Alpha. It is similar to the RGB color model, but it also includes a value for the transparency of the color, known as the alpha value.
The alpha value, on the other hand, can range from 0 to 1, with 0 representing full transparency and 1 representing no transparency
rgba(255, 255, 255, 0) → rgba(0, 0, 0, 1)

HEX Colors

Hexadecimal colors, or hex colors for short, are another way of specifying colors in CSS. In the hexadecimal color system, each color is represented by a six-digit code that consists of letters and numbers.
notion image
Range 00 → FF
00 → Min amount of color
FF → Max amount of color
Example :
White →#FFFFFF Black → #000000
Hex colors are often preferred over RGB colors because they are shorter and easier to read.
 

Exercise

Problem 1

<!-- Create h1 tag and change color to red & background to 
Orange using inline style ?  -->

 <h1 >SUBSCRIBE TEXT</h1>
 
Output :
notion image

Problem 2

Q.
<!-- You need to add styleing on both tags  -->
     <!-- 
      For h1 tag use class for styling - classname should be "title" .
      Apply blue color hex  value to "title" class.
    -->
     <!-- For q tag  use id for styling - id name should be "qouteText" 
      apply  gray color rgb value.

      Note:use Internal Styling
    -->
    <h1>Do Some Coding</h1>
    <q>Learn web development in hindi</q>
 
Output :
notion image