CSS Notes

CSS stands for Cascading Style Sheets.
CSS is the language we use to style an HTML document.
CSS describes how HTML elements should be displayed.
file extension - .css and many other.

A CSS rule consists of a selector and a declaration block.

Example:-

                p {
                    color: red;
                    text-align: center;
                }
            

Example Explained
p is a selector in CSS (it points to the HTML element you want to style: <p>).
color is a property, and red is the property value
text-align is a property, and center is the property value

CSS Selectors:-

A CSS selector selects the HTML element(s) you want to style.
We can divide CSS selectors into five categories:

• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)

Universal Selector:-

The universal selector (*) selects all HTML elements on the page.
e.g - * { text-align: center; color: blue;}

Element Selector:-

The element selector selects HTML elements based on the element name.
also we can select multiple different elements by using comma.
e.g - h1, p { text-align: center; } - here all h1 and p tags are selected.

ID Selector:-

The id of an element is unique within a page.
id is case sensitive.
Note: An id name cannot start with a number!
so the id selector is used to select one unique element!
write a hash (#) character, followed by the id of the element.
e.g #elementid { text-align: center; }

Class Selector:-

Multiple HTML elements can share the same class.
Also one element have more than one classes.
Note: A class name cannot start with a number!
e.g <p class="center large">...</p> - have two classes center and large.
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
e.g - .center {text-align: center; color: red;}
You can also specify that only specific HTML elements should be affected by a class.
e.g - p.center { text-align: center; color: red; }
In this example only <p> elements with class="center" will be affected

attribute Selector:-

The [attribute] selector is used to select elements with a specified attribute.
e.g - a[target] { background-color: yellow; } - selects all a elements with a target attribute.

[attribute="value"] Selector:-

The [attribute="value"] selector is used to select elements with a specified attribute and value.
e.g - a[target="_blank"] { background-color: yellow; } - selects all a elements with a target="_blank" attribute.

Pseudo class:-

A pseudo-class is used to define a special state of an element.
syntax: selector:pseudo-class { property: value; }
e.g - a:hover { color: #FF00FF; }

different pseudo-classes

Pseudo-class	example	example description
:hover	a:hover	Selects element on mouse over
:active	a:active	Selects the active link
:checked	option:checked	Matches any option element that is checked
:nth-of-type()	p:nth-of-type(2n)	Selects any p element that is the even p element of its parent
Many many more pseudo classes also there that we can learn

Pseudo-elements:-

A CSS pseudo-element is used to style specific parts of an element.
syntax - selector::pseudo-element { property: value; }
e.g - p::first-line { color: #ff0000; }

different pseudo-elements

Pseudo-element	Example	Example description
::first-letter	p::first-letter	Selects the first letter of every p element
::first-line	p::first-line	Selects the first line of every p element
::selection	p::selection	Styles the user-selected text inside any p tag
Many many more pseudo elements also there that we can learn

CSS Combinators:-

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

Descendant Combinator(space):-

The descendant combinator matches all elements that are descendants of a specified element.
e.g - div p { background-color: yellow; } - selects all <p> elements inside <div> elements

Next Sibling combinator (+):-

The next sibling combinator is used to select an element that is directly after another specific element.
Sibling elements must have the same parent element(means same level).
e.g - div + p { background-color: yellow; } - selects the first <p> element that are placed immediately after <div> elements

Child combinator (>):-

The child combinator selects all elements that are the children of a specified element.
e.g - div > p { background-color: yellow; } - selects all <p> elements that are children of a <div> element

Cascade in CSS:-

Cascading in CSS determines which rule to apply when multiple rules target the same element.
these rules are also works when there many style sheets.
The browser resolves conflicts based on:

1. Rules marked with !important override everything. Regardless of where they are declared.
2. Inline styles (e.g., style="...") have the highest priority if no !important is involved..
3. Specificity determines which rule takes precedence if there's no !important.
4. If specificity is the same, the last declared rule is applied.

Specificity:-

Specificity in CSS is a system used to determine which CSS rule should be applied to an element when multiple rules target the same element.
The higher the specificity value, the more priority the rule has over others.
Specificity is calculated using a four-part system, where each part is represented by a number that reflects the importance of different types of selectors.
These parts are:

1. Inline styles: (1000)
2. ID selectors: (100)
3. Class selectors, attributes, and pseudo-classes: (10)
4. Element selectors and pseudo-elements: (1)

e.g -
#header { color: blue; } - Specificity 100
.menu { color: green; } - Specificity 10
div { color: yellow; } - Specificity 1
#header { color: red; } - Specificity 100, but declared later (wins)
The result will be red
Add up the specificity for all components of the selector.
if two rules have the same specificity, the one declared last wins.

!important:-

The !important rule in CSS is used to add more importance to a property/value than normal.
it will override ALL previous styling rules for that specific property on that element!
e.g - p { background-color: red !important; }
do not use it unless you absolutely have to.

Inheritance:-

Inheritance in CSS means that some properties automatically pass their values from parent elements to child elements.

Properties that inherit by default:

Some CSS properties inherit their values automatically. These are typically text- and font-related properties, such as:
color, font-family, font-size, font-style, letter-spacing, line-height, visibility e.t.c

Properties that do not inherit by default:

Most other CSS properties, especially box model properties and layout-related properties, do not inherit by default, such as:
margin, padding, border, width, height, background, display e.t.c

Forcing inheritance:-

You can force a property to inherit its value using the inherit keyword. For example:
p { color: inherit; } - Takes the color from its parent.

Overriding inheritance:-

Child elements can override inherited values with their own specified styles.

Default (initial) value:-

If you want to reset a property to its default value (as defined by the CSS specification), you can use the initial keyword:
p { color: initial; }

Universal inheritance (using all):-

The all shorthand property can be used to apply inherit, initial, or unset to all properties:
e.g - div {all: inherit; } - Forces all properties to inherit.

There are three ways of inserting a style sheet:

External CSS

With an external style sheet, you can change the look of an entire website by changing just one file!
External styles are defined within the <link> element, inside the <head> section
Most used as we can use a single file for multiple pages.
e.g - <head> <link rel="stylesheet" href="cssfilename.css"> </head>
write full path of file if not in same folder.

Internal CSS

The internal style is defined inside the <style> element, inside the head section.
Not used because for every html file we have to style again and again.

            <head>
                <style>
                body {
                  background-color: black;
                }
                </style>
            </head>
            

Inline CSS

An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element that can contain any CSS property.
e.g - <h1 style="color:blue; text-align:center;">This is a heading</h1>
Not used because every element we have to style again and again.

•Note - If some properties have been defined for the same selector (element) in
different style sheets, the value from the last read style sheet will be used.

Opacity property:-

The opacity property in CSS is used to control the transparency level of an element.
It accepts values between 0 (completely transparent) and 1 (completely opaque).
e.g - opacity: value;
Note - opacity applies to both the element and its children.
To make only the background transparent while keeping child elements opaque, you can use color with alpha value for the background color.

text-align property:-

The text-align property specifies the horizontal alignment of text in an element.
Aligns according to parent element.

left/start	Aligns the text to the left / from starting side according to different languages
right/end	Aligns the text to the right / from ending side according to different languages
center	Centers the text
justify	Stretches the lines so that each line has equal width (like in newspapers and magazines)

font-weight property:-

The font-weight property sets how thick or thin characters in text should be displayed.
values - 100-900, normal, bold, bolder, lighter. 400 is the same as normal, and 700 is the same as bold.
bolder and lighter are according to parent.

text-decoration property:-

The text-decoration property specifies the decoration added to text, and is a shorthand property for:
text-decoration-line (required), text-decoration-color, text-decoration-style, text-decoration-thickness.
syntax - text-decoration: text-decoration-line; text-decoration-color; text-decoration-style; text-decoration-thickness;
Default value: none currentColor solid auto

Values:-

text-decoration-line	none, underline, overline, line-through
text-decoration-color	Sets the color of the text decoration
text-decoration-style	solid, wavy, dotted, dashed, double
text-decoration-thickness	Sets the thickness of the decoration line

also can be used to remove underline of anchor tag e.t.c by using value none.

line-height property:-

The line-height property specifies the height of a line.
Note: Negative values are not allowed.

line-height values:-

normal	A normal line height. This is default
number	A number that will be multiplied with the current font-size to set the line height e.g - 2,3.5 e.t.c
length	A fixed line height in px, pt, cm, etc
%	line height in percent of the current font size

letter-spacing property:-

The letter-spacing property increases or decreases the space between characters in a text.

letter-spacing values:-

normal	default,Defines normal space
length	Defines a length that is used as the space between characters (negative values are also allowed). e.g - 10px e.t.c

Box Model:-

All HTML elements can be considered as boxes.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: content, padding, borders and margins.

Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

height property:-

The height property sets the height of an element.
The height of an element does not include padding, borders, or margins.
If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly.
values - auto, length, %, initial, inherit.

width property:-

The width property sets the width of an element.
The width of an element does not include padding, borders, or margins.
values - auto, length, %, initial, inherit.

border-width property:-

The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or
by using one of the three pre-defined values: thin, medium, or thick. specific side widths:-
The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border)
e.g if 2 values - border-width: 5px 20px; - 5px top and bottom, 20px on right and left.
e.g if 4 values - border-width: 25px 10px 4px 35px; - 25px top, 10px right, 4px bottom and 35px left.
shorthand syntax - border-width: top right bottom left;
or we can use - border-top-width, border-right-width, border-bottom-width, border-left-width.

border-style property:-

The border-style property sets the style of an element's four borders.
if 4 values - top, right, bottom, left,;
if 3 values - top, right and left, bottom,
if 2 values - top and bottom, right and left.
if 1 value - all four borders same.
values - none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit.

border-color property:-

The border-color property is used to set the color of the four borders.
Note: If border-color is not set, it inherits the color of the element.
shorthand - border-color: top right bottom left;
also on specific sides - border-top-color, border-right-color, border-bottom-color, border-left-color.

border-radius property:-

The border-radius property is used to add rounded borders to an element.
shorthand - border-radius: top-left top-right bottom-right bottom-left
there are also many more shorthand types.
also we can assign to single border-top-left-radius, border-bottom-left-radius, border-bottom-right-radius, border-top-right-radius.
to make circle border-radius: 50%; and height,width need to same otherwise oval shape.

box-shadow property:-

The box-shadow property attaches one or more shadows to an element.
syntax - box-shadow: h-offset v-offset blur color; , e.g- box-shadow: 10px 10px 8px #888888;
also - box-shadow: h-offset v-offset blur spread color inset;
To attach more than one shadow to an element, add a comma-separated list of shadows

values

none	Default value. No shadow is displayed
h-offset	Required. The horizontal offset of the shadow. A positive value puts shadow on right side of the box, negative value on the left
v-offset	Required. The vertical offset of the shadow. A positive value puts the shadow below the box, negative value puts shadow above
blur	Optional. The blur radius. The higher the number, the more blurred the shadow will be
spread	Optional. The spread radius.
color	Optional. The color of the shadow. The default value is the text color.
inset	Optional. Changes the shadow from an outer shadow (outset) to an inner shadow

padding property:-

Padding is used to create space around an element's content, inside of any defined borders.
shorthand:-
if 4 values - top, right, bottom, left,;
if 3 values - top, right and left, bottom,
if 2 values - top and bottom, right and left.
if 1 value - all four borders same.
e.g - padding: 10px 20px 30px 40px;
also for individual - padding-top, padding-right, padding-bottom, padding-left.

margin property:-

Margins are used to create space around elements, outside of any defined borders.
shorthand - margin: top right bottom left; or with 3,2,1 values also.
also we can set individual - margin-top, margin-right, margin-bottom, margin-left.
values - length, %, 0, auto, initial, inherit. and for approx all above box model properties.

display property:-

The display property in CSS is used to specify the display behavior of an element.
It determines how an element is rendered in the document flow.

display property values

Value	Discription
none	The element is completely removed
inline	Displays an element as an inline element (like span). but Any height and width properties will have no effect. This is default.
block	Displays an element as a block element (like p). It starts on a new line, and takes up the whole width
inline-block	Combines the features of inline and block. It flows inline but allows setting width and height.
flex	Displays an element as a block-level flex container
inline-flex	Displays an element as an inline-level flex container
grid	Displays an element as a block-level grid container
inline-grid	Displays an element as an inline-level grid container
initial, inherit, e.t.c many many more...

When an element has display: inline, none, or contents, properties like height, width,
and vertical margins (margin-top and margin-bottom) have no effect because inline elements
rely on their content size, none removes the element from rendering, and contents makes the
element visually disappear while only showing its children.

Inline v/s block

Inline	Block
Do not start on a new line	Always start on a new line
Only use as much horizontal space as required by the content. Do not accept width and height CSS properties	Take up as much horizontal space as possible (the full width of the container or browser window if there is no container)
Margins will work horizontally, but not vertically.	Will respect width and height CSS properties.
Padding works on all sides, but the top and bottom may overlap other elements.	Horizontal and vertical margins both work

transition property:-

Transitions enable you to define the transition between two states of an element.
To create a transition effect, you must specify two things: the CSS property you want to add an effect to, the duration of the effect.
Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.
we can add transition effect to many elements is same property e.g - transition: width 2s, height 4s;
syntax(shorthand) - transition: transition-property transition-duration transition-timing-function transition-delay

transition-property property:-

The transition-property property specifies the name of the CSS property the transition effect is for.
Default value: all, Inherited: no.
values - none, all, property, initial, inherit. e.g - div { transition-property: width; } , div:hover { width: 300px; } - Hover over a div element, and change the width with a transition effect.

transition-duration property:-

The transition-duration property specifies how many seconds (s) or milliseconds (ms) a transition effect takes to complete.
Default value: 0s, Inherited: no.
values - time, initial, inherit.
transition-duration: 5s; - Let the transition effect last for 5 seconds.

transition-timing-function:-

The transition-timing-function property specifies the speed curve of the transition effect.
Default value: ease, Inherited: no.

values

Value	Description
ease	Default value. Specifies a transition effect with a slow start, then fast, then end slowly
linear	Specifies a transition effect with the same speed from start to end
ease-in	Specifies a transition effect with a slow start
ease-out	Specifies a transition effect with a slow end
ease-in-out	Specifies a transition effect with a slow start and end
and many more values also there.

transition-delay property:-

The transition-delay property specifies when the transition effect will start.
Value is defined in seconds (s) or milliseconds (ms).
Default value: 0s, Inherited: no
e.g - transition-delay: 2s; - Wait 2 seconds before the transition effect starts.

transform property:-

The transform property in CSS allows you to apply transformations to elements, such as scaling, rotating, translating, or skewing them.
values: none, transform-functions;
we can use multiple properties in single by using space - {transform: translate(200px,200px) rotate(90deg)};

transform-functions:-

rotate(angle):-

Rotates the element clockwise or counterclockwise.
e.g - transform: rotate(180deg);
also we can give angle in negative and in other units.

scale(x,y):-

Scales the element by the specified x and y factors.
e.g - transform: scale(1.5, 2);
also there we can use scaleX, scaleY
also shorthand scale(value) - same value for all direction.

translate(x, y):-

Moves the element from its original position.
e.g - transform: translate(50px, 100px);
also there we can use translateX, translateY
also accept negative values.

skew(x,y):-

Skew applies a slanting transformation to an element along the x-axis and y-axis.
e.g - transform: skew(30deg,60deg); , if one value skew(30deg) = skew(30deg,0deg) - but not use like this.
also skewX(),skewY().
also accept negative values.

position property:-

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).
Elements are then positioned using the top, bottom, left, and right properties.
However, these properties will not work unless the position property is set first. They also work differently depending on the position value.

position: static;

HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right properties.
An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

position: relative;

An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position.
Other content will not be adjusted to fit into any gap left by the element.

position: fixed;

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
The top, right, bottom, and left properties are used to position the element.
A fixed element does not leave a gap in the page where it would normally have been located.

position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
If an absolutely positioned element has no ancestor with a defined positioning context (i.e., relative, absolute, or fixed), it will use the document body as its reference point. Consequently, the element's position will be calculated relative to the entire page, and it will move along with the content when the page is scrolled.
Note: Absolute positioned elements are removed from the normal flow(other elements take their place), and can overlap elements.

position: sticky;

An element with position: sticky; is positioned based on the user's scroll position.
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
Note: You must specify at least one of top, right, bottom or left for sticky positioning to work.
e.g - div.sticky { position: sticky; top: 0;}

Flexbox:-

Flexbox is short for the Flexible Box Layout module.
Flexbox is a layout method for arranging items in rows or columns.
Flexbox makes it easier to design a flexible responsive layout structure, without using float or positioning.
To start using CSS Flexbox, you need to first define a flex container.
The flex container becomes flexible by setting the display property to flex.
Direct child of flex container become flex items.

Grid:-

CSS Grid is a powerful layout system in CSS that allows you to create two-dimensional layouts for web pages.
It works by defining a grid container and placing child elements (grid items) within it.
Grid Container: The parent element with display: grid or display: inline-grid.
Grid Items: The direct children of the grid container.

CSS Animations:-

CSS animations allow you to create smooth, dynamic effects by animating CSS properties over time.
You can change as many CSS properties you want, as many times as you want.
They are defined using the @keyframes rule and applied with the animation properties.
Keyframes hold what styles the element will have at certain times.

Shorthand of all properties:-
animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state;

CSS Media Queries:-

CSS media queries are a powerful tool for building responsive web designs, allowing you to apply styles based on specific conditions like screen size, resolution, orientation, and more.

syntax:-
@media (condition) {
/* CSS rules */
}

e.g -
@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
  div {
    background-color: black;
    color: red;
  }
}
we can also target multiple element and properties like this.

