 INTRODUCTION

 Information & History

 Your first CSS website

 How CSS works?

 Syntax of CSS
 Ways to add CSS
 CSS Selectors
 CSS Comments
 CSS Specificity

 CSS Properties

 CSS Colors
 CSS Backgrounds
 CSS Borders
 CSS Images
 CSS Video Embedding
 CSS Fonts
 CSS Text Styling
 CSS Box Model
 CSS Padding
 CSS Margin
 CSS Hover
 CSS Cursors
 CSS List Styles
 CSS Links
 CSS Combinators
 CSS Pseudo-classes
 CSS Buttons
 CSS Overflow
 CSS Float
 CSS !important
 CSS Maths Functions
 CSS Size
 CSS Positioning
 CSS Z-index
 CSS Forms
 CSS Navigation Bar

 CSS Designing

 CSS Display
  CSS FlexBox
 CSS Grid
 CSS Media Queries

 CSS Advance Topics

 CSS 2D Transform
 CSS Transitions
 CSS Border Images
 CSS Gradients
 CSS Inherit
 CSS Shadows
 CSS ToolTip Text
 CSS Masking
 CSS Pagination
 CSS Media Queries Advanced
 CSS Animations

 CSS FAQs

 Questions

Information & History

Let's start this journey of learning CSS together. I'm Harry, the same guy
from the CodeWithHarry YouTube channel. This tutorial will serve as a
resource for students to learn CSS and use the code from these lessons
as a reference.
Without further ado, let's dive into learning CSS.

What is CSS?
CSS stands for Cascading Style Sheets. It is a stylesheet language that
is used to describe the visual presentation of a web page written in HTML
(Hypertext Markup Language).
HTML creates the structure of the page, while CSS adds styling to
that structure. This tutorial assumes that you have prior knowledge of
HTML. If that's not the case, you can follow the HTML tutorial first.
Why the word "cascade"?
The term "cascade" refers to the priority scheme determining which
CSS rules are applied when multiple rules target an element. This
scheme takes into account specificity and inheritance, ensuring that the
most specific and latest rules are applied.

Why use CSS?

CSS is used to provide styling to HTML elements, making web pages
visually appealing and user-friendly.
Consider the video below to understand how CSS can transform a
webpage:
Let us take this HTML page for example. Here is how it looks without
CSS

This is how it looks after adding CSS

Analogy to Understand CSS
Imagine reading a book with only plain text. It's quite dull, isn't it? Now
picture a book enriched with different colors, fonts, and styles. That's
what CSS does to a webpage.

How does CSS work?

CSS operates by selecting HTML elements and applying styles to them.
Styles dictate the appearance of elements on a webpage. You can target
HTML elements, classes, or IDs, defining properties like colors, fonts,
margins, etc.

/* Example of a CSS rule */

selector {
property: value;
}

Copy

Quick Follow-Up Task:

 Right-click on the screen and select "Inspect" or press (Ctrl +

Shift + C).
 Click on the arrow icon in the top-left corner of the inspection
pane.
 Select elements on the page to toggle the CSS rules.
Key Features of CSS:
 Styles and layouts of web pages.
 Works alongside HTML and XML documents.
 Enables responsive design for different screen sizes.
 Supports interactive effects like hover states and animations.
 CSS is now modularized, with ongoing updates rather than
version numbers.
 Allows reusability of the same rules across multiple HTML
documents.

A Bit of History
CSS was created by Håkon Wium Lie to enhance the visual aspects of
websites. Initially, websites were mainly used by researchers and lacked
visual appeal. As websites became more widespread, the need for better
design grew.

Important References:

 For beginners, start with the HTML tutorial.

 For more insights, check out CSS on Wikipedia.
 For advanced users, the W3C CSS Specifications is a valuable
resource.

Your first CSS website

In this tutorial, we will focus on creating our first CSS website.
We will divide the tutorial into the following parts:

1. Setting up the environment.

2. Creating an HTML page.
3. Adding CSS to HTML.

Setting up the Environment

Installing VS Code

 Go to Google using your preferred browser.

 Type Visual Studio Code download in the search bar.
 Click on download and follow the installation instructions for
your OS.
 Here's a quick video showing the VS Code installation process:

Installing the Live Server Extension

We will also install the Live Server extension in Visual Studio Code to
enable live reloading of pages.
The Live Server extension launches a local development server and
reloads the page live as you make changes.
Here's a quick video showing how to install the Live Server extension:

Creating an HTML Page

If you're not comfortable with HTML, you can start by following this HTML
Tutorial.
Assuming you have some knowledge of HTML, open VS Code and
create a new file named `index.html`.

After creating the HTML file, type "!" and press enter. This will generate
the default HTML boilerplate.
The generated code should look something like this after changing the
title and adding some content to the body:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First CSS Website</title>
</head>
<body>
I'm learning CSS with my favorite CodeWithHarry.
</body>
</html>

Copy

Adding CSS to HTML

Now that we've set up the environment and created an HTML page, let's
add some CSS to style it. Inside the head tag, add the following code:

<style>
body {
text-align: center;
color: white;
background-color: purple;
}
</style>

Copy
You've successfully begun your journey into the world of CSS! As you
follow these tutorials, you'll gain a better understanding of various CSS
properties.

How CSS works?

We wrote our first CSS style but still, things wouldn’t be very much clear.
Let’s look at how CSS works on the DOM model.

How CSS Works?

The following steps will help us understand more about CSS working :

1. The user types the URL and clicks enter.

2. The browser makes a fetch request to the server.
3. HTML is fetched from the server.
 4. HTML is converted into a DOM. In the DOM, each tag is
considered a node.
5. The browser fetches all the related files and assets that are
linked to that HTML, such as external CSS, fonts, images, etc.
6. The browser then parses the CSS and groups it based on the
selectors, which can be tags.
7. Each CSS is attached to its respective node. In this phase, CSS
gets attached to its respective node. This is called a render
tree.
8. The render tree is the well-structured, well-arranged DOM node
that will appear on the screen.
9. The well-structured, custom-designed website is presented on
the screen. This is called painting.

The video will help you understand the process:

Now, there arises a question:

What is a DOM?
A DOM is like a tree structure representation of all the tags and elements
on the page. Each part of a web page, like headings, paragraphs,
images, buttons, etc., will be part of the tree.
You can think of it as a blueprint for a web page that web browsers use to
understand and display web content.
Consider the below example,

