Sagar Dutta

Posted on May 24, 2023

HTML/CSS Concepts

#webdev #html #css

Box Model

The box model is a way of describing how the size and spacing of an element are calculated by the browser. The box model consists of four parts: content, padding, border and margin.

The content is the actual text or image that the element contains. The width and height properties of an element only affect the content area, not the padding, border or margin.
The padding is the space between the content and the border. It is transparent and can have different values for each side.
The border is the line that surrounds the padding and the content. It can have different styles, widths and colors.
The margin is the space outside the border. It is also transparent and can have different values for each side. It creates a gap between adjacent elements.

Inline versus Block Elements. Examples.

The difference between inline and block elements is how they behave in terms of page flow and layout. Here are some key points:

Block elements always start on a new line and take up the full width available. They respect the width, height, padding, margin and border properties. They create a vertical gap between adjacent elements. Some examples of block elements are <div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>, <table> etc.
Inline elements do not start on a new line and only take up as much width as necessary. They do not respect the width, height, vertical padding, margin and border properties. They do not create a vertical gap between adjacent elements. Some examples of inline elements are <a>, <span>, <em>, <strong>, <img>, <input>, <button> etc.

Positioning: Relative/Absolute

An element with position: relative is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
An element with position: absolute is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body and moves along with page scrolling. Note that absolute positioned elements are removed from the normal flow and can overlap elements.

Common CSS structural classes

Structural pseudo classes allow access to the child elements present within the hierarchy of parent elements. Commonly used ones are:

:first-child

Selects first child element under the parent element when first child element is a specified element.
:last-child

Selects last child element under the parent element when last child element is a specified element.
:hover

This pseudo-class is used to add a special effect to an element when the mouse pointer is over it.
:active

This pseudo-class is used to select an element that is activated when the user clicks on it.
:focus

This pseudo-class is used to select an element that is currently focused by the user. It works on user input elements used in forms and is triggered as soon as the user clicks on it.

CSS Specificity

Every CSS selector has its place in the specificity hierarchy.

There are four categories which define the specificity level of a selector:

Inline styles - Example: <h1 style="color: pink;">
IDs - Example: #navbar
Classes, pseudo-classes, attribute selectors - Example: .test, :hover, [href]
Elements and pseudo-elements - Example: h1, ::before

CSS Responsive Queries

CSS media queries are a way to apply CSS only when the browser and device environment matches a rule that we specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow us to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment our site is running on, such as whether the user is using a touchscreen rather than a mouse.

The basic syntax of a media query looks like this:

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

Flexbox

Flexbox is a CSS layout module that allows you to arrange elements in a flexible way. It is especially useful for creating responsive layouts that adapt to different screen sizes and orientations.

Flexbox is based on the concept of a flex container and flex items. A flex container is an element that has display: flex or display: inline-flex applied to it. A flex item is any direct child of a flex container.

Flexbox provides a set of properties that allow you to control the layout of the flex container and its items. Some properties apply to the flex container, and some apply to the flex items.

Common Flex Container Properties

flex-direction: This property defines the direction of the main axis. It can have one of these values: row, row-reverse, column, column-reverse. The default value is row.
flex-wrap: This property defines whether the flex items should wrap onto multiple lines or not. It can have one of these values: nowrap, wrap, wrap-reverse. The default value is nowrap.
flex-flow: This property is a shorthand for flex-direction and flex-wrap. It can have any combination of these values: row, row-reverse, column, column-reverse, nowrap, wrap, wrap-reverse. The default value is row nowrap.
justify-content: This property defines how the flex items are aligned along the main axis. It can have one of these values: flex-start, flex-end, center, space-between, space-around, space-evenly. The default value is flex-start.
align-items: This property defines how the flex items are aligned along the cross axis. It can have one of these values: stretch, flex-start, flex-end, center, baseline. The default value is stretch.
align-content: This property defines how the lines of flex items are aligned along the cross axis when there is extra space. It can have one of these values: stretch, flex-start, flex-end, center, space-between, space-around. The default value is stretch.

Common Flex Item Properties

order: This property defines the order in which the flex items appear in the flex container. It can have any integer value, positive or negative. The default value is 0.
flex-grow: This property defines how much a flex item can grow relative to the rest of the flex items in the same line. It can have any non-negative number value. The default value is 0.
flex-shrink: This property defines how much a flex item can shrink relative to the rest of the flex items in the same line. It can have any non-negative number value. The default value is 1.
flex-basis: This property defines the initial size of a flex item before any free space is distributed. It can have any length value, or a keyword value of auto or content. The default value is auto.
flex: This property is a shorthand for flex-grow, flex-shrink and flex-basis. It can have any combination of these values: a non-negative number for flex-grow, a non-negative number for
flex-shrink, a length or keyword value for flex-basis. The default value is 0 1 auto.
align-self: This property overrides the align-items property for a specific flex item. It can have one of these values: auto, stretch, flex-start, flex-end, center, baseline. The default value is auto.

Flexbox Examples

Example 1: A simple row layout

In this example, we create a simple row layout with three div elements inside a flex container. We use justify-content to align them to the center of the main axis.

.container {
  display: flex;
  justify-content: center;
}

.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: coral;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Example 2: A simple column layout

In this example, we create a simple column layout with three div elements inside a flex container. We use flex-direction to change the direction of the main axis to column, and align-items to align them to the center of the cross axis.

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: coral;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Grid

CSS grid is a CSS layout module that allows us to create two-dimensional grid layouts on the web. It is especially useful for creating complex and responsive layouts that are not possible with other layout methods.

CSS grid is based on the concept of a grid container and grid items. A grid container is an element that has display: grid or display: inline-grid applied to it. A grid item is any direct child of a grid container.

