⬅ Back to Home
HTML Examples and What They Do
- <h1> – <h6> → Headings, where <h1> is the largest and most important, <h6> the smallest.
- <p> → Paragraphs of text.
- <a href=""> → Links to other pages or websites.
- <img src=""> → Images (needs a file path and alt text).
- <video> → Embeds a video player into the page.
- <audio> → Adds audio/sound playback.
- <ul>/<ol> and <li> → Lists (unordered with bullets, ordered list with numbers).
- <header> → Top part of a page (logo, navigation, hero image).
- <main> → The main content of the page.
- <footer> → Bottom part of a page (credits, copyright, contact info).
- <section> → Groups related content into blocks.
- <div> → General container for grouping and styling elements.
- <nav> → Navigation menus or links.
- <input> → Input fields (text, checkbox, radio, etc.).
- <button> → Clickable button.
- <svg> → Vector graphics, often used for icons.
- <br> → Line break inside text.
- <strong>/<em> → Bold text (<strong>) or italic/emphasized text (<em>).
CSS Examples and What They Do
- color → Changes the text color.
- background-color → Sets the background color of an element.
- background-image → Adds an image as a background.
- font-family → Changes the font type of text.
- font-size → Sets the size of text.
- margin → Creates space outside an element.
- padding → Creates space inside an element.
- border → Adds a border around an element.
- border-radius → Rounds the corners of an element.
- width / height → Sets the size of elements.
- position → Controls how elements are placed (static, relative, absolute, fixed).
- top / left / right / bottom → Positions elements when using relative or absolute positioning.
- opacity → Makes an element partially transparent.
- text-align → Aligns text inside an element (left, center, right).
- line-height → Adjusts the spacing between lines of text.
- overflow → Controls what happens when content is too big for an element (hidden, scroll, visible).
- hover → Adds styles when the user hovers over an element.
- transition → Smoothly animates changes in styles.
- media queries → Applies different styles based on screen size (responsive design).
Flexbox CSS Properties
- display: flex → Turns a container into a flex container to arrange child items in rows or columns.
- flex-direction → Sets the direction of flex items (row, column, row-reverse, column-reverse).
- justify-content → Aligns flex items horizontally (flex-start, center, flex-end, space-between, space-around).
- align-items → Aligns flex items vertically (flex-start, center, flex-end, stretch, baseline).
- flex-wrap → Allows flex items to wrap onto multiple lines (nowrap, wrap, wrap-reverse).
- gap → Adds spacing between flex items.
- align-self → Overrides vertical alignment for a single flex item.
- order → Changes the visual order of flex items without changing the HTML.