DEV Community

Ankit Kumar
Ankit Kumar

Posted on • Edited on

HTML - CSS Technical Paper

Box Model

  • Box Model Structure

    • The four components: content, padding, border, and margin
    • Hierarchical arrangement and relationships between the components
  • Box Sizing Property

    • Default value: content-box vs. alternative value: border-box
    • Impact on element sizing and available space
  • Content Area

    • Actual content and its dimensions within the box
    • Affected by padding, border, and box sizing property
  • Padding

    • Space between the content and the border
    • Control over padding dimensions and individual sides
  • Border

    • Visual boundary surrounding the content and padding
    • Customizable properties like width, style, and color
  • Margin

    • Space outside the border, creating gaps between elements
    • Control over margin dimensions and collapsing margins
  • Box Model and Layout

    • Impact on element positioning and flow within the document
    • Understanding the total space occupied by an element
  • Box Model Adjustments

    • Overriding default box model behavior using CSS properties
    • Fine-tuning box dimensions and spacing

Inline vs Block elements

  • Differences

Box Model and Inline Elements

-   Inline elements occupy space only around their content
-   Lack of explicit dimensions like width and height
Enter fullscreen mode Exit fullscreen mode

Box Model and Block Elements

-   Block elements occupy the full width of their parent container by default
-   Ability to specify dimensions using width and height properties
Enter fullscreen mode Exit fullscreen mode
  • Inline elements
  • <span>: A generic inline container used for styling or manipulating specific sections of text.
  • <a>: Represents an anchor or hyperlink, allowing users to navigate to another page or location.
  • <em>: Emphasizes or highlights text by rendering it in italicized format.
  • <strong>: Indicates strong importance, rendering the text in bold.
<p>
My mother has  
<span style="color:blue;font-weight:bold;">blue</span>  
eyes and my father has  <span style="color:darkolivegreen;font-weight:bold;">dark green</span>  eyes.
</p>  
Enter fullscreen mode Exit fullscreen mode
  • Block elements
  • <div>: A generic block-level container used for grouping and structuring content.
  • <p>: Represents a paragraph of text, typically with a line break before and after.
  • <h1> to <h6>: Heading elements used to define different levels of headings, with <h1> being the highest level.
  • <ul>: Unordered list, displaying a list of items without any particular order.
  • <ol>: Ordered list, displaying a numbered or ordered list of items.
  • <li>: List item element used within <ul> or <ol> to represent individual items.
  • <table>: Creates a table for displaying tabular data, including rows and columns.
  • <form>: Represents an interactive form, containing input fields, checkboxes, buttons, etc.
  • <section>: Defines a section within a document, often used for grouping related content.
  • <header>: Represents the introductory content or a container for heading elements.
  • <footer>: Represents the footer or the closing content of a document or section. example:-
<div style="background-color:black;color:white;padding:20px;">  
<h2>London</h2>  
<p>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</p>  
</div>
Enter fullscreen mode Exit fullscreen mode

Common CSS structural classes

CSS structural classes for targeting child elements allow you to apply specific styles to elements that are direct children of a particular parent element.

  1. .parent .child: Selects any descendant element with the class "child" within a parent element, regardless of its level of nesting.
  2. .parent:first-child: Selects the first child element within a parent element.
  3. .parent:last-child: Selects the last child element within a parent element.
  4. .parent:nth-child(n): Selects the nth child element within a parent element, where "n" can be a specific number, a keyword (e.g., "even" or "odd"), or a formula.
  5. .parent:first-of-type: Selects the first element of a specific type within a parent element.
  6. .parent:last-of-type: Selects the last element of a specific type within a parent element.
  7. .parent:nth-of-type(n): Selects the nth element of a specific type within a parent element, using the same options as :nth-child.
  8. .parent:first-child:nth-last-child(2): Selects the second-to-last child element within a parent element when it is also the first child.
  9. .parent:only-child: Selects a child element that is the only child of its parent.

Common CSS syling classes

CSS styling classes are used to apply specific styles to HTML elements by assigning class names to those elements.

  1. .text-center: Centers the text within an element horizontally.
  2. .text-left: Aligns the text to the left within an element.
  3. .text-right: Aligns the text to the right within an element.
  4. .text-justify: Justifies the text within an element, creating equal spacing between words.
  5. .text-uppercase: Converts the text to uppercase.
  6. .text-lowercase: Converts the text to lowercase.
  7. .text-capitalize: Capitalizes the first letter of each word in the text.
  8. .bg-color: Sets the background color of an element.
  9. .text-color: Sets the text color of an element.
  10. .font-size: Sets the font size of the text within an element.
  11. .font-family: Specifies the font family to be used for the text within an element.
  12. .font-weight: Sets the font weight (e.g., bold or normal) of the text.
  13. .font-style: Applies italic or normal style to the text.
  14. .border: Adds a border around an element.
  15. .padding: Sets the padding (spacing) within an element.
  16. .margin: Sets the margin (spacing) around an element.
  17. .display-block: Sets the display property of an element to block, making it occupy its own line.
  18. .display-inline: Sets the display property of an element to inline, allowing it to flow with surrounding text.
  19. .display-inline-block: Sets the display property of an element to inline-block, combining features of both block and inline elements.
  20. .hidden: Hides the element by setting its display property to none.

