SlideShare a Scribd company logo
1 of 22
Download to read offline
HTML/CSS
101
BASIC ELEMENTS
<h1></h1>
<h3></h3> ...
<p></p>
<a href="youtube.com"></a>
<div></div>
<button>Click</button>
<img src="image_link">
<input type="text">
<br>
<!-- This is for comments, the
code will ignore this line -->
cmd + /
<p>This is a <br> line of text </p>
This is a
line of text
QUIZZZZZZZ
<h1></h1>
<h3></h3> ...
<p></p>
<a href=""></a>
<div></div>
<button></button>
<img src="">
<input type="text">
<br>
Recreate this
HOW TO STYLE
<h1>Sth</h1>
<bruh>
Sth
</bruh>
<div class="anything">
Sth
</div>
<div id="mustBeUnique">
Sth
</div>
index.html
h1 {
color: red;
}
bruh {
color: red;
}
.anything {
color: red;
}
#mustBeUnique{
color: red;
}
style.css
Copy paste this in every html file and ignore:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<!-- Write code here -->
</div>
</body>
</html>
Copy paste this in every css file and ignore:
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--background: red;
}
body {
min-height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background-color: var(--background); /* Using --background variable */
}
Basic styling for <h1> and <p>
.text {
color: red;
text-align: center;
font-size: 30px;
font-weight: bold;
font-style: italic;
}
input {
color: red;
}
Basic styling for <a>
a {
color: red;
text-align: center;
font-size: 30px;
font-weight: bold;
font-style: italic;
text-decoration: none;
}
a {
color: black;
text-decoration: none;
}
default
Basic styling for <input>
<input
type="text"
placeholder="This will disappear when
u start typing"
>
index.html
input {
height: 40px;
width: 400px;
/* border: none; */
}
style.css
Input is self closing!!!
Styling <div> to make a container
.this_is_a_div {
width: 500px;
height: 400px;
background-color: red;
}
500px
400px
Styling <div> to make a container
.this_is_a_div {
width: 500px;
height: 400px;
border: 1px solid red;
border-radius: 20px;
}
500px
400px
How to create space for text
<input
type="text"
placeholder="This will disappear when u
start typing"
>
index.html
input {
height: 40px;
width: 400px;
padding: 30px;
}
style.css
before
after
How to create space for text
<h1>Hello</h1>
<h2>huh</h2>
index.html
h1 {
margin-bottom: 100px;
}
style.css
before
after
Display: flex;
<div>
<h1>
Hello
</h1>
</div>
Hello
div {
width: 300px;
height: 300px;
background-color: gray;
}
How to center the text????
Display: flex;
<div>
<h1>
Hello
</h1>
</div>
Hello
div {
width: 300px;
height: 300px;
background-color: gray;
display: flex;
justify-content: center;
align-items: center;
}
Display: flex;
<div>
<h1>
Hello
</h1>
</div>
Hello
div {
width: 300px;
height: 300px;
background-color: gray;
display: flex;
justify-content: flex-start;
align-items: center;
}
Display: flex;
<div>
<h1>
Hello
</h1>
</div>
Hello
div {
width: 300px;
height: 300px;
background-color: gray;
display: flex;
justify-content: flex-end;
align-items: center;
}
Display: flex;
<div>
<h1>
Hello
</h1>
</div> Hello
div {
width: 300px;
height: 300px;
background-color: gray;
display: flex;
justify-content: flex-end;
align-items: flex-start;
}
Display: flex;
<div>
<h1>
Hello
</h1>
</div>
Hello
div {
width: 300px;
height: 300px;
background-color: gray;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
Display: flex;
https://flexboxfroggy.com/
Write message
Analyze this

More Related Content

Similar to HTMLCSS 101.pdf

BEAUTIFUL CSS PRESENTATION EASY TO MADE
BEAUTIFUL CSS PRESENTATION EASY TO MADEBEAUTIFUL CSS PRESENTATION EASY TO MADE
BEAUTIFUL CSS PRESENTATION EASY TO MADErana usman
 
2. CSS Chapter Roadmap and Full Source Code.pdf
2. CSS Chapter Roadmap and Full Source Code.pdf2. CSS Chapter Roadmap and Full Source Code.pdf
2. CSS Chapter Roadmap and Full Source Code.pdfBdBangladesh
 
Css, CaseCading Style Sheet
Css, CaseCading Style SheetCss, CaseCading Style Sheet
Css, CaseCading Style SheetIshaq Shinwari
 
Your Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckYour Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckAnthony Montalbano
 
BLogSite (Web Programming) (1).pdf
BLogSite (Web Programming) (1).pdfBLogSite (Web Programming) (1).pdf
BLogSite (Web Programming) (1).pdfAyonDebnathCertified
 
Kohana bootstrap - modal form
Kohana   bootstrap - modal formKohana   bootstrap - modal form
Kohana bootstrap - modal formJulio Pari
 
Kohana bootstrap - modal form
Kohana   bootstrap - modal formKohana   bootstrap - modal form
Kohana bootstrap - modal formJulio Pari
 
Make More Money With Advanced Custom Fields - WordCampYYC 2015
Make More Money With Advanced Custom Fields - WordCampYYC 2015Make More Money With Advanced Custom Fields - WordCampYYC 2015
Make More Money With Advanced Custom Fields - WordCampYYC 2015buildstudio
 
Hypertext_markup_language
Hypertext_markup_languageHypertext_markup_language
Hypertext_markup_languageIshaq Shinwari
 
Bca 1st year HTML Pdf
Bca 1st year HTML Pdf Bca 1st year HTML Pdf
Bca 1st year HTML Pdf Rahul Saini
 
MCSL016 IGNOU SOLVED LAB MANUAL
MCSL016 IGNOU SOLVED LAB MANUALMCSL016 IGNOU SOLVED LAB MANUAL
MCSL016 IGNOU SOLVED LAB MANUALDIVYA SINGH
 
Updated html programs
Updated html programsUpdated html programs
Updated html programsDeepali54
 

Similar to HTMLCSS 101.pdf (20)

BEAUTIFUL CSS PRESENTATION EASY TO MADE
BEAUTIFUL CSS PRESENTATION EASY TO MADEBEAUTIFUL CSS PRESENTATION EASY TO MADE
BEAUTIFUL CSS PRESENTATION EASY TO MADE
 
2. CSS Chapter Roadmap and Full Source Code.pdf
2. CSS Chapter Roadmap and Full Source Code.pdf2. CSS Chapter Roadmap and Full Source Code.pdf
2. CSS Chapter Roadmap and Full Source Code.pdf
 
Evidence For ICT Homework
Evidence For ICT HomeworkEvidence For ICT Homework
Evidence For ICT Homework
 
HTMLPart 3.pdf
HTMLPart 3.pdfHTMLPart 3.pdf
HTMLPart 3.pdf
 
Css, CaseCading Style Sheet
Css, CaseCading Style SheetCss, CaseCading Style Sheet
Css, CaseCading Style Sheet
 
Your Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckYour Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages Suck
 
BLogSite (Web Programming) (1).pdf
BLogSite (Web Programming) (1).pdfBLogSite (Web Programming) (1).pdf
BLogSite (Web Programming) (1).pdf
 
Kohana bootstrap - modal form
Kohana   bootstrap - modal formKohana   bootstrap - modal form
Kohana bootstrap - modal form
 
Kohana bootstrap - modal form
Kohana   bootstrap - modal formKohana   bootstrap - modal form
Kohana bootstrap - modal form
 
Make More Money With Advanced Custom Fields - WordCampYYC 2015
Make More Money With Advanced Custom Fields - WordCampYYC 2015Make More Money With Advanced Custom Fields - WordCampYYC 2015
Make More Money With Advanced Custom Fields - WordCampYYC 2015
 
Hypertext_markup_language
Hypertext_markup_languageHypertext_markup_language
Hypertext_markup_language
 
Html code
Html codeHtml code
Html code
 
Bca 1st year HTML Pdf
Bca 1st year HTML Pdf Bca 1st year HTML Pdf
Bca 1st year HTML Pdf
 
MCSL016 IGNOU SOLVED LAB MANUAL
MCSL016 IGNOU SOLVED LAB MANUALMCSL016 IGNOU SOLVED LAB MANUAL
MCSL016 IGNOU SOLVED LAB MANUAL
 
New tags in html5
New tags in html5New tags in html5
New tags in html5
 
1cst
1cst1cst
1cst
 
Basic html
Basic htmlBasic html
Basic html
 
Imageslider
ImagesliderImageslider
Imageslider
 
Capstone Website Code
Capstone Website CodeCapstone Website Code
Capstone Website Code
 
Updated html programs
Updated html programsUpdated html programs
Updated html programs
 

Recently uploaded

Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024The Digital Insurer
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Neo4j
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Unlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power SystemsUnlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power SystemsPrecisely
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
Artificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraArtificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraDeakin University
 
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024BookNet Canada
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDGMarianaLemus7
 
costume and set research powerpoint presentation
costume and set research powerpoint presentationcostume and set research powerpoint presentation
costume and set research powerpoint presentationphoebematthew05
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 

Recently uploaded (20)

The transition to renewables in India.pdf
The transition to renewables in India.pdfThe transition to renewables in India.pdf
The transition to renewables in India.pdf
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
 
Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024Build your next Gen AI Breakthrough - April 2024
Build your next Gen AI Breakthrough - April 2024
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
 
Unlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power SystemsUnlocking the Potential of the Cloud for IBM Power Systems
Unlocking the Potential of the Cloud for IBM Power Systems
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
Artificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning eraArtificial intelligence in the post-deep learning era
Artificial intelligence in the post-deep learning era
 
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC BiblioShare - Tech Forum 2024
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
APIForce Zurich 5 April Automation LPDG
APIForce Zurich 5 April  Automation LPDGAPIForce Zurich 5 April  Automation LPDG
APIForce Zurich 5 April Automation LPDG
 
costume and set research powerpoint presentation
costume and set research powerpoint presentationcostume and set research powerpoint presentation
costume and set research powerpoint presentation
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptx
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 

HTMLCSS 101.pdf