CSS Notes
Saturday, July 19, 2025 5:36 PM
CSS NOTES:
CSS is used along with html, JS to develop excellent websites. CSS play the role of beautification of websites.
<style> div{color:purple;}</style> <- style tag is used to make specific modifications to content present in specific tags. For eg: Here, the content inside the
div tags, will be displayed in purple font.
Ways of using CSS in HTML:
There are 3 ways: (i) Inline CSS: This is used in HTML page using the style attribute.
(ii) Internal CSS: It means to add a style tag and place the HTML page's style within it.
(iii) External CSS: It means to create a .css file and place all your styles inside that .css file.
(i) Inline CSS. Eg: <div style="color: blue;">Hi!</div> <- CSS is used inside the div tag by using style attribute.
(ii) Internal CSS. Eg: <div>Hi</div> <style>
div{color: purple;}</style> <- CSS used within HTML file, but separately.
(ii) External CSS. Eg: <div>Hi</div> <style> <- It's in an html file.
div{color: purple;}</style> <- It's in a separate CSS file, linked to the html file.
Selectors:
CSS selectors allow us to choose specific elements and apply styles to them. There are 8 types of selectors:
(1) Universal Selector (2)Element Selector (3) Id Selector (4) Class Selector (5) Group Selector (6) Child Selector (7) Descendent Selector
(8) Pseudo Selector
(1) Universal Selector:
Universal selector represented by '*'. It targets all the HTML elements on the page.
* { color: purple;} <- Content under all tags will now have purple font.
(2) Element Selector :
The element selector selects the target element based on the specific type.
div{color: purple;} <- Content under all div tags will now have purple font.
(3) Id Selector:
#blue{color:purple;} <- '#' (hashtag) is used for referring to an id. For eg: Here, we refer to a tag with id="blue".
(4) Class Selector:
.red{color: purple;} <- '.' (dot) is used for referring to a class. For eg: Here, we refer to a tag with class="red".
(5) Group Selector:
The group selector is used to select multiple target elements (tags), in which we want a common style.
div, p, a { color: purple;} <- Content under all div, p, and a, tags will have purple font.
(6) Child Selector:
The child selector is used to select elements/tags (known as child tag), present inside another element/ tag (known as the parent tag).
<div><p>Hi</p> <article><p>Hello</p></article></div> <- "Hi" will be in blue font, but "Hello" won't be in blue font.
div > p{ color: blue;} <- Content under p tag(s) present directly under the div tag(s) will now have a blue font.
(7) Descendant Selector:
The descendant selector is used to select elements/ tags present directly/ indirectly inside another element/ tag (parent tag).
<div><p>Hi</p> <article><p>Hello</p></article></div> <-Both "Hi", "Hello" will be in blue font.
div p{ color: blue;} <- Content under p tag(s) present under the div tag(s), both directly/ indirectly, will now have a blue font.
(8) Pseudo Selector:
The pseudo selector is used to modify content under tags, only when certain condition(s) are met.
<a href="https://google.com">google</a>
<style> a:visited{color:red ;} a:hover{color: green;} <- link turns green when mouse pointer hovers over the text.
a:link{color:yellow;}</style> <- link not visited will have yellow font, and visited link will have red font.
<div><p>1st child</p><p>2nd child</p></div>
<style>p:first-child{color: red ;}</style> <- content under 1st p tag (child tag of div), will be in red font.
CSS box model:
<style>.box{padding: 25px; border: 5px solid red; margin: 100px;
background-color: yellow; height: 50px; box-sizing: border-box; } <-"box-sizing: border-box" is used to convey to CSS that the height
mentioned, is the combined sum of content, height of border and padding.
CSS Fonts:
<p>Lorem ipsum</p>
<style>p{font-family: 'Times New Roman', Times, serif;}</style> <- changes <p> content's font to the first font available in the system. Here, if "Times New
Roman isn't available, then font is changed to 'Times'.
The alternate fonts available in the font family, which can be used in absence of the first font, are called fallback fonts.
<style>p{font-style: italic;}</style> <- makes font italic. Normal, italic, oblique options available in "font-style".
<style>p{font-weight: bold}</style> <- makes font bold. We can adjust font weight/thickness.
<style>p{text-decoration: underline;}</style> <- we can add elements to text to decorate it.
<style>p{font-size: large;}</style> <- font size can be adjusted. Size can be given in pixels too.
<style>p{line-height: 25px;}</style> <- to adjust spacing between lines.
<style>p{letter-spacing: 2px;}</style> <- to adjust spacing between letters.
<style>p{text-transform: capitalize;}</style> <- to transform text accordingly. "capitalize" turn 1st letter of each word to uppercase.
New Section 1 Page 1
, <style>p{border: 10px red; width:45px; text-overflow: ellipsis; overflow: auto;}</style> <- to put content in <p> tag inside a box with border.
<style>p{color: rgba(red, green, blue);}</style> <- apart from color names, we can put rgb values, ranging from 0-255.Eg: rgb(100,214,255).
<style>p{color: rgba(red, green, blue, alpha);}</style> <- apart from color names, we can put rgba values for different colors. Values from 0-255
can be put in place of red, green, blue. And any value b/w 0 and 1 can be put in place of alpha. Eg: rgba(100,214,255,0.123).
'a' in rgba stands for alpha which is used to adjust opacity or transparency of the color used.
<style>p{color: hsla(hue, saturation, lightness, alpha);}</style> <- to change hsl values. Value of h ranges from 0-255, s and l are given in
percentage (0%-100%), a is b/w 0 to 1. Eg: hsl(200, 25%, 41%,0.234);
<style>p{color: hsl(hue, saturation, lightness);}</style> <- to change hsl values. Value of h ranges from 0-255, s and l are given in percentage
(0%-100%). Eg: hsl(200,25%, 41%);
CSS Specificity and Cascade:
CSS stands for Cascading Stylesheets. The cascade is the algorithm for solving conflicts where multiple CSS rules apply to an HTML element.
Browser resolves conflicts using the cascade algorithm, which has 4 distinct stages:
➢ Position and order of appearance: the order in which your CSS rules appear. (for same selectors)
➢ Specificity: an algorithm that determines which CSS selector has the strongest match.
➢ Origin: the order in which CSS appears and where it comes from, whether that is a browser style, CSS from a browser extension, or your authored CSS.
➢ Importance: some CSS rules are weighted more heavily than others, especially with the !important rule type.
Order of specificity is: Inline Style > ID Selector > Class or Attribute Selector > Element Selector > Universal Selector.
The !important flag in CSS is used to give a particular style rule the highest level of precedence/ specificity, overriding other competing styles.
Example:
(1) <p class="hi hello">Lorem ipsum</p>
<style>.hello{color: blue; background: red;}
.hi{color: red; background: yellow;}</style> <- As ".hi" is written after ".hello", thus, the text's color-> red, bg color -> yellow.
(2) <p id="hi" style="color: purple;">Lorem ipsum</p>
<style>.hello{color: blue; background: red;}
#hi{color: red; background: yellow;}</style> <- As inline selector>id selector, thus, the text's color-> purple.
(3) <p class="hi" id="ball">Lorem ipsum</p>
<style>#ball{color: blue; background: red;}
.hi{color: red; background: yellow;}</style> <- As id selector>class selector, thus, the text's color-> blue.
(3) <p class="hi" >Lorem ipsum</p>
<style>#ball{color: blue;}
p{color: red !important;}</style> <- As !important> all selectors, thus, the text's color-> red.
Specificity Calculation
To calculate specificity, assign a value to each part of the selector:
• Universal Selector: 0
• Element selectors and pseudo-elements: 1
• Class selectors, attribute selectors, and pseudo-classes: 10
• ID selectors: 100
• Inline styles: 1000
Style with greater value of specificity will be applied.
Example:
<h1 class="hi hello">Lorem ipsum</h1>
<style>h1.hello{color: blue; background: red;} <- specificity of this selector = 1+10=11. That's why, it's applied.
.hi{color: red; background: yellow;}</style> <- specificity of this selector =10.
CSS sizes:
• px: pixels
• vw: Relative to 1% of viewport width. (Viewport is the area of the website visible to the user.)
• vh: Relative to 1% of viewport height.
• rem: Relative to the font size of the root element. Root element refers to the first/primary element.
• em: Relative to the font size of the parent element. Eg: 5em means the size would be 5 times the current font size.
vmin and vmax represent the maximum and minimum viewport dimension. For example, if you were on a phone that is 300px wide and 800px tall, vmin would represent the width of the viewport and
vmax would represent the height of the device.
If you were on a laptop that is 800px wide and 500px tall, vmin would represent the height of the viewport and vmax would represent the width of the device.
CSS Padding and Margin:
Padding creates space inside the element's border, pushing the content away from the edges. Margin creates space outside the element's border, separating it from other elements.
Padding Syntax: (i) <style>.box{padding: top left bottom right;} </style> <- top means padding from top, and so on.
(ii) <style>.box{padding: <top-bottom> <left-right>;} </style> (iii) <style>.box{padding: <all-sides>;} </style>
CSS Display Property:
We know block elements like <div> occupy full width/line, while inline elements like <span> occupy only required width, letting content of other elements be printed in the same line, if blank space is left.
Example:
<div>hi there!</div><div>hello</div>
<span>bye </span><span> bye!</span> <-It gives this output:
New Section 1 Page 2
Saturday, July 19, 2025 5:36 PM
CSS NOTES:
CSS is used along with html, JS to develop excellent websites. CSS play the role of beautification of websites.
<style> div{color:purple;}</style> <- style tag is used to make specific modifications to content present in specific tags. For eg: Here, the content inside the
div tags, will be displayed in purple font.
Ways of using CSS in HTML:
There are 3 ways: (i) Inline CSS: This is used in HTML page using the style attribute.
(ii) Internal CSS: It means to add a style tag and place the HTML page's style within it.
(iii) External CSS: It means to create a .css file and place all your styles inside that .css file.
(i) Inline CSS. Eg: <div style="color: blue;">Hi!</div> <- CSS is used inside the div tag by using style attribute.
(ii) Internal CSS. Eg: <div>Hi</div> <style>
div{color: purple;}</style> <- CSS used within HTML file, but separately.
(ii) External CSS. Eg: <div>Hi</div> <style> <- It's in an html file.
div{color: purple;}</style> <- It's in a separate CSS file, linked to the html file.
Selectors:
CSS selectors allow us to choose specific elements and apply styles to them. There are 8 types of selectors:
(1) Universal Selector (2)Element Selector (3) Id Selector (4) Class Selector (5) Group Selector (6) Child Selector (7) Descendent Selector
(8) Pseudo Selector
(1) Universal Selector:
Universal selector represented by '*'. It targets all the HTML elements on the page.
* { color: purple;} <- Content under all tags will now have purple font.
(2) Element Selector :
The element selector selects the target element based on the specific type.
div{color: purple;} <- Content under all div tags will now have purple font.
(3) Id Selector:
#blue{color:purple;} <- '#' (hashtag) is used for referring to an id. For eg: Here, we refer to a tag with id="blue".
(4) Class Selector:
.red{color: purple;} <- '.' (dot) is used for referring to a class. For eg: Here, we refer to a tag with class="red".
(5) Group Selector:
The group selector is used to select multiple target elements (tags), in which we want a common style.
div, p, a { color: purple;} <- Content under all div, p, and a, tags will have purple font.
(6) Child Selector:
The child selector is used to select elements/tags (known as child tag), present inside another element/ tag (known as the parent tag).
<div><p>Hi</p> <article><p>Hello</p></article></div> <- "Hi" will be in blue font, but "Hello" won't be in blue font.
div > p{ color: blue;} <- Content under p tag(s) present directly under the div tag(s) will now have a blue font.
(7) Descendant Selector:
The descendant selector is used to select elements/ tags present directly/ indirectly inside another element/ tag (parent tag).
<div><p>Hi</p> <article><p>Hello</p></article></div> <-Both "Hi", "Hello" will be in blue font.
div p{ color: blue;} <- Content under p tag(s) present under the div tag(s), both directly/ indirectly, will now have a blue font.
(8) Pseudo Selector:
The pseudo selector is used to modify content under tags, only when certain condition(s) are met.
<a href="https://google.com">google</a>
<style> a:visited{color:red ;} a:hover{color: green;} <- link turns green when mouse pointer hovers over the text.
a:link{color:yellow;}</style> <- link not visited will have yellow font, and visited link will have red font.
<div><p>1st child</p><p>2nd child</p></div>
<style>p:first-child{color: red ;}</style> <- content under 1st p tag (child tag of div), will be in red font.
CSS box model:
<style>.box{padding: 25px; border: 5px solid red; margin: 100px;
background-color: yellow; height: 50px; box-sizing: border-box; } <-"box-sizing: border-box" is used to convey to CSS that the height
mentioned, is the combined sum of content, height of border and padding.
CSS Fonts:
<p>Lorem ipsum</p>
<style>p{font-family: 'Times New Roman', Times, serif;}</style> <- changes <p> content's font to the first font available in the system. Here, if "Times New
Roman isn't available, then font is changed to 'Times'.
The alternate fonts available in the font family, which can be used in absence of the first font, are called fallback fonts.
<style>p{font-style: italic;}</style> <- makes font italic. Normal, italic, oblique options available in "font-style".
<style>p{font-weight: bold}</style> <- makes font bold. We can adjust font weight/thickness.
<style>p{text-decoration: underline;}</style> <- we can add elements to text to decorate it.
<style>p{font-size: large;}</style> <- font size can be adjusted. Size can be given in pixels too.
<style>p{line-height: 25px;}</style> <- to adjust spacing between lines.
<style>p{letter-spacing: 2px;}</style> <- to adjust spacing between letters.
<style>p{text-transform: capitalize;}</style> <- to transform text accordingly. "capitalize" turn 1st letter of each word to uppercase.
New Section 1 Page 1
, <style>p{border: 10px red; width:45px; text-overflow: ellipsis; overflow: auto;}</style> <- to put content in <p> tag inside a box with border.
<style>p{color: rgba(red, green, blue);}</style> <- apart from color names, we can put rgb values, ranging from 0-255.Eg: rgb(100,214,255).
<style>p{color: rgba(red, green, blue, alpha);}</style> <- apart from color names, we can put rgba values for different colors. Values from 0-255
can be put in place of red, green, blue. And any value b/w 0 and 1 can be put in place of alpha. Eg: rgba(100,214,255,0.123).
'a' in rgba stands for alpha which is used to adjust opacity or transparency of the color used.
<style>p{color: hsla(hue, saturation, lightness, alpha);}</style> <- to change hsl values. Value of h ranges from 0-255, s and l are given in
percentage (0%-100%), a is b/w 0 to 1. Eg: hsl(200, 25%, 41%,0.234);
<style>p{color: hsl(hue, saturation, lightness);}</style> <- to change hsl values. Value of h ranges from 0-255, s and l are given in percentage
(0%-100%). Eg: hsl(200,25%, 41%);
CSS Specificity and Cascade:
CSS stands for Cascading Stylesheets. The cascade is the algorithm for solving conflicts where multiple CSS rules apply to an HTML element.
Browser resolves conflicts using the cascade algorithm, which has 4 distinct stages:
➢ Position and order of appearance: the order in which your CSS rules appear. (for same selectors)
➢ Specificity: an algorithm that determines which CSS selector has the strongest match.
➢ Origin: the order in which CSS appears and where it comes from, whether that is a browser style, CSS from a browser extension, or your authored CSS.
➢ Importance: some CSS rules are weighted more heavily than others, especially with the !important rule type.
Order of specificity is: Inline Style > ID Selector > Class or Attribute Selector > Element Selector > Universal Selector.
The !important flag in CSS is used to give a particular style rule the highest level of precedence/ specificity, overriding other competing styles.
Example:
(1) <p class="hi hello">Lorem ipsum</p>
<style>.hello{color: blue; background: red;}
.hi{color: red; background: yellow;}</style> <- As ".hi" is written after ".hello", thus, the text's color-> red, bg color -> yellow.
(2) <p id="hi" style="color: purple;">Lorem ipsum</p>
<style>.hello{color: blue; background: red;}
#hi{color: red; background: yellow;}</style> <- As inline selector>id selector, thus, the text's color-> purple.
(3) <p class="hi" id="ball">Lorem ipsum</p>
<style>#ball{color: blue; background: red;}
.hi{color: red; background: yellow;}</style> <- As id selector>class selector, thus, the text's color-> blue.
(3) <p class="hi" >Lorem ipsum</p>
<style>#ball{color: blue;}
p{color: red !important;}</style> <- As !important> all selectors, thus, the text's color-> red.
Specificity Calculation
To calculate specificity, assign a value to each part of the selector:
• Universal Selector: 0
• Element selectors and pseudo-elements: 1
• Class selectors, attribute selectors, and pseudo-classes: 10
• ID selectors: 100
• Inline styles: 1000
Style with greater value of specificity will be applied.
Example:
<h1 class="hi hello">Lorem ipsum</h1>
<style>h1.hello{color: blue; background: red;} <- specificity of this selector = 1+10=11. That's why, it's applied.
.hi{color: red; background: yellow;}</style> <- specificity of this selector =10.
CSS sizes:
• px: pixels
• vw: Relative to 1% of viewport width. (Viewport is the area of the website visible to the user.)
• vh: Relative to 1% of viewport height.
• rem: Relative to the font size of the root element. Root element refers to the first/primary element.
• em: Relative to the font size of the parent element. Eg: 5em means the size would be 5 times the current font size.
vmin and vmax represent the maximum and minimum viewport dimension. For example, if you were on a phone that is 300px wide and 800px tall, vmin would represent the width of the viewport and
vmax would represent the height of the device.
If you were on a laptop that is 800px wide and 500px tall, vmin would represent the height of the viewport and vmax would represent the width of the device.
CSS Padding and Margin:
Padding creates space inside the element's border, pushing the content away from the edges. Margin creates space outside the element's border, separating it from other elements.
Padding Syntax: (i) <style>.box{padding: top left bottom right;} </style> <- top means padding from top, and so on.
(ii) <style>.box{padding: <top-bottom> <left-right>;} </style> (iii) <style>.box{padding: <all-sides>;} </style>
CSS Display Property:
We know block elements like <div> occupy full width/line, while inline elements like <span> occupy only required width, letting content of other elements be printed in the same line, if blank space is left.
Example:
<div>hi there!</div><div>hello</div>
<span>bye </span><span> bye!</span> <-It gives this output:
New Section 1 Page 2
