Scribd
Upload
6 views14 pages

Notes About Tech

The document provides a comprehensive list of HTML and CSS tags, including their purposes and examples. It covers various categories such as structure, text formatting, links, media, lists, tables, forms, semantic tags, and CSS properties like selectors, box model, colors, and layout techniques. Each section includes specific tags or properties with descriptions and usage examples to aid in web development.

Uploaded by

Ayesha Asad
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
6 views14 pages

Notes About Tech

The document provides a comprehensive list of HTML and CSS tags, including their purposes and examples. It covers various categories such as structure, text formatting, links, media, lists, tables, forms, semantic tags, and CSS properties like selectors, box model, colors, and layout techniques. Each section includes specific tags or properties with descriptions and usage examples to aid in web development.

Uploaded by

Ayesha Asad
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
You are on page 1/ 14

NOTES ABOUT TECH

Complete HTML Tag List (with Meaning, Usage & Examples)

1. Structure Tags

Tag Purpose Example


<!DOCTYPE> Defines the document type <!DOCTYPE html>
<html> Root element <html lang="en">
<head> Metadata container <head><title>My Page</title></head>
<title> Sets the title in browser tab <title>Welcome</title>
<body> Main content of the page <body><h1>Hello</h1></body>

2. Text Formatting Tags

Tag Purpose Example


<h1> to <h6> Headings (1 = largest) <h2>Subheading</h2>
<p> Paragraph <p>This is text.</p>
<br> Line break Line 1<br>Line 2
<hr> Horizontal rule <hr>
<b> / <strong> Bold text <b>Bold</b> / <strong>Bold</strong>
<i> / <em> Italic/emphasis <i>Italic</i> / <em>Emphasized</em>
<mark> Highlighted text <mark>Important</mark>
<small> Smaller text <small>Note</small>
<sub> / <sup> Subscript/superscript H<sub>2</sub>O, X<sup>2</sup>
<u> Underlined text <u>Underline</u>
<del> Strikethrough <del>Removed</del>
<ins> Inserted (underlined) <ins>Added</ins>
<pre> Preformatted (keeps spaces) <pre>Code block</pre>
<code> Inline code <code>print("hi")</code>
<blockquote> Quoted text <blockquote>Quote here</blockquote>
<abbr> Abbreviation tooltip <abbr title="HyperText Markup Language">HTML</abbr>
<q> Short quote <q>Quoted text</q>
<cite> Citation <cite>Book Title</cite>

📌 3. Links & Media

Tag Purpose Example


<a> Hyperlink <a href="https://example.com">Visit</a>
<img> Image <img src="pic.jpg" alt="Pic">
<video> Embed video <video src="vid.mp4" controls></video>
Tag Purpose Example
<audio> Embed audio <audio src="song.mp3" controls></audio>
<source> Used inside <video> or <audio> <source src="file.ogg" type="audio/ogg">
<iframe> Embed another page (like YouTube) <iframe src="https://..." width="300"></iframe>

📌 4. Lists

Tag Purpose Example


<ul> Unordered list <ul><li>Item</li></ul>
<ol> Ordered list <ol><li>Step</li></ol>
<li> List item <li>Element</li>
<dl> Description list <dl><dt>HTML</dt><dd>Markup</dd></dl>
<dt> Term (used inside <dl>) <dt>HTML</dt>
<dd> Description (used inside <dl>) <dd>A language</dd>

📌 5. Tables

Tag Purpose Example


<table> Starts a table <table></table>
<tr> Table row <tr><td>Data</td></tr>
<td> Table cell <td>Cell</td>
<th> Header cell <th>Name</th>
<thead> Head section <thead><tr><th></th></tr></thead>
<tbody> Body section <tbody><tr><td></td></tr></tbody>
<tfoot> Footer section <tfoot><tr><td>Total</td></tr></tfoot>
<caption> Table title <caption>Student List</caption>
colspan / rowspan Merge cells <td colspan="2">Merged</td>

📌 6. Forms & Inputs

Tag Purpose Example


