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 →
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.
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()
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.
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
Output :
Problem 2
Q.
Output :
CSS Course / Tutorials in Hindi 2023 - CSS 2023 | CSS Tutorials in Hindi Learn CSS by doing practice question. Video Chapters 00:00 1.1 Course Introduction 01:03 1.2 Course Setup + Editor Setup 04:27 1.3 What is CSS ? 07:54 1.4 CSS Syntax + First CSS Code 13:06 1.5 CSS Property Refs + how to read mdn css docs 15:16 1.6 Different ways to select element in css 23:17 1.7 CSS Colors 28:48 1.8 Quick Revision 29:29 1.9 Power of CSS 34:22 1.10 Question Discussion 35:26 1.11 Question Solutions Notion Notes - https://alkaline-olivine-4e5.notion.site/Chapter-1-64ccdd78b1374139bb1ad71b684a4e0f Github Repo - https://github.com/anshuopinion/CSS-Course Linkedin - https://linkedin.com/in/anshuopinion Telegram Channel - https://telegram.me/dosomecodinghelp Instagram - https://instagram.com/dosomecoding Github - https://github.com/anshuopinion