HTML CSS Handbook Learn HTML and CSS

Vikalp Kaushik
HTML & CSS Handbook

Copyright © 2022 by Vikalp Kaushik
All rights reserved. No part of this publication may be reproduced, stored or

transmitted in any form or by any means, electronic, mechanical, photocopying,
recording, scanning, or otherwise without written permission from the publisher. It
is illegal to copy this book, post it to a website, or distribute it by any other means
without permission.
First edition
This book was professionally typeset on Reedsy

Find out more at reedsy.com
Contents
Foreword
1. HTML Introduction
2. First Look
3. HTML Tags
4. Page Layout
5. Forms, Lists & Table
6. SEO
7. CSS Introduction
8. Getting Started
9. Colors & Backgrounds
10. CSS Box Model
11. Fonts & Display
12. Size & Positions
13. Flexbox
14. Grid & Media Query
15. Transforms, Transitions & Animations
16. Projects
Also by Vikalp Kaushik
Foreword
Hi there!
First of all, thanks for picking up a copy - you’re amazing.
This book does not try to cover everything under the sun related to HTML &
CSS. It focuses on the core concepts of the HTML & CSS, trying to simplify the
more complex things.
I wish to assist you in becoming familiar with HTML & CSS and gaining a rapid
understanding of how to use this fantastic tool for creating amazing web
designs.
Vikalp Kaushik
1
HTML Introduction
HTML stands for Hyper Text Markup Language.
HTML is the language of the web. It’s used to make web pages and pages on the
internet. HTML tags are used to define the look and feel of a website.
We can simply construct stunning websites if we learn these HTML tags and
how to put them together!
So, what’s the big deal about CSS and Java Script?
HTML is used to define a page’s layout - its bare bones structure.
CSS is used to provide styling to the HTML-created bare-bones page.
Java Script is used to perform page layout logic, such as what occurs when a
user hovers over a text, when to hide or show items, and so on.
A Lovely Comparison
https://www.pinterest.ca/pin/571183165342554995/?autologin=true
In this book, we’ll begin to learn how to create gorgeous layouts.
Even Notepad may be used to create HTML. Alternatively, you can use any text
editor of your choosing to make these work easier.
2
First Look
We begin by creating a file called index.html, which is a unique filename that

appears when the website’s root address is typed.
<!Doctype html> → Indicates that this is an HTML5 document.

<html> → an HTML page's root
<head> → This tag contains page metadata.
<title> My Website </title> → contains title
</head>
<body> → The page's main content (rendered by the browser)
<h1> This is a heading </h1> → heading tag
<p> My paragraph </p> → paragraph tag
</body>
</html>
A tag acts as a container for information as well as other HTML tags.
Quick Points:
The HTML tag has two children: the head and body tags.
The majority of HTML components have an opening and closing tag, with
content in between.
There is no content in some HTML tags. Empty tags, such as <br>, <hr>,
and so on, are known as empty tags.
The extension .htm or .html can be used.
To inspect a website’s HTML code, utilize Chrome’s “Inspect Element” or
“View Page Source” options.
Comments in HTML
In HTML, comments are used to indicate text that should not be parsed. They
can assist in the documentation of the source code.

Case Sensitivity
HTML is a language that doesn’t care about case. The <H1> and <h1> tags are
interchangeable or same.
What to do now?
Examine your favorite website and make a change to the displayed page, or
view the page source and copy the exact lines of code.
3
HTML Tags
The page layout can be defined by adding components to the body tag.
HTML Element
From the first to the last tag, everything is included.
<body> → Opening tag

Content
</body> → Closing tag
HTML Attributes
To add further information to an HTML tag, we use this, like href. Example:
<a href = "https://betterdesigning.com/" > Better Design </a>
In attributes, we can use single or double quotes.
The Heading Tag

In HTML, the heading tag is used to identify headings. We have tags for the
most significant to the least important headings, ranging from <h1> to <h6>.
<h1> Most Important heading </h1>
Paragraph Tag
To add paragraphs to an HTML page, we use paragraph tags.
<p> This is a paragraph </p>
Anchor Tag
The Anchor tag is used to create links inside an HTML page to existing content.
<a href= "https://vikalpkaushik99.medium.com"> Read Blogs </a>
Image Tag
The img tag is used to include images in an HTML document.
<img src="image.jpg" >
Bold, Italic and underline tags

To highlight the text, we can use bold, italic, and underline tags as follows:
<b> This is bold </b>