The tags are converted into nodes. Each node establishes a parent-child
relationship between each other. To be precise, Document Object
 Model(DOM) is a sort of API that represents and interacts with HTML
documents.
The final result of the above code (the painting):

Some helpful References:

 I will recommend going through, How HTML Works

 MDN will be a great source to get some more insights.

Syntax of CSS
CSS follows a rule-based structure. Each rule consists of a selector and
a declaration block. Selectors pick the HTML elements, while
declaration blocks contain pairs of properties and values.
The general syntax for writing CSS.

selector {
property: value;
}

Copy
Note: Semi-colon (;) at the end of each new property and property value
is IMPORTANT.
For example:
h2{
color: blue;
}

Copy
In the example:

 h2: h2 is the selector.

 color: It's the property.
 blue: The property value.

Within the declaration block, there can be multiple pairs of properties and
values.
Consider the example:

button{
color: white;
background-color: black;
border: transparent;
border-radius: 5px;
}

Copy
 Here, 'button' is the selector, and there are multiple pairs of properties
and values. Each pair is separated by a semicolon ";".
< < Previous

Ways to add CSS

There are three different ways to add CSS to an HTML page, which are:

1. Inline CSS
2. Internal CSS
3. External CSS

Inline CSS
Inline CSS is used to add custom properties to specific elements. The
added style will only reflect on that particular element only.
To use inline CSS, Insert the "style" attribute within the HTML element's
opening tag.
Consider the code snippet:

<h1 style="color: purple;">I'm harry</h1>

<h2>I'm CodeWithHarry</h2>

Copy

Here, the inline style of color: purple is attached to only the h1 tag.
 Note: The downside of using inline CSS is, that once the project
complexity increases, it will become difficult to manage the styles of each
and individual elements.

Internal CSS
Internal CSS is used to apply custom style to the multiple elements on
the same page. The style can be used throughout the HTML page.
Internal CSS is defined in a style block, which will be inside the head
section.
Consider the code snippet:

<head>
<style>
p {
color: red;
}
</style>
</head>

<body>
<h1>CodeWithHarry</h1>
<p>I'm harry, from CodeWithHarry</p>
<p>I'm a Developer and founder of
CodeWithHarry.com</p>
</body>

</html>

Copy
Here, in the style block, selector p will target all p tags and assign them
color:red.
Note: The <style> block should always be in the <head> section.

External CSS
External CSS works similarly to internal CSS but with a twist. Instead of
adding the styles within the HTML file, we create a separate file
with .css extension. This file will hold all the styling details. Then, we link
this file to the HTML page, giving it the instructions on how to look.
The following video will explain, how to link a CSS file to HTML.
There is a new <link> tag in the head section, and this link tag
has rel and href properties.
The following points will explain each keyword's meaning:

1. <link>: This tag is used to create links between different

resources, like stylesheets, fonts, and more. In our case, we are
using a link tag to link the CSS file with the HTML file.
2. rel="stylesheet": rel stands for relationship, this defines the
type of relationship between the HTML document and the linked
resource. When set to "stylesheet", it specifies that the linked
resource is a stylesheet that will be used to style the HTML
content.
3. href="style.css" : The href attribute stands for "hypertext
reference." It specifies the path or URL to the external resource
we want to link. In this case, it's the path to the external CSS file
called "style.css".

Consider the code snippets:

<html lang="en">

<head>
<title>CodeWithHarry</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<p>I'm harry, from CodeWithHarry</p>
<p>I'm a Developer and founder of
CodeWithHarry.com</p>
</body>

</html>

Copy

p{
color: red;
}

Copy
These code snippets will generate this page:
This approach enables to use of the same CSS to multiple HTML files,
wherever the same custom style is required.
This is helpful when we have to maintain consistency on our web pages
and want to use the same CSS styles across multiple pages.
Note: The precedence is Inline CSS > Internal CSS > External CSS. If
we define the same property with different property values in three
different ways, the element will have the property value of inline CSS.
Feel free to explore the CSS Wikipedia page to gain more insights about
CSS working.

CSS Selectors
What are CSS Selectors?
CSS selectors allow us to choose specific elements and apply styles to
them. Suppose we want to add a custom style to only a specific tag(s).
There, We can make use of CSS selector.
There are different types of CSS selectors, which are as follows:

1. Universal Selector
2. Element Selector
3. Id Selector
4. Class Selector
5. Group Selector

Let's look into these selectors one by one

Universal Selector
Universal selector represented by "*" targets all the HTML elements on
the page.
The syntax of Universal Selector is as follows:

* {
property : value;
}

Copy
Consider the code snippet:

<html>

<head>
<style>
* {
color: purple;
text-align: center;
}
</style>
</head>

<body>
<p>Welcome to </p>
<h1>CodeWithHarry</h1>
</body>

</html>

Copy
Output:
 Notice, Irrespective of the tag, the style will be applied to all the elements
and tags.

Element Selector (Type Selector)

The element selector selects the target element based on the specific
type. Suppose you want to underline all the <p> tags; in this case, the
element selector will be the best choice.
The syntax of Element Selector is as follows:

p {
property : value;
}

Copy
A selector can be any HTML tag. Here, we have considered the p tag.
Consider the code snippet:

<html>

<head>
<title>CSS</title>
<style>
p{
 text-decoration: underline;
}
</style>
</head>

<body>
<h1>CodeWithHarry</h1>
<h2>we offer: </h2>
<p>Python Tutorials - 100 Days of Code</p>
<p>Ultimate JavaScript Course</p>
<p>React JS Tutorials For Beginners</p>
</body>

</html>

Copy
Output:

Note: Element selector is not recommended as the same tag can be used
multiple times in the document. So, overlapping rules can occur in the
stylesheet.

ID Selector
 The ID selector targets the elements based on the specific ID. It is written
with the hash “#” character followed by the ID name in the style sheet.
The syntax of ID Selector is as follows:

#ID {
property : value;
}

Copy
Consider the code snippet:

<html>

<head>
<style>
#title {
text-align: center;
color: red;
}
</style>
</head>

<body>
<h1 id="title">CodeWithHarry</h1>
<p>I'm a Developer and the founder of
CodeWithHarry.com</p>
</body>