<form> Starts a form <form action="submit.php" method="post"></form>
<input> Input field <input type="text" name="user">
Label for <label for="email">Email:</label><input id="email"
<label>
input type="email">
Multi-line
<textarea> <textarea name="message"></textarea>
text input
<select> Dropdown <select><option>One</option></select>
Option inside
<option> <option value="1">One</option>
<select>
Clickable
<button> <button type="submit">Send</button>
button
<fieldset> Groups form <fieldset><legend>Login</legend></fieldset>
Tag Purpose Example
elements
Title for
<legend> <legend>Personal Info</legend>
<fieldset>
Auto-suggest <input list="browsers"><datalist id="browsers"><option
<datalist>
options value="Chrome"></datalist>
Display
<output> <output id="result"></output>
output
required, readonly, disabled,
placeholder, value, type, name, id
– All are input attributes.

📌 7. Semantic Tags

Tag Use
<header> Top of the page
<nav> Navigation section
<main> Main page content
<section> A section of content
<article> A blog post/article
<aside> Side info (ads, notes)
<footer> Bottom of the page
<figure> Wrap images & captions
<figcaption> Caption for figure
<details> Expandable content
<summary> Visible summary/title
<time> Time & date markup
<progress> Progress bar
<meter> Measurement within a range

📌 8. Meta & Script Tags

Tag Purpose Example


<meta> Metadata (charset, viewport) <meta charset="UTF-8">
<link> Link CSS or favicon <link rel="stylesheet" href="style.css">
<script> Embed JavaScript <script src="script.js"></script>
<style> Internal CSS <style>body { color: red; }</style>
<base> Set base URL for all links <base href="https://example.com/">

Complete CSS Notes (with Meaning, Usage, and Examples)


📌 1. Basic CSS Structure

CSS is used to style HTML elements, and it can be written in three ways:

1. Inline CSS: Directly within HTML element.


2. <h1 style="color: red;">Hello World</h1>
3. Internal CSS: Inside <style> tag within <head>.
4. <style>
5. h1 { color: red; }
6. </style>
7. External CSS: In an external .css file.
8. h1 { color: red; }

📌 2. CSS Selectors

Selectors define which HTML elements the styles should apply to.

Selector Description Example


* Selects all elements * { color: blue; }
element Selects specific element (e.g., p, h1, div) h1 { font-size: 20px; }
.class Selects all elements with the class attribute .myclass { background-color: yellow; }
#id Selects a specific element with the id attribute #header { font-weight: bold; }
element, element Selects multiple elements p, h1 { margin: 10px; }
element element Selects an element inside another element div p { color: green; }
[attribute] Selects elements with specific attribute [type="text"] { border: 1px solid black; }

📌 3. CSS Box Model

The CSS Box Model defines how the elements are structured and spaced in a webpage.

1. Content: The actual content of the box (e.g., text or image).


2. Padding: Space between content and border.
3. Border: Surrounds the padding (optional).
4. Margin: Space outside the border.

div {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 30px;
}

📌 4. CSS Colors