<i> This is italic </i>
<u> This is underline </u>
<br> tag
In an HTML document, the br tag is used to create line breaks.
<hr> tag
In HTML, the hr tag is used to generate a horizontal ruler that is frequently
used to separate text.
Subscript and Superscript

In HTML, we can use the following syntax to add subscripts and superscripts:
<sub> this </sub> is subscript

<sup> this </sup> is superscript
<pre> tag
Extra spaces and newlines are always ignored by HTML. We utilise pre tag to
display a piece of text in its entirety.
<pre>
This is written
using pre
tag
</pre>
What to do now?
Create a HTML page using all tags mentioned above.
4
Page Layout
It results in a greater page layout, better crawling by search engines, and an

improved user experience when we utilize the proper tag in the right place. To
obtain the task, we employ the following tag.
<body>
<header> Navigation </header>
<main> Website content </main>
<footer> Links & Social accounts </footer>
</body>
The following tags are inserted inside the main tag:
<main> → The main opening tag

<section> → A page section
<article> → A self contained content
<aside> → Content aside from the content (eg Ads etc)
</main> → The main closing tag
It is not necessary to construct a page like this, but it does produce a

comprehensible and structured layout that is also beneficial to SEO.
The Div tag

The <div> tag is a block level element that is frequently used as a container for
other elements. (Always uses the entire width)
The Span tag
The <span> tag is used to create an inline container. Takes up as much space as
is required.
What to do now?
Create a HTML page which opens an page when clicked on an image or link.
5
Forms, Lists & Table
HTML forms
The form tag is used to collect input from the user using an HTML form.
<form>
-- Element of the form --
</form>
There are various form elements for various types of user input.
Input element : Text, checkbox, radio, button, and submit are examples of
input elements. There is also a file type.
Textarea element : The cols and rows attributes can be used to size the
textarea element, which defines a multi-line text input.
Select element : A drop-down list is defined by the select element.
Lists
Lists are used to display content which represents a list.
Unordered list : Used to list unordered items
<ul>
<li> Home </li>
<li> About </li>
</ul>
Ordered list : Used to list ordered items

<ol>
<li> Home </li>
<li> About </li>
</ol>
Tables
In HTML, the table tag is used to define tables. It’s a tool for formatting and
displaying tabular data.
<tr> tag: Used to display table row.
<td> tag: Used to display table data.
<th> tag: Used in place of table data for displaying table headers.
To add a caption to the table, we use <caption> tag inside table.
thead tag: Used to wrap table head (caption & <tr> with <th>)
tbody tag: Used to wrap the table body.
Colspan attribute
This property is used to make cells that span multiple columns.
<th colspan="3"> Data </th>
What to do now?
1. Create an sign up form.
2. Create a table displaying details of students.
3. Create an order list of months.
6
SEO
We’ll concentrate solely on HTML in terms of SEO. We will not be discussing

the aspects of SEO such as keyword research and article optimization.
Types of SEO:
Onpage SEO
Offpage SEO
HTML SEO
The following strategies can be used by HTML developers to create SEO:
Set the title in a clear and concise manner.
Create a meta description.
<meta name="description" content = "my website">
Make a catchy URL slug.

The meta keywords tag should be set.
Set the author tag in the meta description.
<meta name="author" content = "Harry">
Create a favicon for your website.

Images and other resources should be compressed.
Remove any HTML/CSS/JS files that are no longer in use.
Image alt text should be added.
7
CSS Introduction
We need CSS to build a website, apply styles to it, and make it appear great.
HTML is merely the skeletal layout of a website.
What is CSS?
CSS stands for Cascading style sheets.
CSS is optional, yet it transforms a drab HTML page into a lovely, responsive
website.
Why Learn CSS?

In the field of web development, CSS is a highly sought-after ability. If you
learn CSS, you can make your websites seem exactly how you want them to.
Your first line of CSS

Make a.css file in your folder and include it in your HTML. In your CSS, add the
following line.
body {
background-color: black;
}
This will make the background of your page black.
8
Getting Started
In this part, we’ll make our first CSS website.
HTML id and class attributes

When an id is assigned to an HTML element, it serves as a unique identifier for
that element. When an HTML element is given a class, however, it becomes a
member of that class. A single class can contain several elements, but each
element must have its own id (if assigned).
An element like this can have numerous classes applied to it.
<div id="first" class="A1 A2 A3">

unique Id and multiple classes followed by spaces
</div>
Three ways to add CSS to HTML