CSS Specificity

CSS specificity determines which styles are applied to HTML elements when conflicting styles exist.

  1. Inline Styles:
-   Highest specificity.
-   Applied directly to HTML elements using the `style` attribute.
-   Example: `<div style="color: red;">`
Enter fullscreen mode Exit fullscreen mode
  1. ID Selectors:
-   Second highest specificity.
-   Target elements using the `id` attribute.
-   Example: `#myElement { color: blue; }`
Enter fullscreen mode Exit fullscreen mode
  1. Class Selectors, Attribute Selectors, and Pseudo-Classes:
-   Lower specificity than IDs.
-   Target elements using class names, attributes, or pseudo-classes.
-   Example: `.myClass { color: green; }`
Enter fullscreen mode Exit fullscreen mode
  1. Type Selectors and Pseudo-Elements:
-   Lowest specificity.
-   Target elements based on their tag name or pseudo-elements.
-   Example: `div { color: yellow; }`
Enter fullscreen mode Exit fullscreen mode

CSS Responsive Queries

CSS responsive queries, also known as media queries, allow developers to apply different styles based on the characteristics of the device or viewport. These queries enable the creation of responsive web designs that adapt to different screen sizes and devices.

  1. Targeting Small Screens:
@media (max-width: 768px) {
  /* Styles for screens with a maximum width of 768px */
  /* Example: Mobile devices in portrait mode */
}
Enter fullscreen mode Exit fullscreen mode
  1. Targeting Medium Screens:
@media (min-width: 769px) and (max-width: 1024px) {
  /* Styles for screens with a width between 769px and 1024px */
  /* Example: Tablets in landscape mode */
}
Enter fullscreen mode Exit fullscreen mode
  1. Targeting Large Screens:
@media (min-width: 1025px) {
  /* Styles for screens with a minimum width of 1025px */
  /* Example: Desktop monitors or large screens */
}
Enter fullscreen mode Exit fullscreen mode

Flexbox

CSS Flexbox is a layout module that provides a flexible way to arrange and align elements within a container.

  1. Flex Container:
-   The parent element that contains flex items.
-   Use the `display: flex;` or `display: inline-flex;` property to create a flex container.
Enter fullscreen mode Exit fullscreen mode
  1. Flex Items:
-   The child elements of a flex container.
-   By default, flex items are laid out in a row (left to right).
Enter fullscreen mode Exit fullscreen mode
  1. Main Axis and Cross Axis:
-   Flexbox has two axes: the main axis and the cross axis.
-   The main axis is defined by the `flex-direction` property (default: row).
-   The cross axis is perpendicular to the main axis.
Enter fullscreen mode Exit fullscreen mode
  1. Flex Direction:
-   Determines the direction of the main axis.
-   Values: `row` (default), `row-reverse`, `column`, `column-reverse`.
-   Example: `flex-direction: column;`
Enter fullscreen mode Exit fullscreen mode
  1. Justify Content:
-   Aligns flex items along the main axis.
-   Values: `flex-start` (default), `flex-end`, `center`, `space-between`, `space-around`, `space-evenly`.
-   Example: `justify-content: center;`
Enter fullscreen mode Exit fullscreen mode
  1. Align Items:
-   Aligns flex items along the cross axis.
-   Values: `flex-start`, `flex-end`, `center`, `baseline`, `stretch` (default).
-   Example: `align-items: center;`
Enter fullscreen mode Exit fullscreen mode
  1. Align Self:
-   Overrides the `align-items` property for individual flex items.
-   Example: `align-self: flex-end;`
Enter fullscreen mode Exit fullscreen mode
  1. Flex Wrap:
-   Controls whether flex items should wrap onto multiple lines if they exceed the container's width.
-   Values: `nowrap` (default), `wrap`, `wrap-reverse`.
-   Example: `flex-wrap: wrap;`
Enter fullscreen mode Exit fullscreen mode
  1. Flex Grow, Flex Shrink, and Flex Basis:
-   Controls how flex items grow, shrink, and distribute space.
-   `flex-grow`: Specifies the flex grow factor.
-   `flex-shrink`: Specifies the flex shrink factor.
-   `flex-basis`: Specifies the initial size of the flex item.
-   Example: `flex: 1 0 200px;`
Enter fullscreen mode Exit fullscreen mode
  1. Flex Container Alignment:
-   Additional properties to align the flex container itself.
-   `align-content`: Aligns flex lines when there is extra space on the cross axis.
-   `align-self`: Aligns the flex container within its parent container.
Enter fullscreen mode Exit fullscreen mode