1. Color names:
2. p { color: red; }
3. Hexadecimal colors:
4. h1 { color: #ff0000; } /* Red */
5. RGB colors:
6. h2 { color: rgb(255, 0, 0); } /* Red */
7. RGBA colors (with transparency):
8. h3 { color: rgba(255, 0, 0, 0.5); } /* Semi-transparent red */
9. HSL colors:
10. p { color: hsl(0, 100%, 50%); } /* Red */
11. HSLA colors (with transparency):
12. div { color: hsla(0, 100%, 50%, 0.5); } /* Semi-transparent red */

📌 5. CSS Text Properties

Property Description Example


color Sets the text color p { color: blue; }
font-family Defines the font of the text p { font-family: Arial, sans-serif; }
font-size Sets the font size p { font-size: 16px; }
font-weight Sets the thickness of the font p { font-weight: bold; }
font-style Defines font style (italic, normal) p { font-style: italic; }
line-height Sets the spacing between lines p { line-height: 1.5; }
text-align Aligns text horizontally p { text-align: center; }
text-transform Controls case of text p { text-transform: uppercase; }
letter-spacing Sets the space between letters p { letter-spacing: 2px; }
text-decoration Adds decoration (underline, strikethrough) p { text-decoration: underline; }
text-shadow Adds shadow to text p { text-shadow: 2px 2px 4px grey; }

📌 6. CSS Font Properties

Property Description Example


font Shorthand for all font properties font: italic bold 16px Arial;
font-size Defines the font size font-size: 20px;
font-weight Sets the thickness of the font font-weight: bolder;
font-family Specifies the font family font-family: 'Segoe UI', sans-serif;
font-style Sets the style (italic, oblique) font-style: oblique;

📌 7. CSS Backgrounds

Property Description Example


background-color Sets the background color background-color: lightblue;
background-image Sets an image as background background-image: url('image.jpg');
background-repeat Defines if background image should repeat background-repeat: no-repeat;
background-size Sets size of background image background-size: cover;
background-position Defines position of background image background-position: center;
📌 8. CSS Display & Visibility

Property Description Example


display Defines how elements are displayed display: block; or display: none;
visibility Hides the element, but it still occupies space visibility: hidden;

📌 9. CSS Positioning

Property Description Example


position Defines positioning method position: relative;
top, right, bottom, left Set position offset top: 50px; left: 100px;
z-index Defines stacking order z-index: 10;
float Floats an element (left or right) float: left;
clear Clears floated elements clear: both;

📌 10. CSS Flexbox

A layout model to distribute space and align items in containers.

Property Description Example


display: flex Initiates flexbox on a container display: flex;
flex-direction Defines direction of items (row, column, etc.) flex-direction: row;
justify-content Aligns items horizontally justify-content: center;
align-items Aligns items vertically align-items: center;
flex-wrap Wraps flex items to a new row/column flex-wrap: wrap;
align-self Aligns individual items align-self: flex-start;

📌 11. CSS Grid

A more advanced layout technique that allows creating complex two-dimensional layouts.

Property Description Example


display: grid Initiates grid layout display: grid;
grid-template-rows Defines row sizes grid-template-rows: 100px 200px;
grid-template-
Defines column sizes grid-template-columns: 200px 1fr;
columns
Sets space between rows and
grid-gap grid-gap: 20px;
columns
grid-template-areas: "header header" "main
grid-template-areas Defines named grid areas
footer";
📌 12. CSS Transitions

Allow elements to transition between different states.

Property Description Example


transition Shorthand for setting transitions transition: all 0.3s ease;
transition-property Defines which properties to animate transition-property: background-color;
transition-duration Defines the duration of the transition transition-duration: 1s;
transition-timing-function Sets timing function (linear, ease, etc.) transition-timing-function: ease-in;

📌 13. CSS Animations

A more advanced way to animate elements.

Property Description Example


Defines the animation's @keyframes myAnimation { from { opacity: 0; } to
@keyframes
behavior { opacity: 1; } }
animation Shorthand for animations animation: fadeIn 2s ease-in-out;
animation-duration Duration of the animation animation-duration: 2s;
animation-timing-
Sets timing function animation-timing-function: ease;
function

📌 14. Advanced CSS Properties

Property Description Example


box-shadow Adds shadow to an element box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
text-shadow Adds shadow to text text-shadow: 2px 2px 4px #000;
filter Applies visual effects (e.g., blur) filter: blur(5px);

📌 1. Introduction to CSS

CSS allows you to control the layout and appearance of your website elements. You can add CSS in three
ways:

 Inline CSS: Directly in an HTML tag with the style attribute.


 Internal CSS: Inside a <style> tag in the <head> section.
 External CSS: In a separate .css file, linked to the HTML.

📌 2. Selectors (Advanced and Detailed)

Selectors allow you to target HTML elements and apply styles. Below are various advanced selectors
with examples:
2.1 Universal Selector (*)

Selects every element on the page.

*{
color: black; /* All text will be black */
}

2.2 Type Selector (Element Selector)

Selects all elements of a specified type.

h1 {
font-size: 2em;
}

2.3 Class Selector (.)

Selects all elements with the specified class.

.card {
background-color: lightblue;
}

2.4 ID Selector (#)

Selects an element with a specific id attribute.

#header {
font-weight: bold;
}

2.5 Attribute Selector

Targets elements based on their attributes.

input[type="text"] {
border: 2px solid blue;
}

2.6 Descendant Selector

Selects elements that are descendants of a specified element.

div p {
color: green;
}
2.7 Child Selector (>)

Targets direct children of an element.

div > p {
color: blue;
}

2.8 Adjacent Sibling Selector (+)

Selects the element immediately following a specified one.

h1 + p {
margin-top: 20px;
}

2.9 General Sibling Selector (~)

Selects all siblings of an element that share the same parent.

h1 ~ p {
color: red;
}

📌 3. Box Model (Detailed)

The CSS Box Model is used to describe the rectangular boxes that are generated for elements.

 Content: Actual content (text, images).


 Padding: Space around the content.
 Border: Surrounds the padding and content.
 Margin: Space outside the border.

