Scribd
Upload
0 views

html & css

The document outlines essential HTML structural elements, text formatting, list elements, forms, links, media, and miscellaneous tags. It also provides CSS properties related to box model, layout, typography, colors, borders, buttons, responsive design, and animations. This serves as a comprehensive reference for web development basics.

Uploaded by

vivek sanap
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

html & css

The document outlines essential HTML structural elements, text formatting, list elements, forms, links, media, and miscellaneous tags. It also provides CSS properties related to box model, layout, typography, colors, borders, buttons, responsive design, and animations. This serves as a comprehensive reference for web development basics.

Uploaded by

vivek sanap
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

HTML

Structural Elements

• <html> - Root element of the document

• <head> - Contains metadata and links to external resources

• <body> - Contains the visible content of the webpage

• <header> - Defines the header section

• <nav> - Defines the navigation menu

• <main> - Contains the main content of the page

• <section> - Defines different sections (e.g., hero, projects, contact)

• <article> - Represents independent content

• <aside> - Sidebar section

• <footer> - Defines the footer section

• <div> - General container for structuring content

Text and Formatting Elements

• <h1> - Main heading

• <h2> - Section headings

• <h3> - Subheadings

• <h4> - Smaller subheadings

• <p> - Paragraph for textual content

• <span> - Inline text container

List Elements

• <ul> - Unordered list

• <li> - List items

Forms and Inputs

• <form> - Defines a form

• <input> - Input fields (text, email, number, etc.)

• <label> - Labels for form fields

• <select> - Dropdown menu


• <option> - Options within a dropdown

• <textarea> - Multi-line text input

• <button> - Clickable button

Links and Media

• <a> - Anchor tag for navigation and external links

• <img> - Displays images

Icons and External Resources

• <i> - Used for Font Awesome icons

• <link> - Includes an external CSS file

• <script> - Loads JavaScript files

Miscellaneous Elements

• <hr> - Horizontal rule (divider)

• <meta> - Metadata for the document

• <code> - Displays code snippets

CSS
1. Box Model & Spacing

• margin: 0 auto; → Centers an element horizontally.

• margin-bottom: 20px; → Adds space below an element.

• padding: 2rem; → Adds internal spacing inside an element.

• border: 4px solid var(--lighting-color); → Adds a solid border with a dynamic color.

• border-radius: 0.5rem; → Rounds the corners of an element.

• box-sizing: border-box; → Ensures width and height include padding and border.

2. Layout & Positioning

• display: flex; → Enables flexbox layout.

• display: grid; → Enables grid layout.

• justify-content: center; → Centers items horizontally in a flex container.

• align-items: center; → Aligns items vertically in a flex container.

• flex-direction: column; → Aligns flex items vertically.


• position: sticky; → Keeps an element fixed at the top while scrolling.

• top: 0; → Positions an element at the top (used with position: sticky;).

• z-index: 100; → Controls the stacking order of overlapping elements.

• overflow: hidden; → Hides content that overflows the element’s box.

• white-space: nowrap; → Prevents text from wrapping to the next line.

• grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); → Defines a responsive grid layout.

• gap: 2rem; → Adds space between grid or flex items.

3. Typography

• font-size: 1.8rem; → Sets text size relative to root font size.

• font-weight: bold; → Makes the text bold.

• font-family: 'Roboto', sans-serif; → Defines the font type.

• line-height: 1.5; → Adjusts spacing between lines of text.

• letter-spacing: 1px; → Increases space between characters.

• text-align: center; → Centers text horizontally.

• text-transform: uppercase; → Converts text to uppercase.

• text-decoration: none; → Removes underlines from links.

4. Colors & Backgrounds

• background-color: #000; → Sets a black background.

• color: white; → Sets text color to white.

• background-image: url('image.jpg'); → Applies an image as a background.

• background-size: cover; → Ensures the background image covers the entire container.

• background-repeat: no-repeat; → Prevents background image repetition.

• background-attachment: fixed; → Keeps the background fixed when scrolling.

5. Borders & Shadows

• border-bottom: 4px solid var(--lighting-color); → Adds a bottom border with dynamic color.

• box-shadow: 5px 5px 5px rgba(1, 1, 1, 0.05); → Creates a subtle shadow effect.

6. Buttons & Inputs

• cursor: pointer; → Changes the cursor to a pointer when hovering over an element.

• outline-color: var(--lighting-color); → Changes focus outline color.


• transition: 0.3s ease-in-out; → Adds smooth animation to property changes.

7. Responsive Design

• @media (max-width: 768px) { ... } → Defines styles for smaller screens.

• min-height: 50vh; → Ensures a minimum height of half the viewport.

• max-width: 1200px; → Limits the maximum width of an element.

8. Effects & Animations

• opacity: 0.8; → Makes an element slightly transparent.

• transform: scale(1.05); → Slightly enlarges the element on hover.

• animation: typing 5s steps(40, end); → Creates a typing effect for text.

• scroll-behavior: smooth; → Enables smooth scrolling for anchor links.

You might also like