There are 3 ways to add CSS to HTML:
<style> tag - Adding <style> … </style> to HTML
Inline CSS - Adding css using style attribute.
External CSS - Adding a stylesheet to HTML using <link> tag.
CSS Selectors
A CSS selector is used to style one or more HTML elements. Selector is similar
to body.
body {
color: white; - Declaration (property: value)
background : black; - Declaration
}
Element selector
It’s used to pick out an element based on its tagname.
h1 {
color: green;
}
Id selector
It’s used to find an element with a certain id.
# is used to target by id
#myId {
color: white;
background: black;
}
Class selector
It’s used to find an element that has a specific class.
. is used to target by class

.class {
background: red;
}
Quick Points:
Selectors can be grouped in this way.
h1, h2, h3, p {

color: green;
}
The universal selector ‘*’ may be used to select all items.
* {
margin: 0;
padding: 0;
}
External and internal styles will be overridden by an inline style.
Comments in CSS
In CSS, comments are content that is not parsed and is thus disregarded.
/* This is comment */
What to do now?
Create a HTML page using all CSS selectors.
9
Colors & Backgrounds
CSS rules are just selectors and key-value pairs. To alter color and set
backgrounds, we may use CSS rules.
Color property
The color property of CSS may be used to change the color of text within an
element.
h1 {
color: yellow; → Text color will be changed to yellow.
}
Similarly, we may change the color of many components.
Types of color values

The most often used color values in CSS are listed below.
1. RGB: Specify color using Red, green, blue values, example, rgb(200, 98,
70).
2. HEX Code: Specify color using hex code, example, #00FF44.
3. HSL: Specify the color using hsl (hue saturation lightness) values,
example, hsl (8, 90%, 63%).
Any of these variables can be used to provide the color or background color
value.
Quick Point: For color, we also have RGBA and HSLA values, but they are rarely
utilized by novices. Alpha is represented by the letter A.
Background-color property
The CSS background-color attribute defines a container’s background color.
for example:
.green {
background-color: green;
}
Background-image property
To set a picture as the background, use this property.
h1 {
background-image: url("myimage.png");
}
The image is by default repeated in X & Y directions.
Background-repeat property
repeat-x: repeat in horizontal direction.
repeat-y: repeat in vertical direction.
no-repeat: image not repeat.
Background-size property
cover: fits & no empty space remains.
contain: fits & image is fully visible.
auto: display in original size.
{{width}}: Set width, and height will be set automatically.
{{ width}} {{ height}}: Set width & height.
Background position property

Sets the background image’s initial position.
h1 {
background-position: left top;
}
Background - attachment property

A background image’s scroll able or non-scroll able character is defined by this
property.
h1 {
background - attachment: fixed;
}
Background Shorthand
Multiple background properties can be configured with a single property.
h1 {
background: yellow url("myimage.png") no-repeat fixed right top;
}
Given that the others are in sequence, one of the characteristics might be
missing.
What to do now?
Create a card with background image with given width and height.
Create a page with a fixed non scroll able background.
Tried out background shorthand properties.
10
CSS Box Model
All HTML elements are treated as boxes in the CSS box model.
https://edu.gcfglobal.org/en/basic-css/the-css-box-model/1/
Setting width & Height

In CSS, we can specify the width and height as follows:
#box {
height: 70px;
width : 70px;
}
It’s important to keep in mind that the entire width/height is computed as

follows:
Total height = height + top / bottom padding + top / bottom border + top /
bottom margin
Setting Margin & Padding

Margin and padding can be set as follows:
.box {
margin: 3px;
padding: 4px;
}
.box {
margin: 2px(top) 0px(right) 2px(bottom) 1px(left);
}
.box {
margin: 7px(top & bottom) 3px(left & right);
}
Individual margins and padding can also be configured as follows:
margin-top: 10px;
margin-bottom: 3px;
margin-left: 8px;
margin-right: 5px;
Setting Borders
The border can be set as follows:
.border {
border-width: 1px;
border-style: solid;
border-color: red;
}
or just set
.border {
border: 2px solid red;
}
Border Radius
To generate rounded borders, we may adjust the border radius.
.radius {
border-radius: 12px;
}
Margin Collapse
The equal margin is the bigger of two margins from different elements when
they overlap. This is referred to as margin collapse.
Box Sizing
Determines how much padding and border is included in the width and height
of an element. It might be either a content-box or a border-box.
.boxsizing {
box-sizing: border-box;
}
here border-box means the content width and height includes content + padding +
border.
What to do now?
Add margin and padding or box-sizing property to content layout and practice
how to handle the spacing.
11
Fonts & Display
Display property
The CSS display property specifies whether an element is regarded as a block or
inline element, as well as the layout for its children.
display: inline
Only takes up the space that the element requires.
There are no line breaks before or after.
It is not possible to change the width or height of the image.
display: block
Takes up the entire width of the screen.
Before and after the element, a newline is left.
display: inline-block
Similar to inline, but with the ability to customize height, width, margin,
and padding.
Elements can be placed adjacent to one another.
display: none
The element is no longer included in the document flow.
Its space is free.
visibility: hidden
Although the element is hidden, its position is reserved.
text-align property
The horizontal alignment of a text can be set using this command.
text-decoration property
Used to decorate the text.
Can be overline, line-through, underline and none.
text-transform property
In a text, this is used to identify uppercase and lowercase letters.
line-height property
The gap between lines is specified using this property.
Font
The font used on a website has a significant impact on its appearance and feel.
font-family
A text’s typeface is specified by its font family.
As a “fallback” mechanism, it may contain numerous values.
Web safe fonts