Example:

div {
width: 200px;
padding: 15px;
border: 2px solid black;
margin: 20px;
}

3.1 Box-Sizing

The box-sizing property determines how the total width and height are calculated. There are two main
values:
 content-box: Default behavior, padding and border are added outside the element's width and
height.
 border-box: Padding and border are included in the width and height.

*{
box-sizing: border-box;
}

📌 4. Colors (Advanced Color Properties)

CSS supports multiple ways to define color values.

4.1 Named Colors

CSS supports named colors (e.g., red, blue, green).

p { color: red; }

4.2 Hexadecimal Colors

Hex values represent color using 6 digits after # (RGB values).

p { color: #ff6347; } /* Tomato Red */

4.3 RGB and RGBA

 RGB: Red, Green, Blue values (0-255).


 RGBA: Adds an alpha channel (transparency).

h1 { color: rgb(255, 99, 71); } /* Tomato Red */


h1 { color: rgba(255, 99, 71, 0.5); } /* Semi-transparent */

4.4 HSL and HSLA

 HSL: Hue, Saturation, and Lightness.


 HSLA: Adds alpha (transparency).

h1 { color: hsl(9, 100%, 64%); } /* Tomato Red */


h1 { color: hsla(9, 100%, 64%, 0.5); } /* Semi-transparent */

📌 5. Text Styling (Advanced)

5.1 Text Transform

Controls the case of text:


 uppercase, lowercase, capitalize, none.

h1 { text-transform: uppercase; }

5.2 Letter Spacing

Controls the space between letters.

h1 { letter-spacing: 2px; }

5.3 Text Decoration

Applies text decorations like underline, line-through, and overline.

a { text-decoration: underline; }

5.4 Text Shadow

Adds a shadow to text.

h1 { text-shadow: 2px 2px 5px grey; }

5.5 Line Height

Sets the space between lines of text.

p { line-height: 1.5; }

5.6 Font Variant

Controls the use of alternate glyphs for text, such as small-caps.

p { font-variant: small-caps; }

📌 6. Layout Techniques (Flexbox & Grid)

6.1 Flexbox Layout

Flexbox allows flexible layouts by distributing space among items.

 display: flex: Apply flexbox layout.


 flex-direction: Defines the direction of items (row, column).
 justify-content: Aligns items horizontally.
 align-items: Aligns items vertically.
 flex-wrap: Defines if items should wrap into new lines.

.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}

6.2 Grid Layout

CSS Grid is a two-dimensional layout system.

 display: grid: Turns the container into a grid.


 grid-template-columns & grid-template-rows: Define rows and columns.
 grid-gap: Space between rows and columns.

.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 20px;
}

📌 7. Positioning (Advanced)

7.1 Absolute Positioning

An element is positioned relative to its nearest positioned ancestor.

.position-absolute {
position: absolute;
top: 10px;
left: 20px;
}

7.2 Fixed Positioning

The element is positioned relative to the viewport (fixed on scroll).

.position-fixed {
position: fixed;
top: 0;
left: 0;
}

7.3 Sticky Positioning

An element sticks to the top of the viewport when scrolling.

.position-sticky {
position: sticky;
top: 0;
}

📌 8. Transitions & Animations

8.1 CSS Transitions

Transitions allow for smooth changes of properties over a defined time period.

.button {
transition: background-color 0.3s ease;
}

.button:hover {
background-color: blue;
}

8.2 CSS Animations

Define keyframe-based animations with timing functions and keyframe states.

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.fade {
animation: fadeIn 2s ease-in;
}

📌 9. Filters and Effects

9.1 CSS Filters

Apply visual effects like blur, grayscale, brightness, etc.

img {
filter: blur(5px);
}

div {
filter: grayscale(50%);
}

9.2 Box Shadow & Text Shadow

 box-shadow: Adds shadow to the box.


 text-shadow: Adds shadow to text.
div {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

📌 10. Responsive Design (RWD)

10.1 Media Queries

Use media queries to apply different styles based on device characteristics like screen width, resolution,
etc.

@media (max-width: 768px) {


body {
font-size: 14px;
}
}

10.2 Viewport Units

 vw: 1% of the viewport width.


 vh: 1% of the viewport height.

div {
width: 50vw; /* 50% of the viewport width */
height: 50vh; /* 50% of the viewport height */
}

You might also like