Scribd
Upload
2 views3 pages

HTML Css Quick Guide

This document serves as a quick guide to HTML and CSS, outlining the basic structure of a webpage and common HTML tags. It also explains how to add CSS styles through inline, internal, and external methods, along with common CSS properties. An example of a simple web page is provided to illustrate the concepts discussed.

Uploaded by

1051
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views3 pages

HTML Css Quick Guide

This document serves as a quick guide to HTML and CSS, outlining the basic structure of a webpage and common HTML tags. It also explains how to add CSS styles through inline, internal, and external methods, along with common CSS properties. An example of a simple web page is provided to illustrate the concepts discussed.

Uploaded by

1051
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML & CSS Quick Guide

HTML (HyperText Markup Language)

HTML is the structure of a webpage.

Basic HTML Template:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a paragraph.</p>
</body>
</html>

Common HTML Tags:


<h1>-<h6> : Headings (h1 = largest)
<p> : Paragraph
<a href="">: Link
<img src="" alt=""> : Image
<ul> / <ol> : Unordered/Ordered list
<li> : List item
<div> : Division/Container
<span> : Inline container
<form> : Input form
<input> : Input field
<button> : Button

CSS (Cascading Style Sheets)

CSS is the style of a webpage.

Adding CSS:
Inline:
<p style="color: red;">Red text</p>

Internal:
<head>
<style>
p {
color: blue;
}
</style>
</head>
HTML & CSS Quick Guide

External:
<link rel="stylesheet" href="[Link]">

Common CSS Properties:


p {
color: black;
font-size: 16px;
line-height: 1.5;
}
.container {
width: 80%;
margin: 0 auto;
}
#main {
background-color: #f0f0f0;
padding: 20px;
}

Useful Properties:
color : Text color
background-color: Background color
font-size : Size of text
margin : Space outside element
padding : Space inside element
border : Border around element
width, height : Size of element
display : Layout (block, inline, flex...)
text-align : Align text (left, center...)

Example: Simple Web Page with CSS

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #fafafa;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
p {
max-width: 600px;
margin: 0 auto;
}
HTML & CSS Quick Guide
</style>
</head>
<body>
<h1>Welcome!</h1>
<p>This is a simple HTML page styled with CSS.</p>
</body>
</html>

You might also like