These fonts are installed by default in all browsers.
How to include Google fonts in a HTML document?

To utilize custom Google fonts, go to Google Fonts, choose a style, and then
paste it into your page’s style.css.
Other font properties

The following are some of the additional font properties:
font-size: Sets the size of the font.
font-style: Sets the font style.
font-variant: Sets whether text is displayed in small-caps.
font-weight: Sets the weight of the font.
12
Size & Positions
Other than px, there are other units for describing size. There are percentages
such as rem, em, vw, and vh.
What’s the deal with pixels?

Pixels (px) refer to the size of the image on the screen. 1px is one unit out of
1080/1920 for a device having a resolution of 1920 x 1080.
Relative lengths
These units are relative to the other length property. Following are some of the
most commonly used relative lengths.
1. em: Unit relative to the parent font size.
2. rem: Unit relative to the root font size. (<Html> tag)
3. vw: Unit relative to 1% view port width.
4. vh: Unit relative to 1 % view port height.
5. %: Unit relative to the parent element.
min/max-height/width property
CSS provides properties for min-height, max-height, min-width, and max-
width. The minimum height will be enforced if the content is less than the
minimum height. In the case of other linked properties, the situation is similar.
Position property
The following are the available values for manipulating an element’s location:
1. static: The top / bottom / left / right / z-index default positions have no
impact.
2. relative: The top / bottom / left / right / z-index buttons are now
functional. Otherwise, the element seems to be static in the document’s
flow.
3. absolute: The Element is taken out of the flow and positioned in relation to
its first non-static predecessor, top / bottom, and so on.
4. fixed: The element is positioned relative to the browser window, much like
absolute.
5. sticky: The location of the Element is determined by the user’s scroll
position.
z-index property
The z-index attribute indicates an element’s stack order. In the case of
overlapping items, it specifies which layer will be on top.
What to do now?
Create a sticky or fixed position navigation bar or header.
Practice different positions or relative lengths and z-index.
13
Flexbox
We’ll start with the float and clear attributes before moving on to CSS flexbox.
Float property
The float attribute is straightforward. It just moves the element to the left or
right.
Clear property
To clear the float, use this. It determines which items are allowed to float next
to a certain element.
CSS flexbox
Aims to improve the layout, alignment, and distribution of space among
elements in a container.
Container {
display: flex;
}
flex-direction property
Sets the direction in which objects are put down. It might be a row, a row-
reversed row, or a column column-reversed column.
Source: css-tricks.com/snippets/css/a-guide-to-flexbox/
Flex properties for parent ( flex container )

The flex parent’s attributes are as follows:
1. flex-wrap: Wrap, no wrap, and wrap-reverse are all options. This property
may be used to wrap objects as needed.
2. justify-contents: Sets the alignment of the main axis.
3. align-items: Defines the cross-axis alignment.
4. align-content: When there is additional space in the cross axis, aligns the
lines of a flex container.
Flex properties for the children (flex items)
The attributes for the flex children are listed below.
1. order: The order in which the items display in the flex container is
controlled by this property.
2. align-self: Allows the default alignment for individual flex elements to be
modified.
3. flex-grow: Defines a flex item’s ability to grow.
4. flex-shrink: Determines how much a flex item shrinks in comparison to
the other flex items.
What to do now?
Create the HTML page using flexbox.
14
Grid & Media Query
The following commands can be used to create a CSS grid:
.Container {
display: grid;
}
All direct children become grid elements by default.
grid-column- gap property