CSS grid provides a set of properties that allow you to control the layout of the grid container and its items. Some properties apply to the grid container, and some apply to the grid items.

Common Grid Container Properties

grid-template-columns: This property defines the size and number of columns in the grid. It can have a list of values separated by spaces, where each value represents the size of a column. The values can be lengths, percentages, fractions of the free space using the fr unit, or keywords such as auto or minmax. You can also use the repeat() function to repeat a pattern of values.
grid-template-rows: This property defines the size and number of rows in the grid. It can have a list of values separated by spaces, where each value represents the size of a row. The values can be lengths, percentages, fractions of the free space using the fr unit, or keywords such as auto or minmax. You can also use the repeat() function to repeat a pattern of values.
grid-template-areas: This property defines the layout of the grid by assigning names to grid areas and placing them in a grid template. It can have a list of strings separated by commas, where each string represents a row of the grid template. The strings can have names that match the names given to grid items using the grid-area property, or dots (.) to represent empty cells.
grid-auto-columns: This property defines the size of columns that are created implicitly when there are more grid items than columns defined by grid-template-columns. It can have a single value that applies to all implicit columns, or a list of values that apply to implicit columns in a cycle.
grid-auto-rows: This property defines the size of rows that are created implicitly when there are more grid items than rows defined by grid-template-rows. It can have a single value that applies to all implicit rows, or a list of values that apply to implicit rows in a cycle.
grid-auto-flow: This property defines how grid items are placed in the grid when they are not explicitly positioned using grid-column or grid-row. It can have one of these values: row, column, row dense, column dense. The default value is row.
grid: This property is a shorthand for setting all of the explicit and implicit grid properties in one declaration. It can have any combination of these values: a list of values for grid-template-columns, followed by a slash (/) and a list of values for grid-template-rows, followed by an optional list of strings for grid-template-areas; or one or more values for grid-auto-flow, followed by optional values for grid-auto-rows and/or grid-auto-columns.
justify-items: This property defines how grid items are aligned along the row axis within their grid area. It can have one of these values: start, end, center, stretch. The default value is stretch.
align-items: This property defines how grid items are aligned along the column axis within their grid area. It can have one of these values: start, end, center, stretch. The default value is stretch.
justify-content: This property defines how the entire grid is aligned along the row axis within its container. It can have one of these values: start, end, center, stretch, space-around, space-between, space-evenly. The default value is start.
align-content: This property defines how the entire grid is aligned along the column axis within its container. It can have one of these values: start, end, center, stretch, space-around, space-between, space-evenly. The default value is start.

Common Grid Item Properties

order: This property defines the order in which the grid items appear in the grid container. It can have any integer value, positive or negative. The default value is 0.
grid-column-start: This property defines the starting column line for
the grid item's placement in the grid. It can have any integer value that refers to a line number or name, or a keyword value such as
auto, span, or -n. The default value is auto.
grid-column-end: This property defines the ending column line for
the grid item's placement in the grid. It can have any integer value that refers to a line number or name, or a keyword value such as
auto, span, or -n. The default value is auto.
grid-row-start: This property defines the starting row line for
the grid item's placement in the grid. It can have any integer value that refers to a line number or name, or a keyword value such as
auto, span, or -n. The default value is auto.
grid-row-end: This property defines the ending row line for
the grid item's placement in the grid. It can have any integer value that refers to a line number or name, or a keyword value such as
auto, span, or -n. The default value is auto.
grid-column: This property is a shorthand for setting both
grid-column-start and grid-column-end in one declaration. It can have any combination of these values: an integer value or name for
grid-column-start, followed by a slash (/) and an integer value or name for grid-column-end; or a keyword value such as auto
or span n. The default value is 1 / -1.
grid-row: This property is a shorthand for setting both
grid-row-start and grid-row-end in one declaration. It can have any combination of these values: an integer value or name for grid-row-start, followed by a slash (/) and an integer value or name for grid-row-end; or a keyword value such as auto or span n.
The default value is 1 / -1.

Common header meta tags

Meta tags are snippets of HTML code that provide information about a web page to browsers, search engines and other web services. Meta tags are placed inside the <head> element of a web page, and have the following format:

<meta name="name" content="content">

<meta http-equiv="name" content="content">

The name attribute specifies the name of the meta tag, and the content attribute specifies the value of the meta tag. The http-equiv attribute can be used to simulate an HTTP response header.

Common header meta tags and their purposes:

<meta charset="UTF-8">: This meta tag specifies the character encoding of the web page. It is recommended to use UTF-8 as the universal character set for all web pages.
<meta name="description" content="Free Web tutorials">: This meta tag provides a brief description of the web page. It is often used by search engines to display a snippet of the page in the search results.
<meta name="keywords" content="HTML, CSS, JavaScript">: This meta tag provides a list of keywords that are relevant to the web page. It was once used by search engines to rank pages based on their keywords, but it is no longer considered a major ranking factor.
<meta name="author" content="John Doe">: This meta tag provides the name of the author of the web page. It can be used to give credit to the creator of the content.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag controls how the web page is displayed on different devices and screen sizes. It sets the width of the viewport (the visible area of the web page) to match the width of the device, and sets the initial zoom level to 1.0 (no zoom). This helps to create responsive web pages that adapt to different devices and orientations.
<meta http-equiv="refresh" content="30">: This meta tag instructs the browser to refresh the web page every 30 seconds. It can be used to update dynamic content or redirect users to another page after a certain time.
<meta http-equiv="content-type" content="text/html; charset=UTF-8">: This meta tag specifies the MIME type and character encoding of the web page. It is equivalent to sending an HTTP header with the same information. It is not necessary if you already have a <meta charset> tag.