Grid

CSS Grid is a powerful layout module that allows developers to create two-dimensional grid layouts for web pages. It provides a highly flexible and responsive way to arrange and align elements in rows and columns.

  1. Grid Container:
-   The parent element that contains grid items.
-   Use the `display: grid;` property to create a grid container.
Enter fullscreen mode Exit fullscreen mode
  1. Grid Items:
-   The child elements of a grid container.
-   By default, grid items are automatically placed in the grid.
Enter fullscreen mode Exit fullscreen mode
  1. Grid Tracks:
-   The rows and columns that make up the grid.
-   Define the grid tracks using the `grid-template-rows` and `grid-template-columns` properties.
Enter fullscreen mode Exit fullscreen mode
  1. Grid Rows and Columns:
-   Specify the size of rows and columns using values like fixed lengths, percentages, or the `fr` unit (fractional unit).
Enter fullscreen mode Exit fullscreen mode
  1. Grid Gaps:
-   Create space between grid items using the `grid-gap` property.
-   Values: `grid-row-gap`, `grid-column-gap`, `grid-gap`.
Enter fullscreen mode Exit fullscreen mode
  1. Grid Placement:
-   Control the placement of grid items within the grid.
-   Use the `grid-row` and `grid-column` properties to specify the start and end positions of items.
Enter fullscreen mode Exit fullscreen mode
  1. Grid Areas:
-   Assign names to grid areas and reference them in the grid placement properties.
-   Define grid areas using the `grid-template-areas` property.
Enter fullscreen mode Exit fullscreen mode
  1. Grid Lines:
-   Horizontal and vertical lines that divide the grid into rows and columns.
-   Reference grid lines using numerical indices or named lines.
Enter fullscreen mode Exit fullscreen mode
  1. Grid Alignment:
-   Control the alignment of grid items within their cells.
-   Use the `justify-self` and `align-self` properties for horizontal and vertical alignment.
Enter fullscreen mode Exit fullscreen mode
  1. Grid Template:
-   Combine grid tracks, gaps, and areas into a single shorthand property.

  • Use the grid-template property to define the grid template.
Enter fullscreen mode Exit fullscreen mode

Common header meta tags

Header meta tags are HTML elements placed within the <head> section of a web page. They provide information about the webpage to search engines, browsers, and other web services.

  1. <title>:

Specifies the title of the webpage.
- Example: <title>My Website</title>

  1. <meta charset>:

Defines the character encoding for the webpage.
- Example: <meta charset="UTF-8">

  1. <meta name="viewport">:

Controls how the webpage is displayed on different devices and screen sizes.
- Example: <meta name="viewport" content="width=device-width, initial-scale=1.0">

  1. <meta name="description">:

Provides a brief description of the webpage's content.
- Example: <meta name="description" content="A website showcasing the latest fashion trends.">

  1. <meta name="keywords">:

Specifies keywords related to the webpage's content.
- Example: <meta name="keywords" content="fashion, trends, clothing, style">

  1. <meta name="author">:

Specifies the author of the webpage.
- Example: <meta name="author" content="John Doe">

  1. <meta name="robots">:

Instructs search engine crawlers on how to index and display the webpage.
- Example: <meta name="robots" content="index, follow">

  1. <link rel="canonical">:

Defines the canonical URL of a webpage to prevent duplicate content issues.
- Example: <link rel="canonical" href="https://www.example.com/page">

  1. <link rel="stylesheet">:

Links an external CSS file to the webpage.
- Example: <link rel="stylesheet" href="styles.css">

  1. <script>:

Embeds or references external JavaScript files.
- Example: <script src="script.js"></script>

Css Selectors

CSS selectors determine which HTML elements should be targeted and styled.

  1. Element Selectors:

Select elements based on their tag names.
- Example: p { color: red; }

  1. Class Selectors:

Select elements based on their class attribute.
- Example: .myClass { font-size: 16px; }

  1. ID Selectors:

Select a single element based on its ID attribute.
- Example: #myElement { background-color: blue; }

  1. Attribute Selectors:

Select elements based on their attributes.
- Example: input[type="text"] { border: 1px solid black; }

  1. Pseudo-Classes:

Select elements based on their states or positions.
- Example: a:hover { color: purple; }

  1. Pseudo-Elements:

Select and style a specific part of an element.
- Example: p::first-line { text-transform: uppercase; }

  1. Combinators:

Combine multiple selectors to target specific elements.
- Example: ul li { list-style-type: square; }

  1. Descendant Selectors:

Select elements that are descendants of another element.
- Example: div p { font-weight: bold; }

  1. Child Selectors: Select elements that are direct children of another element.
    • Example: ul > li { color: green; }
  2. Universal Selectors: Select all elements in the document.
    • Example: * { margin: 0; padding: 0; }

References

W3SCHOOLS
GFG

Top comments (0)