</html>

Copy
In the style block, the selector #title, will only target the HTML element
having an ID of "title".
Consider the output of the above code:
 Notice, how the property color: red is only applied to <h1> tag.

Class Selector
The class selector does the same job as the id selector, a class selector
helps group various types of elements. Suppose, we want to give a
custom style to a specific group of elements. In this case, the class
selector is the best option.
It is written with the period “.” character followed by the class name in
the style sheet.
The syntax of Class Selector is as follows:

.class {
property : value;
}

Copy
Consider the code snippet:

<html>

<head>
<title>CSS</title>
<style>
.red {
 color: red;
}
</style>
</head>

<body>
<p>This is simple p tag</p>
<p class="red">This p tag has class red</p>
<p>This is simple p tag</p>
<p class="red">This p tag has class red</p>
</body>

</html>

Copy
In the above code snippet, the color:red will only be applied to the
element having class 'red'.

Note: The class selector helps in grouping two or more elements.

Group Selector
 The group selector is used to minimise the code. Commas "," are used
to separate each selector in a grouping. This reduces the number of lines
of code. The code also looks clean.
The syntax of Group Selector is as follows:

div, p, a {
property : value;
}

Copy
Consider the code snippet:

<html>

<head>
<title>CSS</title>
<style>
h1 {
color: red;
}

p,a {
color: purple;
}
</style>
</head>

<body>
<h1>CodeWithHarry</h1>
<p>This is the p tag</p>
<a href="#">This is the anchor (a) tag</a>
</body>
</html>

Copy
In the <style> block, p and a tag are grouped together so, that both tags
will have the same properties.

Summary:

 Universal Selector(*): Target the entire page.

 Element Selector: Target a specific element.
 ID Selector(#): Target element with a specific ID.
 Class Selector(.): Target element(s) with the same class.
 Group Selector: Group elements and target them.

CSS Comments
Comments help with documentation and are helpful for the future users
who read that code, so that they can understand it easily.
Comments are ignored by the browser and Comments don't affect the
styling or layout.
CSS Comments are enclosed between /* and */.
There are two types of comments in CSS:

Single-line comment:
 Single-line comments are contained within one line. They are useful for
short annotations.

Syntax

selector{
/* property: value */
}

Copy
for example:

/* This is a single line commnent */

p{
/* color: red */
}

Copy
here, the comment is between /* and */

Multi-line comments
Multi-line comments span across multiple lines, making them ideal for
detailed explanations or temporarily disabling blocks of code.

Syntax

selector{
/* property1: value1
property1: value1
property1: value1 */
}

Copy
These are similar to single-line comments, but this helps to comment
large descriptions, notes, etc.
for example:

/* This is a
multi line
commment */
p {
/* color: red;
background-color: purple; */
color: purple;
background-color: red;
}

Copy
Tip: If you are using vs code, you can use `cltr + /` to comment the line.

CSS Specificity
CSS Specificity helps determine what style will be applied to the HTML element(s)
when there are overlapping or multiple CSS rules.
It is a value or weight assigned to a CSS selector. The higher the specificity, the
more precedence the selector has.
Let's consider the following code

<html>
<head>
<style>
*{
color: gray;
}
#title{
color: red;
}
.h1{
color: blue;
}
 h1{
color: pink;
}
</style>

</head>
<body>
<h1 id="title" class="h1"
style="color:purple">CodeWithHarry</h1>
</body>
</html>

Copy

Here the question is, what color will h1 be assigned to? This is calculated based
on the selector's components which we will discussed in this tutorial.

The Cascade Algorithm

CSS stands for Cascading Stylesheets. The cascade is the algorithm for solving
conflicts where multiple CSS rules apply to an HTML element. It's the reason that
the text of the button styled with the above CSS will be purple.
Understanding the cascade algorithm helps you understand how the browser
resolves conflicts like this. The cascade algorithm has 4 distinct stages.

1. Position and order of appearance: the order in which your CSS rules appear
2. Specificity: an algorithm that determines which CSS selector has the
strongest match
3. 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
4. Importance: some CSS rules are weighted more heavily than others,
especially with the !important rule type

Lets look into all these one by one

Effect of Position
If there are two rules that have selectors of identical specificity, the last one to be
declared won. In an HTML page, you can add styles in different ways: through
a <link> tag, a <style> tag, or directly in the element's style attribute. If you have
one <link> tag at the top of your page and another at the bottom, the styles from
the bottom one will be used. The same goes for <style> tags; the ones lower
down on the page take priority.
 An inline style attribute with CSS declared in it will override all other CSS,
regardless of its position, unless a declaration has !important defined.
If the browser doesn't support a property, it is ignored!

Specificity
CSS specificity determines which style rules get applied to an element when there
are conflicts. Higher specificity means the style will be used. It's calculated based
on a point system involving inline styles, IDs, classes, and tag names.

Inline Styles

Inline styles have the highest specificity and will always override styles if other
selector(s) are also defined.

<html>
<head>
<style>
*{
color: gray;
}
#title{
color: red;
}
.h1{
color: blue;
}
h1{
color: pink;
}
</style>

</head>
<body>
<h1 id="title" class="h1"
style="color:purple">CodeWithHarry</h1>
</body>
</html>

Copy
 Here, you can see that the color: purple is applied to the h1 tag.

ID Selector

The ID selector also has high specificity but comes after the inline Style specificity.
So, if we have an ID and other selectors except the inline style, then the element
will take the ID selector properties and values.

<head>
<style>
*{
color: gray;
}
#title{
color: red;
}
.h1{
color: blue;
}
h1{
color: pink;
}
</style>
</head>
<body>
<h1 id="title" class="h1">CodeWithHarry</h1>
</body>
</html>

Copy
 Here, you can see the color: red is applied to the h1 tag.

Class and Attribute Selectors

Class selectors and attribute selectors have moderate specificity. Suppose the
element has a class or attribute selector and not an inline style or ID selector, then
the element will take properties and values from the class or attribute selector.

