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

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

• 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>  

• 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>

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;">`

1. ID Selectors:

-   Second highest specificity.
-   Target elements using the `id` attribute.
-   Example: `#myElement { color: blue; }`

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; }`

1. Type Selectors and Pseudo-Elements:

-   Lowest specificity.
-   Target elements based on their tag name or pseudo-elements.
-   Example: `div { color: yellow; }`

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 */
}

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 */
}

1. Targeting Large Screens:

@media (min-width: 1025px) {
  /* Styles for screens with a minimum width of 1025px */
  /* Example: Desktop monitors or large screens */
}

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.

1. Flex Items:

-   The child elements of a flex container.
-   By default, flex items are laid out in a row (left to right).

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.

1. Flex Direction:

-   Determines the direction of the main axis.
-   Values: `row` (default), `row-reverse`, `column`, `column-reverse`.
-   Example: `flex-direction: column;`

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;`

1. Align Items:

-   Aligns flex items along the cross axis.
-   Values: `flex-start`, `flex-end`, `center`, `baseline`, `stretch` (default).
-   Example: `align-items: center;`

1. Align Self:

-   Overrides the `align-items` property for individual flex items.
-   Example: `align-self: flex-end;`

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;`

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;`

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.

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.

1. Grid Items:

-   The child elements of a grid container.
-   By default, grid items are automatically placed in the grid.

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.

1. Grid Rows and Columns:

-   Specify the size of rows and columns using values like fixed lengths, percentages, or the `fr` unit (fractional unit).

1. Grid Gaps:

-   Create space between grid items using the `grid-gap` property.
-   Values: `grid-row-gap`, `grid-column-gap`, `grid-gap`.

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.

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.

1. Grid Lines:

-   Horizontal and vertical lines that divide the grid into rows and columns.
-   Reference grid lines using numerical indices or named lines.

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.

1. Grid Template:

-   Combine grid tracks, gaps, and areas into a single shorthand property.


  Use the grid-template property to define the grid template.

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