Anirban Das

Posted on Mar 2, 2023

HTML AND CSS CONCEPTS

#html #css #htmlconcepts #cssconcepts

BOX MODEL

CSS Box Model represents each HTML elements as a rectangular box
Every box is composed of four parts:
- Content: This is the actual content of the element, such as text, an image, or a video player.
- Padding: This is the space from the content area to the border area.
- Border: This is the area that surrounds the padding area.
- Margin: This is the outer space from the border area. It is used to separate the element from its neighbouring elements.
Some of the properties of CSS Box Model includes width, height, padding, border and margin.
- Width: This is used to set the width of the content area.
- Height: This is used to set the height of the content area.
- Padding: This are the padding properties which includes padding-top, padding-right, padding-left and padding-bottom. We can also use padding property to combine all the padding properties in clockwise direction.
- Border: This are the border properties which include border-width, border-height, border-style and border-color. Border can also be set on each sides (top, right, bottom, left) separately.
- Margin: This are the margin properties which includes margin-top, margin-right, margin-bottom, margin-left. We can also use margin property to combine all the margin properties in clockwise direction.
We can combine all the properties above to implement the CSS Box Model.

Example:

.card {
  width: 22rem;
  height: 22rem;
  padding: 2rem;
  border: 0.125rem dotted red;
  margin: 2rem;
}

INLINE VS BLOCK ELEMENTS

1. INLINE ELEMENTS

Inline elements does not start on a new line and it only takes up width as much as the content provided.
Some of the inline elements in HTML are: <a>, <br>, <button>, <img>, <span>, <strong>, <span> and <input>.
Inline elements can only be positioned using CSS by the amount of content they have inside them.
Inline elements cannot have margin or padding applied to them, they can only have borders around them.

2. BLOCK ELEMENTS

Block elements takes the full width of their container and always starts on a new line.
The browsers automatically adds some extra space (margin) before and after the element.
Some of the block elements in HTML are: <div>, <p>, <header>, <footer>, <section>, <form>, <nav> and <main>.
Block elements can be positioned using CSS
Block elements also have margin, padding and border applied on them.

POSITIONING: RELATIVE/ABSOLUTE

1. RELATIVE POSITIONING

Elements which have position: relative; is always positioned relative to its normal position.
Elemnts with relative position takes up space in the HTML page.
Setting the properties like top, right, bottom and left will make the relatively positioned element adjusted away from its normal position.
Also the other content will not be adjusted to fit into any gap left by the element.

2. ABSOLUTE POSITIONING

Elements which have position: absolute is positioned relative to the nearest positioned parent element.
If an absolute positioned element have no positioned parent element than it will use the document body and will move along with the page scrolling.
Absolute positioned elements will get remove from the normal flow of the page and can overlap elements.
Properties that can be used to position to the relative parent element are top, right, bottom and left.

COMMON CSS STRUCTURAL CLASSES

There are several common CSS structural classes used to style and layout HTML elements. Some of them are:
:first-child: They represents the element that are prior to their siblings in a tree structure.

.card li:first-child {
  color: gray;
}

:nth-child(n): They apply CSS properties to those elements that appear at the position evaluated by the resultant of an expression.

.card li:nth-child(2n+1) {
  color: gray;
}

:last-child: They are psuedo class that represents the element that is at the end of its siblings in a tree structure.

.card li:last-child {
  color: gray;
}

:nth-last-child(n): This is same as :nth-child(n) but the positioning of elements start from the end.

.card li:nth-last-child(2n+1) {
  color: gray;
}

:only-child: They represents the element that is a sole child of the parent element and there is no other siblings.

div p:only-child {
  color: gray;
}

:first-of-type: They represent the first element of the one type of siblings.

.card li:first-of-type {
  color: gray;
}

:nth-of-type(n): They represents those elements of the same type at the position given as n.

.card li:nth-of-type(2n) {
  color: gray;
}

COMMON CSS STYLING CLASSES

1. COLORS

.text-muted: Applies a light gray color to text for muted or secondary content.
.text-primary: Applies a primary color to text for main focus or importance.
.text-success: Applies a green color to text for success or positive outcome.
.text-warning: Applies an orange or yellow color to text for warning or caution.
.text-danger: Applies a red color to text for danger or critical issues.

2. SPACING