<head>
<style>
*{
color: gray;

.h1{
color: pink;
}
</style>

</head>
<body>
<h1 class="h1">CodeWithHarry</h1>
</body>
</html>

Copy

Here, you can see color:pink is applied to the h1 tag.

 Element Selector:

Element selectors like <p>, <div>, <a>, etc. have low specificity.

<head>
<style>
*{
color: gray;
}
h1{
color: tomato;
}
</style>

</head>
<body>
<h1 class="h1">CodeWithHarry</h1>
</body>
</html>

Copy

Here, you can see color:tomato is applied to the h1 tag.

Universal Selector:

Universal selectors (*) and combining selectors like not, first-child, and last-child
have the lowest specificity.

<head>
<style>
*{
color: gray;
 }
</style>

</head>
<body>
<h1 class="h1">CodeWithHarry</h1>
</body>
</html>

Copy

Here, you can see color:gray is applied to the h1 tag.

So, the order of specificity is:
Inline Style > ID Selector > Class or Attribute Selector > Element Selector >
Universal Selector

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

Then, add up the values of all the parts in the selector.

Here is an example

<h1 id="title" class="h1">CodeWithHarry</h1>

Copy

Here, the specificity value will be 111 because ID has a specificity of 100, the
class has a specificity of 10, and the h1 element has a specificity of 1.
In the case of a specificity tie, the rule that appears last in the CSS is applied.

Importance
 The !important flag in CSS is used to give a particular style rule the highest level
of importance, overriding any other competing styles. When you add !important to
a CSS rule, it will take precedence over other rules affecting the same element,
regardless of their specificity. For example, if you have:

p {
color: red !important;
}

p {
color: blue;
}

Copy

The text in the <p> element will be red, not blue, because the !important flag
makes that rule more important.
an !important at the end of a CSS value gets a specificity score of 10,000 points.
This is the highest specificity that one individual item can get.
However, it's generally best to use !important sparingly, as it can make
debugging and maintaining your stylesheets more complicated. It can override
styles in ways that are hard to trace, leading to unexpected results.

Quick Quiz
What will be the specificity value of the following selector:

a.harryclass.rohan-class[href]:hover {
color: red;
}

Copy

Solution
To calculate the specificity value of the selector a.harryclass.rohan-
class[href]:hover, you can break down its components:

 Element selectors: a contributes 1 point.

 Class selectors: .harryclass and .rohan-class each contributes 10
points, totaling 20 points.
 Attribute selector: [href] contributes 10 points.
 Pseudo-class: :hover adds another 10 points.

Add up all these values:

 1 (element) + 20 (classes) + 10 (attribute) + 10 (pseudo-class) = 41.
So, the specificity value of the selector a.harryclass.rohan-
class[href]:hover will be 41.
< < Previous

CSS Colors
The color property of CSS helps to set the color of the HTML element(s). This
helps to set the foreground color of text, text decorations, and borders.

Syntax:

/* Syntax
selector {
color: value
}
*/
selector {
/* colorname can be any colour, such as red, blue, yellow,
purple, green, etc. */
color: colorname
}

Copy

Note: In CSS we use color, not colour.

Example:

<head>
<style>
p{
color: purple;
}
</style>
</head>
<body>
<p>Hello World</p>
<p>CodeWithHarry</p>
</body>

</html>

Copy

Output:

There are many ways to set the property-value of color, with some of the most common
listed below.

Hexadecimal notation:
The hex code consists of a hash(#) symbol followed by six characters. These six
characters are arranged into a set of three pairs (RR, GG, and BB).
Each character pair defines the intensity level of the colour, where R stands for
red, G stands for green, and B stands for blue.
The intensity value lies between 00 (no intensity) and ff (maximum intensity).
Breaking the Character Set (RRGGBB):

 RR: RR defines the intensity of color red, ranging from 00 (no red) to FF
(maximum red).
 GG: GG defines the intensity of color Green, with values from 00 (no green) to
FF (full green).
 BB: GG defines the intensity of color Blue, varying from 00 (no blue) to FF (full
blue).
 Syntax:

seletor {
color: #RRGGBB;
}

Copy

Example:

<head>
<style>
h1 {
color: #FF0000;
/*Pure Red*/
}
h2 {
color: #00FF00;
/* Pure Green */
}
h3 {
color: #0000FF;
/* Pure Blue */
}
h4 {
color: #b700ff;
/* Custom Color */
}
</style>
</head>
<body>
<h1>CodeWithHarry</h1>
<h2>A Developer</h2>
<h3>Founder CodeWithHarry.com</h3>
<h4>Hello World</h4>
</body>
</html>

Copy

Output:

RGB
RGB stands for “Red, Green, Blue,” and it defines the colour value by taking three
(red, green, blue) arguments.
Each argument value lies between 0 and 255.

Syntax:

selector{
color: rgb(red, green, blue);
}

Copy

Example:

<head>
<style>
h1 {
 color: rgb(0, 0, 0);
/* red:0, green:0, blue:0 */
}

h2 {
color: rgb(255, 255, 255);
/* red:255, green:255, blue:255 */
}

h3 {
color: rgb(30, 150, 220);
}
</style>
</head>

<body>
<h1>CodeWithHarry</h1>
<h2>A Developer</h2>
<h3>CodeWithHarry.com founder</h3>
</body>

</html>

Copy
 Output:

RGBA
Similar to RGB, in RGBA, a stands for alpha value, which defines the opacity of
the color. The alpha value lies between 0 and 1.

Syntax:

selector{
color: rgb(red, green, blue, opacity);
}

Copy

Example:

<head>
<style>
h1 {
color: rgba(0, 0, 0, 0.8);
/* red:0, green:0, blue:0, Alpha: 0.8 = 80% */
}

h2 {
 color: rgb(255, 255, 255, 0.6);
/* red:255, green:255, blue:255 */
}

h3 {
color: rgba(30 150 220 / 60% );
/* red:30, green:150, blue:200, alpha:60% */
}
</style>
</head>

<body>
<h1>CodeWithHarry</h1>
<h2>A Developer</h2>
<h3>CodeWithHarry.com founder</h3>
</body>

</html>

Copy

Output:
HSL
HSL stands for hue, saturation, and lightness. This is another way to set colour
properties.
Breaking each keyword:

Hue(h)

 Hue represents the type of color. It is measured in degrees, and its value lies
from 0 to 360.
 0 degree represents black, 120 degree is for green, and 360 degree is for blue.

Saturation (S):

 Saturation controls the intensity or purity of the color. It is measured in

percentage, and its value lies between 0% and 100%.
 0% saturation is no color (grayscale), and 100% saturation is the most intense
colour.

Lightness (L):

 Lightness determines how light or dark the colour is. It is measured in

percentage, and its value lies between 0% and 100%.
 0% lightness represents pure black, 50% lightness represents normal colour,
and 100% lightness is pure white.

Syntax:

selector{
color: hsl(hue, saturation, lightness);
}

Copy

Example:

<head>
<style>
h1 {
color: hsl(235, 100%, 50%);
}
p {
color: hsl(0, 0%, 0%);
}
 </style>
</head>

<body>
<h1>CodeWithHarry</h1>
<p>A Developer</p>
</body>

</html>

Copy

Output:

HSLA
HSLA is similar to HSL; here, A stands for alpha value, which is used to set the
opacity. Alpha values lie between 0 and 1.

Syntax:

selector{
color: hsla(hue, saturation, lightness, alpha);
}

Copy
 Example:

<head>
<style>
h1 {
color: hsla(235, 100%, 50%, 0.7);
}
p {
color: hsl(0, 0%, 0%, 0.4);
}
</style>
</head>

<body>
<h1>CodeWithHarry</h1>
<p>A Developer</p>
</body>

</html>

Copy

Output:
 < < Previous

CSS Backgrounds
The CSS background property helps set the background style, property,
and effects of the element.
There are various background properties, such as:

Background color
The background color property sets the background colour of HTML tags
such as div, section, p, etc.

Syntax:

selector{
background-color: color;
}

Copy
Note: Color can be hex, rdb, hsl, etc. To learn more about colors, follow
the CSS Colour Tutorial.
Example:

<html>
<head>
<style>
div{
background-color: yellow;
}
h1{
background-color: #FF0000;
}
p{
background-color: orange;
 }
span{
background-color: purple;
}
</style>
</head>
<body>
<div>
<h1>CodeWithHarry</h1>
<p>Developer and founder of
<span>CodeWithHarry.com</span></p>
</div>
</body>
</html>

Copy
Output:

Background Image
The Background Image property sets an image as a background by
providing the image URL within the url() function.
 Syntax:

selector{
background-image: url('image-url');
}

Copy
Example:

<style>
div{
background-image: url('harrybhai.png');
}
</style>

Copy
Output:

The image is repeated many times because CSS repeats the image on
both the x and y axes, to avoid leaving empty spaces due to the image
dimensions. To solve this issue, use the background property repeat.

Background repeat
Background repeat helps to control how the image will repeat.
Syntax

selector{
background-repeat: repeat-x || repeat-y || repeat ||
no-repeat;
}

Copy
background-repeat can be set to repeat, no-repeat, repeat-x (horizontal),
or repeat-y (vertical).

repeat-x
repeat the image in the x direction or horizontally repeat the image.

Syntax:

selector{
background-repeat: repeat-x;
}

Copy
Example:
repeat-y
repeat the image in the y direction or vertically repeat the image.

Syntax:

selector{
background-repeat: repeat-y;
}

Copy
Example:

repeat
The background image is repeated in both the x and y directions. This is
the default.

Syntax:

selector{
background-repeat: repeat;
}

Copy
 Example:

no-repeat
The background image is not repeated in any direction. Only one image
will be on the screen.

Syntax:

selector{
background-repeat: no-repeat;
}

Copy
 Example:

Background Size
The Background Size property sets custom sizes for the background
image.

Syntax:

selector{
background-size: propery-value;
}

Copy
Property-value can be any of the following:

cover:
The image fits the whole screen according to the dimensions; the
background area will be completely covered by the image while
maintaining its aspect ratio.

Syntax

div{
 background-image: url("./harrybhai.png");
background-size: cover;
}

Copy

contain:
Scales the image to fit within the background area entirely while
maintaining its aspect ratio.

Syntax:

div{
background-image: url("./harrybhai.png");
background-size: contain;
}

Copy
auto
The image will be displayed in its original size. This is the default

Syntax:

div{
background-image: url("./harrybhai.png");
background-size: auto;
}

Copy

Distinct width and height

We can manually set the width and height of the background image.

Syntax:

div{
background-image: url("./harrybhai.png");
background-size: 100% 100%;
}
Copy
Note: The width and height are used in percentage(%);

Background Position
This property sets the starting position of the background image within
the container (parent div).
By default, the position is top left.

Syntax:

selector{
background-position: property-value;
}

Copy
Property value can be top, bottom, left, right, or center. We use
combinations of positions such as top left, top right, bottom left, bottom
right, centre, etc.
Example:

div{
background-image: url("./harrybhai.png");
background-repeat: no-repeat;
 background-position: top right;
}

Copy

Background Attachment
The background-attachment property determines whether the
background image scrolls with the content.

Syntax:

div{
background-attachment: fixed || scroll;
}

Copy
Use fixed for a fixed background, or scroll for a scrolling background.

Shorthands
All the background properties would look something like this in a single
line.

Syntax
selector{
background: [background-color] [background-
attachment] [background-image] [background-repeat]
[background-position];
}

Copy
Example:

div{
background: purple fixed url("./harrybhai.png") no-
repeat right top;
}

Copy

CSS Borders
CSS borders help define the visual boundaries of HTML elements. It can
be text, div, p, h1, etc.
 The following are the different properties of a CSS border:

Border Style
Border styles define the style of the border.
There are various types of border styles; consider the code snippet:

<html lang="en">
<head>
<style>
.none {
border-style: none;
}
.hidden {
border-style: hidden;
}
.dotted {
border-style: dotted;
}
.dashed {
border-style: dashed;
}
.solid {
border-style: solid;
}
.double {
border-style: double;
}
.groove {
border-style: groove;
}
.ridge {
border-style: ridge;
 }
.inset {
border-style: inset;
}
.outset {
border-style: outset;
}
</style>
</head>
<body>
<p class="none">no border</p>
<p class="hidden">Hidden Border</p>
<p class="dotted">Dotted Border</p>
<p class="dashed">Dashed Border</p>
<p class="solid">Solid border</p>
<p class="double">Double Border</p>
<p class="groove">Groove border</p>
<p class="ridge">ridge border</p>
<p class="inset">inset border</p>
<p class="outset">Outset Border</p>
</body>
</html>

Copy
Border Color
The border color property sets the colour of the border. We can use
colourname, hex, rgb, or hsl to set the color.
If you are not familiar with CSS colours, then follow the CSS
Color Tutorial.
Consider the code snippet:

<html lang="en">
<head>
<style>
.dotted {
border-style: dotted;
color: purple;
}
.dashed {
border-style: dashed;
border-color: #FF0000;
}
.solid {
border-style: solid;
border-color: rgb(100, 233, 12);
 }
.double {
border-style: double;
border-color: hsl(10, 50, 30);
}
</style>
</head>
<body>
<p class="dotted">Dotted Border</p>
<p class="dashed">Dashed Border</p>
<p class="solid">Solid border</p>
<p class="double">Double Border</p>
</body>
</html>

Copy

Border Width
Specifies the width of the border. Sets the width of the border in
pixels(px), or there are values like medium, thin, and thick to set the
border width.
 Consider the code snippet:

<html lang="en">

<head>
<style>
.solid1 {
border-width: 5px;

border-style: solid;
border-color: red;
}
.solid2 {
border-width: thin; /* thin || medium ||
thick */

border-style: solid;
border-color: #FF0000;
}
</style>
</head>
<body>
<p class="solid1">Solid border 1</p>
<p class="solid2">Solid border 2</p>
</body>
</html>

Copy
Border Radius
Border radius helps create rounded borders for elements like buttons or
images.

<html lang="en">
<head>
<style>
.solid1 {
border-radius: 20px;

border-style: solid;
border-color: red;
}
.solid2 {
border-radius: 25%;

border-style: solid;
border-color: #FF0000;
}
</style>
</head>

<body>
<p class="solid1">Solid border 1</p>
<p class="solid2">Solid</p>
</body>
</html>

Copy

We can also set border-radius to each individual edge (specific corners),

such as top left, bottom right, top right, and bottom left.

Set the border of individual corners

Syntax:

selector {
border-radius: 10px 5px 15px 35px ;
/* border-radius: top-left top-right bottom-right
bottom-left ; */

}
Copy
or

selector {
border-top-left-radius: 10px;
border-top-right-radius: 5px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 35px;
}

Copy

Border Collapse
While working with tables, border-collapse helps to control how table
borders interact with each other.
There are two properties of border-collapse.

Collapse
Syntax:

selector {
border-collapse: collapse;
}

Copy
Separate
Syntax:

selector {
border-collapse: separate;
}

Copy

Border Spacing
 While working with tables, border-spacing helps define the space
between the borders of adjacent table cells.

selector {
border-spacing: 5px;
}

Copy

Shorthand
Border shorthand takes three properties: width, style, and color.

Syntax:

select{
border: width style color;
}

Copy
Example:

<html lang="en">
<head>
<style>
p {
border: 2px solid red;
}
</style>
</head>
<body>
<p>Hello world, I'm CodeWithHarry</p>
</body>
</html>

Copy

CSS Images
Images are an essential part of the website. Images help enhance the
website's look.
Syntax to use for the CSS image:

<img src="img_location" alt="alt_text">

Copy
There are two attributes:

 src: The path of the image.

 alt: Alternate text for the image, if the image is not displayed
due to any issue.

Example:

<html lang="en">
<head>
<title>CWH</title>
</head>
<body>
<img src="./cwh.png" alt="cwh">
</body>
</html>

Copy

There are various properties of a CSS image, which are as follows:

Image width and height

There are two ways to specify the width and height of the image.
Inline
Example:

<html lang="en">
<head>
<title>CWH</title>
</head>
<body>
<img src="./cwh.png" height="300" width="400"
alt="cwh">
</body>
</html>

Copy

Here, the width and height are in pixels (px).

Internal/External CSS
Example:

<html lang="en">
<head>
<title>CWH</title>
 <style>
img{
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<img src="./cwh.png" alt="cwh">
</body>
</html>

Copy

Note: We can use pixels (px), percentages (%), or any other unit to
specify the width and height of the image.

Image Border Radius

Image border-radius helps create rounded corners for the image.

Syntax:
selector{
border-radius: units;
}

Copy
Example:

<html lang="en">
<head>
<title>CWH</title>
<style>
img{
border-radius: 25px;
}
</style>
</head>
<body>
<img src="./cwh.png" alt="cwh">
</body>
</html>

Copy
Image Responsiveness
Responsive images help to give a clear view of the image at different
sizes of the screen.

Syntax:

selector{
max-width: units;
height: auto;
}

Copy
height: auto helps to achieve the responsive layout of the image.
To play around with a responsive layout, follow the steps:

1. right-click and click on inspect.

2. Click on the toggle device toolbar (laptop mobile icon) or (ctrl +
Shift + M).
3. Change the dimensions and play around.

There are other ways to make the image responsive, such as:

fit-content
 The fit content specifies the size of that element, which should be
determined by its content.
Syntax:

selector{
width: fit-content;
}

Copy
We can also set the maximum width of the element.

selector{
width: fit-content(200px);
}

Copy
Here, the element's width will be as wide as its content, up to a maximum
of 200 pixels.

max-content
The max-content property makes the element as wide as its content but
not wider than the screen.
Syntax:

selector{
width: max-content;
}

Copy

min-content
The min-content property makes the element's width shrink to the
minimum required to display its content.

selector{
 width: min-content;
}

Copy

Image Opacity
Image opacity controls the transparency of the image. The property value
ranges from 0 to 1.

Syntax:

img{
opacity: unit;
}

Copy

Image Filter
The CSS image filter allows you to apply various visual effects to the
image.

Syntax:
img{
filter: property-value;
}

Copy
Here, property value can be, any of the following:

Grayscale
Grayscale converts an image to grayscale, i.e., black and white. It sort of
adds an overlay of grey color to the image.
Example:

img{
filter: grayscale(100%);
}

Copy

Note: The grayscale value ranges between 0 and 100 per cent. 0, which
is the default image, and 100%, which is fully black and white.

Blur
Blur applies a blur effect to the image.
 Example:

img{
filter: blur(5px);
}

Copy

Note: The blur value is specified in pixels(px)

Brightness
The brightness property value helps in adjusting the brightness of the
image.

img{
filter: brightness(180%);
}

Copy
 Note: The brightness level is specified in percentage. 0 being the black
image, as brightness will be 0%, and as the value increases, brightness
content increases.

Contrast
The contrast helps in adjusting the contrast of the image.

img{
filter: contrast(10%);
}

Copy
 Note: The contrast level is specified in percentage.

Invert:
Invert is used to invert the colours of the image.

img{
filter: invert(10%);
}

Copy
 Note: The invert value is specified in percentage.

Saturate
Saturate helps to adjust the saturation level of colours.

img{
filter: saturate(100%);
}

Copy

Note: The saturation value is specified in percentages.

Hue-rotate
The hue rotates the colours of the image.
Example:

img{
filter: hue-rotate(90deg);
}

Copy
 Note: The hue-rotate value is specified in degrees (deg). Positive hue
rotation will increase the hue value, while negative hue will decrease the
hue value.

CSS Video Embedding

CSS helps to customize the visual effects of video. If you are not familiar
with videos, follow the HTML Video tutorial.

Example:

<body>
<video controls>
<source src="./Sigma Web Development
Course.mp4" type="video/mp4"> Your browser does not
support the video tag.
</video>
</body>

Copy

style.css
video {
width: 500px;
height: 200px;
}

Copy
Output:

CSS Fonts
Fonts play a crucial role in making your page visually appealing. Fonts
decide how texts will look on the screen; depending on the website,
different kinds of fonts are used.
Let’s look at the major font attributes.

Font Color
Font color defines the colour of the text or typography.
Syntax:

selector{
 color: red;
}

Copy
For an in-depth explanation of colours, follow the CSS Color Tutorial.

Font size
The font size property sets the size of the fonts.
It has some predefined sizes, such as small, medium, large, larger, etc.
The most commonly used units for font size are px (pixels), em (ems),
rem (root ems), and percentage (%).
Quick notes:

 px: px is the absolute unit. This is useful for setting precise

sizes.
 em: em is the relative unit, based on the font size of the parent
element. If the element's font size is 1.5 em, that means the
element will be 1.5 times the size of the parent.
 rem: rem is the relative unit, based on the font size of the root
element, i.e., <html>.

Example:

<html lang="en">
<head>
<style>
#p1 {
font-size: small;
}
#p2 {
font-size: medium;
}
#p3 {
font-size: large;
}
#p4 {
 font-size: larger;
}
#p5 {
font-size: 25px;
}
#p6 {
font-size: 2em;
}
#p7 {
font-size: 2rem;
}
#p8 {
font-size: 50%;
}
</style>
</head>
<body>
<p id="p1">font-size: small</p>
<p id="p2">font-size: medium</p>
<p id="p3">font-size: largr</p>
<p id="p4">font-size: larger</p>
<p id="p5">font-size: 25px</p>
<p id="p6">font-size: 2em</p>
<p id="p7">font-size: 2rem</p>
<p id="p8">font-size: 50%</p>
</body>
</html>