A CSS grid’s column spacing can be adjusted with this property.
grid-row-gap property
Modify the spacing between the rows of a CSS grid.
grid-gap property
Shorthand property for grid-row-gap & grid-column-gap
.Container {
display: grid; grow
grid-gap: 10px(row) 20px(column);
}
Following are the properties for grid container :

1. The grid-template-columns property can be used to specify the width of
columns.
2. The grid-template-rows property can be used to specify the height of each
row .
3. The justify-content property is used to align the whole grid inside the
container.
4. The align-content property is used to vertically align the whole grid inside
the container.
Following are the properties for grid item:

1. The grid-column property defines how many columns on item will span.
2. The grid row property defines how many rows an item will span.
CSS Media Queries

CSS is only applied when a given condition is met.
@media only screen and (max-width: 800px) {

body {
background: red;
}
}
What to do now?
Create a responsive web page using media query and content layout using
grids.
15
Transforms, Transitions & Animations
Rotate, move, skew, and scale items are all done via transforms. They’re
employed to generate a three-dimensional effect.
Transform property
To perform a 2D or 3D transformation to an element, use this command.
Transform-origin property
Allows you to move converted parts around.
2D transforms: can change x & y axis.
3D transforms: can change z axis as well.
CSS 2D transform methods

In CSS, you can utilise the following 2D transforms:
1. translate()
2. rotate()
3. scaleX()
4. scaleY()
5. skew()
6. matrix()
7. scale()
CSS 3D transform methods

1. rotateX()
2. rotateY()
3. rotateZ()
CSS Transitions
Used to modify property values over time in a gradual manner.
Transition property
In CSS, the transition property is used to add transition. The properties for CSS
transition are as follows.
1. transition property: The property you want to transition.
2. transition-duration: Time for which you want transition to apply.
3. transition-timing-function: How you want the property to transition.
4. transition-delay: Specifies the delay for the transition.
All these properties can be set using a single shorthand property.
transition : width 10s ease-in 6s;
CSS Animations
Used to provide you greater control over how CSS attributes are animated. We
may utilise the @keyframes rule to modify the animation style from one to
another.
@keyframes animate {
from { width: 20px; } → Can change multiple properties
to { width: 40px; }
}
Properties to add Animations
The attributes needed to set animation in CSS are as follows:
1. animation-name: name of the animation.
2. animation-duration: How long does the animation run ?
3. animation-timing-function: Determines speed curve of the animation.
4. animation-delay: Delay for the start of an animation.
5. animation-iteration-count: Number of times an animation should run.
6. animation-direction: Specifies the direction of the animation.
The Animation Shorthand

All the animation properties from 1-6 can be applied like this:
animation: name 4s linear 2s infinite reverse;
Using percentage value states with animation

Percent values can be used to specify what should happen when a particular
percentage of the animation is done.
@keyframes name {
0% {
width: 20px;
}
50% {
width: 50px;
}
100% {
width: 100px;
}
}
What to do now?
Create a progress bar animation with percentage and put animations in
images.
16
Projects
Mini-projects that may be done in a few days or hours are one of the finest
methods to practice HTML. Here are the greatest mini-projects to help you put
what you’ve learn into practice!
1. Navigation bar
A navigation bar makes it simple for people to find their way around. They may
be used to categories information by kind and provide connections to other
areas of a website. Navigation bars may be seen on websites such as Amazon,
Facebook, Reddit, and this one.
What you’ll learn: How to Make Use of Links, What Is The Best Way To Create A
Page Header? How to Make a Responsive Website (It will work on Mobile,
Desktop and Tablets) Bar of Navigation, How to Make a List, How to use CSS to
decorate a typeface and create a list?
2. Create a landing page design

A landing page is an excellent approach to get your first website up and
running. Landing pages were developed to make it simple for visitors to
discover more about you or your organization by providing rapid access to your
information. It’s a quick project that can take anywhere from two to four hours
to complete, depending on how much stuff you add yourself.
What you’ll learn: What is the best way to build a website layout? What is the
difference between a Div and a Paragraph? When it comes choosing typefaces,
there are a few things to keep in mind. How to Use Photographs, How to Create
a Responsive Website?
3. Photo Gallery
While studying HTML and CSS, designing an image gallery page is an excellent
approach to practice constructing a website layout. A gallery is an excellent
venue for displaying your most recent work. This can be accomplished by the
use of an image wall, a grid of photos, or a slide show.
What you’ll learn: What is Grid Layout and how do I utilize it? How to Add
Images to a Web Page, How to Create a Responsive Website, How to Make a
Photo Card?
4. Stock List Page