.p-1, .p-2, .p-3: Adds padding to an element in various sizes.
.m-1, .m-2, .m-3: Adds margin to an element in various sizes.
.mt-1, .mt-2, .mt-3: Adds margin-top to an element in various sizes.
.mb-1, .mb-2, .mb-3: Adds margin-bottom to an element in various sizes.
.ml-1, .ml-2, .ml-3: Adds margin-left to an element in various sizes.
.mr-1, .mr-2, .mr-3: Adds margin-right to an element in various sizes.

3. OTHERS

.rounded: Applies rounded corners to an element.
.shadow: Applies a shadow effect to an element.
.opacity-50: Applies 50% opacity to an element, making it semi-transparent.
.text-center: Centers text within an element.
.text-left: Aligns text to the left within an element.
.text-right: Aligns text to the right within an element.

CSS SPECIFICITY

CSS specificity is a measure of how specific a selector is in targeting a particular HTML element.
Here's a breakdown of how specificity is calculated:
- Element selectors have the lowest specificity and are worth 1 point.
- Class selectors are worth 10 points.
- ID selectors are worth 100 points.
- Inline styles have the highest specificity and are worth 1000 points.
When multiple styles are applied to an element, the style with the highest specificity values takes precedence.
If two selectors have the same specificity value, the one defined last in the CSS document will take precedence.

CSS RESPONSIVE QUERIES

It is used in CSS to apply styles to different devices or screen sizes.
Media queries allow web developers to specify different CSS styles for different devices, resolutions, and orientations.
They are written using the @media rule.
We can use queries to target specific device sizes, such as smartphones or tablets.
- @media screen and (max-width: 767px): This is commonly used for smartphone devices.
- @media screen and (min-width: 768px) and (max-width: 1023px): They are commonly used for tablet devices
- @media screen and (min-width: 1024px): This is commonly used for large devices like PC, Laptop.

FLEXBOX/GRID

1. FLEXBOX

One-dimensional layout system.
Aligns elements along a single axis (horizontally or vertically)
Allows control over size, order, and alignment of elements within a container.
- display: flex; - Defines a flex container.
- flex-direction - Defines the main axis of the flex container, either row or column.
- justify-content - Aligns items along the main axis.
- align-items - Aligns items along the cross axis.
- flex-wrap - Determines if items should wrap or stay on a single line.
- flex-grow - apecifies how much an item can grow in relation to the other items.

2. GRID

Two-dimensional layout system.
Creates a grid of rows and columns.
Allows placement of elements within the grid.
Provides more control over layout, making it suitable for complex, multi-dimensional layouts that adapt to different screen sizes.
- display: grid; - Defines a grid container.
- grid-template-columns/grid-template-rows - Defines the number and size of columns/rows in the grid.
- grid-column/grid-row - Specifies which columns/rows an element should span.
- grid-gap - Defines the gap between grid cells.
- justify-items - Aligns items along the horizontal axis.
- align-items - Aligns items along the vertical axis.

COMMON HEADER META TAGS

Header meta tags are an important part of a web page's HTML code that provide information about the page's content to search engines, social media platforms, and other web services.
To Specify the character encoding used by the page. UTF-8 is the most widely used character encoding and supports all Unicode characters.

<meta charset="UTF-8">

To Specify the viewport settings for mobile devices, which affects the layout and scaling of the page on different devices.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

To Specify the title of the page, which appears in the browser's title bar and is used by search engines as the title of the search result.

<title>Page Title</title>

To Specify a brief description of the page's content, which appears in search results and is used by search engines to understand the page's content.

<meta name="description" content="Page description">

To Specify a comma-separated list of keywords that describe the page's content, which can help search engines understand the page's topic and improve its ranking.

<meta name="keywords" content="keyword1, keyword2, keyword3">

To Specify whether search engines should index the page and follow its links.

<meta name="robots" content="index, follow">

To Specify the canonical URL of the page, which is the preferred URL that search engines should use to index the page.

<link rel="canonical" href="https://www.example.com/">

CSS LENGTH UNITS

ABSOLUTE UNITS

em: Based on the font size of the parent element.
rem: Based on the font size of the root element.
%: Based on the size of the parent element.
vw/vh: Based on the viewport width and height.

RELATIVE UNITS

px: Based on the physical pixel of the screen.
in/cm/mm: Based on physical measurements.

CONCLUSION

HTML and CSS are fundamental tools for web developers.
HTML provides the structure and content of a web page.
CSS handles the presentation and styling of that content.
HTML and CSS are constantly evolving with new updates being released regularly.
HTML and CSS are integral to modern web development and will continue to be so in the future.
Overall, HTML and CSS are crucial tools for web development that every aspiring web developer should learn.

REFERENCES

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

DEV Community