Copy
CSS Font Style
The font style property sets the style of the font.
There are three types of font styles: italic, normal, and oblique.
Quick notes:

 italic: Italic texts are slightly to the right.

 normal: Default text style.
 Oblique: Oblique is similar to italic but has less bend

Example:

<html lang="en">

<head>
<style>
#p1 {
font-style: italic;
}
#p2 {
font-style: normal;
}
#p3 {
 font-style: oblique;
}
</style>
</head>
<body>
<p id="p1">font-style: italic</p>
<p id="p2">font-style: normal</p>
<p id="p3">font-style: oblique</p>
</body>
</html>

Copy

CSS Font Variant

The CSS font variant property helps to toggle with the variations of the
text.
There are two common values for the font-variant property.

1. normal: The default value.

2. small-caps: This value renders the text in small capital letters.

Example:
<html lang="en">
<head>
<style>
#p1 {
font-variant: normal;
}
#p2 {
font-variant: small-caps;
}
</style>
</head>
<body>
<p id="p1">font-variant: normal;</p>
<p id="p2">font-variant: small-caps;</p>
</body>
</html>

Copy

CSS Font Weight

The font-weight property controls the thickness or boldness of the text.
 The values range from 100 (thin) to 900 (ultra-bold) and also have some
predefined values such as lighter, bold, and bolder.
Example:

<html lang="en">
<head>
<style>
#p1 {
font-weight: 100;
}
#p2 {
font-weight: 200;
}
#p3 {
font-weight: 300;
}
#p4 {
font-weight: 400;
}
#p5 {
font-weight: 500;
}
#p6 {
font-weight: 600;
}
#p7 {
font-weight: 700;
}
#p8 {
font-weight: 800;
}
#p9 {
 font-weight: 900;
}
#p10 {
font-weight: lighter;
}
#p11 {
font-weight: bold;
}
#p12 {
font-weight: bolder;
}
</style>
</head>
<body>
<p id="p1">font-weight: 100</p>
<p id="p2">font-weight: 200</p>
<p id="p3">font-weight: 300</p>
<p id="p4">font-weight: 400</p>
<p id="p5">font-weight: 500</p>
<p id="p6">font-weight: 600</p>
<p id="p7">font-weight: 700</p>
<p id="p8">font-weight: 800</p>
<p id="p9">font-weight: 900</p>
<p id="p10">font-size: lighter</p>
<p id="p11">font-size: bold</p>
<p id="p12">font-size: bolder</p>
</body>
</html>

Copy
Font Family
The font family property specifies the font stack. This is used to set the
preferred font for the text content.
We can define multiple font family names separated by commas based
on priority.
Syntax:

selector{
font-family: font1, font2, font3;
}

Copy
Example:

<html lang="en">
<head>
<style>
h1{
font-family: 'Courier New', Courier,
monospace;
}
h2{
 font-family: 'Times New Roman', Times,
serif;
}
</style>
</head>
<body>
<h1>CodeWithHarry</h1>
<h2>Hello World</h2>
</body>
</html>

Copy

Generic Font family

There are five generic font family names that serve as fallback options
when specific fonts are not available:

1. serif: generic serif fonts (like Times New Roman).

2. sans-serif: generic sans-serif fonts (like Arial or Helvetica).
3. monospace: generic monospaced fonts (like Courier New).
4. cursive: generic cursive fonts (for handwritten styles).
5. fantasy: generic fantasy fonts (for decorative styles).
 Tip: It is recommended to end the font family with any of these generic
font family names.

Custom fonts
We can also use custom fonts for our websites; here, we will be
using Google Fonts.
Follow the steps:

1. Go to https://fonts.google.com/
2. Select your preferred font.
3. Choose the fonts based on font weight.
4. Copy the import link and paste it on the top of the stylesheet.
5. Copy the font family and paste it wherever you want to use it.

Or Follow the video:

CSS Text Styling

In this tutorial, we will cover some of the important text styling properties:

Text Decoration
The text-decoration property adds various types of text decorations.
Syntax:

selector {
text-decoration: value;
}

Copy
There are four values for text-decoration:

 overline: adds a line above the text

 underline: adds a line below the text
 line-through: Adds a line to the text.
 none: To remove decoration.

Example:
<html lang="en">
<head>
<style>
#p1 {text-decoration: overline;}
#p2 {text-decoration: underline;}
#p3 {text-decoration: line-through;}
#p4 {text-decoration: overline underline;}
</style>
</head>
<body>
<p id="p1">text-decoration: overline</p>
<p id="p2">text-decoration: undrline</p>
<p id="p3">text-decoration: line-through</p>
<p id="p4">text-decoration: overline underline</p>
</body>
</html>

Copy

Text Alignment
 The text alignment property is used to align the text within the container.
Container can be a div, section, etc.
Syntax:

selector{
text-align: value;
}

Copy
There are four values for text alignment:

 left: align the text to the left.

 centre: align the text to the centre.
 right: align the text to the right.
 justify: spread the text evenly between the left and right
margins.

Example:

<html lang="en">
<head>
<style>
#p1 {text-align: left;}
#p2 {text-align: right;}
#p3 {text-align: end;}
#p4 {text-align: justify;}
</style>
</head>
<body>
<p id="p1">text-align: left</p>
<p id="p2">text-align: right</p>
<p id="p3">text-align: end</p>
<p id="p4">text-align: justify</p>
</body>
</html>
Copy

Text Transformation
It transforms the text case.
Syntax:

selector {
text-transform: value;
}

Copy
There are four values for text-transform:

 uppercase: Transform text to uppercase (all capital letters).

 lowercase: transform text to lowercase (all small letters).
 capitalise: capitalise the first character from each word.
 none: To remove text transformation.

<html lang="en">
<head>
<style>
#p1 {text-transform: uppercase;}
#p2 {text-transform: lowercase;}
 #p3 {text-transform: capitalize;}
#p4 {text-transform: none;}
</style>
</head>
<body>
<p id="p1">text-transform: uppercase</p>
<p id="p2">text-transform: lowercase</p>
<p id="p3">text-transform: capitalize</p>
<p id="p4">text-transform: none</p>
</body>
</html>

Copy

Letter Spacing
The letter-spacing property allows to specify the spacing between each
character in the text.
The property values can be in pixels (px), em, rem, percentage (%), etc.
Example:

<html lang="en">
<head>
<style>
h1{
letter-spacing: 5px;
}
</style>
</head>
<body>
<h1>CodeWithHarry</h1>
</body>
</html>

Copy

Line Height
The line-height property controls the spacing between the two lines of
text.
Example:

<html lang="en">
<head>
 <style>
h1{
line-height: 3.5;
}
</style>
</head>
<body>
<h1>CodeWithHarry</h1>
<h1>Developer and CodeWithHarry.com founder</h1>
</body>
</html>

Copy
The value of 3.5 means that the space between lines will be 3.5 times the
height of the font size.

Text Shadow
The text-shadow property adds a shadow to the text.
Syntax:

selector{
 text-shadow: Horizontal offset, vertical offset,
blur radius, color;
}

Copy
Example:

<html lang="en">
<head>
<style>
h1{
text-shadow: 2px 3px 4px red;
}
</style>
</head>
<body>
<h1>CodeWithHarry</h1>
</body>
</html>

Copy
Text Overflow
The text-overflow property handles text that overflows its container.
There are two values we can use with text-overflow:

 ellipsis: Truncates overflowing text with an ellipsis.

 clip: clips the text without any visual indication.

CSS Box Model

The CSS Box model defines how elements are rendered and how their dimensions
are calculated.
It describes the structure of an element as a rectangular box that has content,
padding, a border, and a margin.
The box model consists of four main components, which are

1. Content
 The innermost component of the box model is the actual content of the
element. It can be text, image, video, etc.
 The content area is defined by the width and height properties.

2. Padding
 The space between the actual content and the border of the element is
the padding.
 The padding area is defined by the property padding. For more details,
follow the CSS Padding tutorial.

3. Border
 The border surrounds the content and padding and gives the visual
border of the element.
 The border properties can be controlled using the border keyword. For
more details, follow the CSS Borders tutorial.

4. Margin
 The margin is the space outside the element that separates it from other
elements in the layout.
 The margin of the element is controlled by the margin property. For
more details, follow the CSS Margin tutorial.
 The CSS Box model can be visually represented as:

Calculating the total dimension of the element

The total width and height of the element is calculated with the formula:
Total Width = Width + Left Padding + Right Padding + Left Border + Right Border
+ Left Margin + Right Margin
Total Height = Height + Top Padding + Bottom Padding + Top Border + Bottom
Border + Top Margin + Bottom Margin
Example:

<head>
<style>
p{
width: 200px;
height: 300px;
padding: 15px;
border: 10px solid red;
margin: 5px;
}
</style>
</head>
<body>
<p>CodeWithHarry</p>
</body>
</html>

Copy
Here, the total height and width will be represented as
Total Width = 200px (width) + 15px (left padding) + 15px (right padding) + 10px
(left border) + 10px (right border) + 5px (left margin) + 5px (right margin) = 260px.
Total Height = 300px (Height) + 15px (Top Padding) + 15px (Bottom Padding) +
10px (Top Border) + 10px (Bottom Border) + 5px (Top Margin) + 5px (Bottom
Margin) = 360px

Playaround:
To view the dimension of any element follow the steps or video:

1. Right-click and click on Inspect.

2. Click on the arrow key in the top left corner.
3. Select the element
4. Unhide the computed styles sidebar.
5. Toggle the properties.

Here's a Quick Video Explaining the playaround:

< < Previous