Scribd
Upload
5 views10 pages

HTML and CSS Basics Explained

The document provides a comprehensive overview of HTML and CSS, detailing the structure and elements of HTML such as headings, paragraphs, lists, tables, and various text formatting tags. It also covers CSS properties for styling text, colors, spacing, borders, and layout, along with examples of inline, internal, and external CSS. This serves as a foundational guide for creating and styling web pages.

Uploaded by

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

HTML and CSS Basics Explained

The document provides a comprehensive overview of HTML and CSS, detailing the structure and elements of HTML such as headings, paragraphs, lists, tables, and various text formatting tags. It also covers CSS properties for styling text, colors, spacing, borders, and layout, along with examples of inline, internal, and external CSS. This serves as a foundational guide for creating and styling web pages.

Uploaded by

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

HTML (HyperText Markup Language)

<!DOCTYPE html>
Declares the document type as HTML5.
Example:
<!DOCTYPE html>

<html>
Root element that wraps the entire HTML document.
Example:
<html>...</html>

<head>
Contains meta information like title and styles.
Example:
<head><title>My Page</title></head>

<title>
Sets the title shown on the browser tab.
Example:
<title>Welcome</title>

<body>
Contains all visible content.
Example:
<body>Hello World</body>

<h1> to <h6>
Headings from largest to smallest.
Example:
<h1>Main Heading</h1>
<h3>Sub Heading</h3>

<p>
Defines a paragraph.
Example:
<p>This is a paragraph.</p>

<br>
Line break.
Example:
Line1<br>Line2

<hr>
Horizontal line.
Example:
<hr>

<a>
Creates a hyperlink.
Example:
<a href="[Link]

<img>
Displays an image.
Example:
<img src="[Link]" alt="Sample Image">

<ul> and <li>


Unordered list.
Example:
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>

<ol> and <li>


Ordered list.
Example:
<ol>
<li>Step One</li>
<li>Step Two</li>
</ol>

<table>, <tr>, <td>, <th>


Creates tables.
Example:
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Ali</td><td>20</td></tr>
</table>

<div>
Block-level container.
Example:
<div>This is a block</div>

<span>
Inline container.
Example:
<span>Inline text</span>

<strong> / <b>
Bold text.
Example:
<strong>Important</strong>

<em> / <i>
Italic text.
Example:
<em>Emphasis</em>

<u>
Underlined text.
Example:
<u>Underline</u>

<s> / <strike>
Strikethrough text.
Example:
<s>Old Price</s>

<sub> and <sup>


Subscript and Superscript.
Example:
H<sub>2</sub>O, x<sup>2</sup>

<blockquote>
Block quotation.
Example:
<blockquote>Quoted text</blockquote>

<cite>
Citation.
Example:
<cite>Book Name</cite>

<code>
Inline code.
Example:
<code>printf()</code>

<pre>
Preformatted text.
Example:
<pre>
Line1
Line2
</pre>

<address>
Author information.
Example:
<address>Email: abc@[Link]</address>

<abbr>
Abbreviation.
Example:
<abbr title="World Health Organization">WHO</abbr>

<del> and <ins>


Deleted and inserted text.
Example:
<del>Old</del> <ins>New</ins>

CSS (Cascading Style Sheets)

Color:
color – text color
background-color – background color

Typography:
font-family – font type
font-size – size of text
font-weight – boldness
font-style – italic style
Text:
text-align – alignment
text-decoration – underline, none
line-height – spacing between lines

Spacing:
margin – outside spacing
padding – inside spacing

Borders:
border – border settings
border-radius – rounded corners

Layout:
width – element width
height – element height
display – block, inline, none

CSS Types
Inline CSS:
<p style="color:red;">Hello</p>

Internal CSS:
<style>
p { color: blue; }
</style>

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

You might also like