<!DOCTYPE html> Tells the browser it is html5 file.
HTML
<html> <\html Starting point for the html code.
<body><\body> Start the body of the content (html code),
<p><\p> Start the paragraph
<head><\head> Used to mention the heading in the tab.
<title><\title> Used inside the heading (seen in the tab on chrome).
<hn><\hn> Paragraph heading.n represents the number of head
line.
<a href="”>Visite Used to open the url in the html page.
example<\a>
<img src="[Link]" Used to show the image in web through the local
alt="Local photo"> device’
<img src”address of the Used to show the image in web through the url formate.
url” alt=”short describe
of the image”>>
<nav><\nav> Used to hold the url along with an <a href> tag
<main><\main> Used to write an main content in the web page.
<section><\section> Groups related content under one topic.
<footer><\footer> It contains additional information.
<link rel="stylesheet" Import the external css file into html code
href="path of an file">
<meta charset=”UTF- It used to add the emoji In the website
8”>
<article> Like to uses an whole content like an newspapper
<aside> An extra information about an <article>
<div class=”name”> Used to write the content without an heading,gives
simple meaning,class act like an bridge between an
html and css
<label The for="email" on the label and the id="email" on the
for="email">Email</lab input act like a handshake that connects the two
el> elements together.
<input type="email"
id="email" required>
CSS
Class sector(.) Example <p class="cyber"> Acces .class_name
ID sector(#) Example: <div id=”name of the id”>
Universal sector(*) Margin of the text between the para to para
descendant Example <div><p>content<\p><\div>
Box-model
Part Description Example
Conten Actual text or image inside the div { width:200px;
t element height:100px; }
Paddin Space between content and
div { padding:20px; }
g border
p { border:5px solid
Border Surrounds padding and content
red; }
Margin Space outside the element div { margin:30px; }
Order:
Content → Padding → Border → Margin.
Display Types Comparison:
Bloc Inlin Inline-
Property
k e Block
New line? Yes No No
Takes full width? Yes No No
Can set
Yes No Yes
width/height?
Good for layout
Yes No Yes
boxes?
Default HTML Elements:
Display
Default Elements
Type
div, p, h1–h6, section, article, header, footer, ul, ol,
Block
li, form, table
Inline span, a, strong, em, label, small, b, i, sup, sub
Inline- None by default (must use display: inline-block;)
Display
Default Elements
Type
Block
FLEX-BOX(works in child[article,p] under the parent[div,section])
Property Description Syntax Values
Flex Used to display
display: Makes the element a flex
Containe content in a row (flex
flex; container
r layout).
row (default) – left to right
flex- row-reverse – right to left
Flex Decides the direction
direction: column – top to bottom
Direction of flex items.
value; column-reverse – bottom to
top
flex-start – start flex-end –
Controls alignment justify-
Justify end center – center space-
and distribution content:
Content between space-around
along the main axis. value;
space-evenly
Align Aligns items along align-items: flex-start flex-end center
Items the cross axis. value; baseline stretch
Defines spacing
Gap between flex items gap: value; Example: gap: 20px;
inside a container.
nowrap (default) wrap –
Controls whether
moves to next line when
Flex items stay in a single flex-wrap:
space is not enough wrap-
Wrap line or wrap onto value;
reverse – reverse the
multiple lines.
wrapping direction
CSS GRID (2D layout[rows+columns])
Grid container