A stock list page is a web page that provides information on a company’s stock,
such as the ticker symbol, dollar price, number of shares outstanding, and
dividends. It’s frequently used to demonstrate investors what the market
thinks about a specific firm.
What you’ll learn: Responsive table design, text alignment, table column
freeze, and more. Fonts, Layout, and Design What is the difference between a
Div and a Paragraph?
5. Product Page in an Ecommerce Store

Depending on the sort of goods being sold, ecommerce product pages might be
rather different. A single column, for example, with huge graphics at the top
and smaller text behind is a frequent style. To make it easier for clients to
browse through, another option is to utilize a single column with numerous
photographs of each item as they are displayed.
What you’ll learn: How to create a column layout How to Add Images, How to
Use Grid Layout How to Use Various Heading Styles, Text Formatting, and
Table Layout?
6. Registration Form
A common HTML and CSS project is the registration form. It’s a simple
registration page with text boxes for login, password, email, and other
information. To fill in the information, the user must first select the “Show
Fields” option.
What you’ll learn: how to create a form, What are input and form fields, and
how do I utilise them? Alignment of content Elements can be shown or hidden,
and header and text layout can be changed.
Also by Vikalp Kaushik
A Handbook For Better Designing

https://www.amazon.com/dp/B09PHV9RZ1
A series of best practices, tips, ideas, notes etc. for making user interface more
user-friendly. Because each chapter is self-contained, you can read them in
nearly any sequence. And if you want to sit down and read it all at once, you’ll
be able to do so in under two hours.
https://www.amazon.com/dp/B09PHV9RZ1

HTML CSS Handbook Learn HTML and CSS

Uploaded by

HTML CSS Handbook Learn HTML and CSS

Uploaded by

Vikalp Kaushik

HTML & CSS Handbook

All rights reserved. No part of this publication may be reproduced, stored or

This book was professionally typeset on Reedsy

First of all, thanks for picking up a copy - you’re amazing.

HTML stands for Hyper Text Markup Language.

CSS is used to provide styling to the HTML-created bare-bones page.

In this book, we’ll begin to learn how to create gorgeous layouts.

We begin by creating a file called index.html, which is a unique filename that

<!Doctype html> → Indicates that this is an HTML5 document.

A tag acts as a container for information as well as other HTML tags.

<body> → Opening tag

<a href = "https://betterdesigning.com/" > Better Design </a>

In attributes, we can use single or double quotes.

The Heading Tag

<p> This is a paragraph </p>

<a href= "https://vikalpkaushik99.medium.com"> Read Blogs </a>

<img src="image.jpg" >

Bold, Italic and underline tags

<b> This is bold </b>

Subscript and Superscript

<sub> this </sub> is subscript

It results in a greater page layout, better crawling by search engines, and an

The following tags are inserted inside the main tag:

<main> → The main opening tag

It is not necessary to construct a page like this, but it does produce a

The Div tag

Forms, Lists & Table

Unordered list : Used to list unordered items

Ordered list : Used to list ordered items

<th colspan="3"> Data </th>

We’ll concentrate solely on HTML in terms of SEO. We will not be discussing

<meta name="description" content = "my website">

Make a catchy URL slug.

<meta name="author" content = "Harry">

Create a favicon for your website.

Why Learn CSS?

Your first line of CSS

In this part, we’ll make our first CSS website.

HTML id and class attributes

An element like this can have numerous classes applied to it.

<div id="first" class="A1 A2 A3">

Three ways to add CSS to HTML

. is used to target by class

h1, h2, h3, p {

The universal selector ‘*’ may be used to select all items.

External and internal styles will be overridden by an inline style.

Colors & Backgrounds

Similarly, we may change the color of many components.

Types of color values

The image is by default repeated in X & Y directions.

Background position property

Background - attachment property

CSS Box Model

Setting width & Height

It’s important to keep in mind that the entire width/height is computed as

Setting Margin & Padding

Individual margins and padding can also be configured as follows:

Fonts & Display

Web safe fonts

How to include Google fonts in a HTML document?

Other font properties

Size & Positions

What’s the deal with pixels?

Flex properties for parent ( flex container )

Grid & Media Query

The following commands can be used to create a CSS grid:

All direct children become grid elements by default.

grid-column- gap property

Following are the properties for grid container :

Following are the properties for grid item:

CSS Media Queries

@media only screen and (max-width: 800px) {

Transforms, Transitions & Animations

CSS 2D transform methods