Scribd
Upload
30 views4 pages

Essential HTML & CSS Commands Guide

This document provides a comprehensive overview of HTML and CSS commands, including their tags, attributes, and properties. It covers essential elements for document setup, text formatting, links, images, lists, tables, forms, media, layout, and various CSS properties related to text, box model, colors, positioning, flexbox, grid, and animations. Each command is briefly explained to facilitate understanding and usage in web development.

Uploaded by

g2176149
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
30 views4 pages

Essential HTML & CSS Commands Guide

This document provides a comprehensive overview of HTML and CSS commands, including their tags, attributes, and properties. It covers essential elements for document setup, text formatting, links, images, lists, tables, forms, media, layout, and various CSS properties related to text, box model, colors, positioning, flexbox, grid, and animations. Each command is briefly explained to facilitate understanding and usage in web development.

Uploaded by

g2176149
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 Commands with Explanation

HTML Commands (Tags & Attributes)


1. Document Setup

- <!DOCTYPE html> - Declares the document type as HTML5

- <html> - Root of the HTML document

- <head> - Contains meta information, title, links to CSS/JS

- <title> - Sets the title of the web page (shown in browser tab)

- <body> - Contains the content of the web page

2. Text Formatting

- <h1> to <h6> - Headings (from largest to smallest)

- <p> - Paragraph

- <br> - Line break

- <hr> - Horizontal line

- <b>, <strong> - Bold text

- <i>, <em> - Italic text

- <u> - Underlined text

- <small> - Smaller text

- <mark> - Highlighted text

- <sup> - Superscript

- <sub> - Subscript

3. Links and Images

- <a href='url'> - Hyperlink

- <img src='[Link]' alt='desc'> - Image

4. Lists

- <ul> - Unordered list

- <ol> - Ordered list

- <li> - List item

5. Tables

- <table> - Table container

- <tr> - Table row

- <td> - Table data cell


- <th> - Table header cell

6. Forms and Inputs

- <form> - Form container

- <input> - Input field

- <label> - Label for input

- <textarea> - Multi-line text input

- <select> - Dropdown menu

- <option> - Option in dropdown

- <button> - Button

7. Media

- <audio>, <video> - Embed audio/video

- <source> - Source for media

- <iframe> - Embed other web pages

8. Layout

- <div> - Block container

- <span> - Inline container

- <section>, <article>, <nav>, <header>, <footer>, <aside> - Semantic layout tags

CSS Commands (Properties)


1. Text and Font

- color - Text color

- font-size - Size of the text

- font-family - Font type

- font-weight - Thickness

- text-align - Alignment

- text-decoration - Underline, overline, none

- line-height - Line spacing

- letter-spacing - Space between letters

2. Box Model

- width, height - Set element size

- padding - Space inside element

- margin - Space outside element


- border - Border around element

- box-sizing - Width calculation

3. Colors and Background

- background-color - Background color

- background-image - Set background image

- opacity - Transparency

4. Positioning and Layout

- display - Layout type (block, inline, flex, grid, none)

- position - Layout position (static, relative, absolute, fixed, sticky)

- top, right, bottom, left - Offsets

- z-index - Layer order

- float - Float elements

- clear - Prevent float overlap

5. Flexbox

- display: flex - Enable flex layout

- flex-direction - Row or column

- justify-content - Main axis alignment

- align-items - Cross axis alignment

- gap - Space between items

6. Grid

- display: grid - Enable grid layout

- grid-template-columns - Define columns

- grid-template-rows - Define rows

- gap - Space between grid items

7. Animation & Transition

- transition - Smooth property change

- animation - Animation effect

- @keyframes - Animation steps

8. Others

- overflow - Handle overflow

- visibility - Show/hide
- cursor - Pointer style

- box-shadow - Shadow around element

- border-radius - Rounded corners

You might also like