Common media features

Feature	Description	Example
max-width	Maximum width of the viewport	@media (max-width: 600px) For screens smaller than 600px
min-width	Minimum width of the viewport	@media (min-width: 769px) For screens wider than 768px
width	Works at exact width(not recomanded)	@media (width: 100px)
max-height	Maximum height of the viewport	@media (max-height: 500px)
min-height	Minimum height of the viewport	@media (min-height: 800px)
height	Works at exact height(not recomanded)	@media (height: 100px)
orientation	Screen orientation	@media (orientation: portrait)
prefers-color-scheme	User's color scheme preference	@media (prefers-color-scheme: dark)
pointer	Accuracy of the pointing device	@media (pointer: coarse)
hover	If the device supports hover	@media (hover: hover)
many many more...

we can use and to set a range:-
@media (min-width: 600px) and (max-width: 1200px) {
  body {
    padding: 20px;
  }
} - Applies styles only when the screen width is between 600px and 1200px.

You can also link to different stylesheets for different media and different widths
e.g - <link rel="stylesheet" media="screen and (min-width: 480px)" href="example1.css"> etc....

tip - Start with a Mobile-First Approach: Write base styles for small screens and use media queries for larger devices.

z-index property:-

The z-index property in CSS is used to control the stacking order of elements on a webpage.
It determines how elements overlap each other when they are positioned on the same plane.
values -
Auto: Default value. The stacking order is determined by the element's order in the DOM (Document Object Model).
Integer (Positive or Negative): Specifies the stack level of the element. Higher values appear in front of lower values. Negative values push the element behind.
e.g - z-index: 10; - Appears in front of elements with lower z-index

z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items
A child element cannot escape the stacking context of its parent.

Icons:-

Bootstrap:-

Bootstrap is a free front-end framework for faster and easier web development.
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
Bootstrap also gives you the ability to easily create responsive designs.
Using Bootstrap is optional. It helps design quickly with pre-built styles, but for unique designs, CSS offers full customization.

Adding Bootstrap:-

We can use link tag inside head tag to add bootstrap in our html.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
add your css file link below it if you want to override bootstrap.
OR we can also download bootstrap to use it.

To add bootstrap for JavaScript use script tag inside body tag.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" >