HTML-CSS CONCEPTS

BOX MODEL

The CSS box model surrounds every HTML element with a rectangular box.
It consists of four parts: content, padding, border, and margin.
- Content: The actual text or image within the element.
- Padding: The space between the content and the border.
- Border: Line that surrounds the padding.
- Margin: The space between the border and adjacent HTML elements.
Properties of a CSS box include width, height, padding, border, and margin.
- Width and height set the size of the content box.
- Padding can be set for each side of the element using padding-top, padding-right, etc.
- Border can be set using border-width, border-style, and border-color properties.
- Margin can be set using margin-top, margin-right, etc.
The CSS box model can be implemented using a combination of these properties.
CSS Box model is essential for creating visually appealing designs on web pages.

.box {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
}

INLINE VS BLOCK ELEMENTS

1. BLOCK ELEMENTS

Block elements take up the entire width of their container and stack vertically.
Examples of block elements include <div>, <p>, <h1>, <form>, <ul>, <ol>, and <li>.
Block elements can have margins, padding, and borders applied to them.
Block elements can be positioned using CSS.

2. INLINE ELEMENTS

Inline elements do not start a new line by default and only take up as much width as necessary.
Examples of inline elements include <span>, <a>, <strong>, <em>, <img>, and <input>.
Inline elements cannot have margins or padding applied to them but can have borders.
Inline elements can be positioned using CSS, but their position is relative to the text around them.

POSITIONING: RELATIVE/ABSOLUTE

1. RELATIVE POSITIONING

Positioned relative to its normal position in the document flow.
Takes up space in the normal document flow.
Can be moved using top, bottom, left, and right properties.
New position is relative to its original position.

2. ABSOLUTE POSITIONING

Positioned relative to nearest positioned ancestor or initial containing block.
Taken out of the normal document flow and does not take up space.
Can be moved using top, bottom, left, and right properties.
New position is relative to nearest positioned ancestor.

COMMON CSS STRUCTURAL CLASSES

.container: Creates a wrapper for the content on a web page with a fixed width to center the content and provide padding.
.row: Creates a row of columns within a container.
.col: Creates a column within a row, with a specified width or auto width.
.clearfix: Clears floated elements within a container.
.hidden: Hides an element from view by setting its display property to "none".
.visible: Shows a hidden element by overriding its display property to "block" or "inline".
.padding, .padding-top, .padding-right, .padding-bottom, .padding-left: Applies padding to an element, with different values to create space around the content.
.margin, .margin-top, .margin-right, .margin-bottom, .margin-left: Applies margin to an element, with different values to create space between the elements.
.float-left, .float-right, .float-none: Floats an element to the left, right, or none, respectively.
.text-truncate: Truncates long text within an element with ellipsis.

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 CSS selector is in targeting an HTML element.
Four values are used to calculate specificity:
- 0 points for universal selector(*) and combinators(+, >, ~),
- 1 point for element selectors(e.g. h1, div, input), pseudo-elements(:after, :before), and class selectors(.example),
- 10 points for ID selectors(#example), and
- 1000 points for inline styles.
When multiple styles are applied to an element, the style with the highest specificity value takes precedence.
If two selectors have the same specificity value, the one defined last in the CSS document takes precedence.

CSS RESPONSIVE QUERIES

CSS responsive queries are also called media queries.
They allow you to apply CSS styles based on the characteristics of the device or browser being used to view your website.
They are written using the @media rule.
We can use queries to target specific device sizes, such as smartphones or tablets, using min-width and max-width.
- @media screen and (max-width: 767px): Commonly used for smartphones.
- @media screen and (min-width: 768px) and (max-width: 1023px): Commonly used for tablets.
- @media screen and (min-width: 1024px): Commonly used for PCs.

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

<title>: Defines the title of the HTML document.
<meta charset="utf-8">: Specifies the character encoding used in the HTML document.
<meta name="viewport" content="width=device-width, initial-scale=1.0>: Sets the viewport width to the width of the device and sets the initial zoom level to 1.0.
<meta name="description" content="description of your webpage">: Provides a brief description of the HTML document.
<meta name="keywords" content="comma-separated list of keywords">: Specifies a comma-separated list of relevant keywords.
<link rel="stylesheet" href="stylesheet.css">: Links an external stylesheet to apply styles to HTML elements.

Blog

Shubham Kumar Gupta

BOX MODEL

INLINE VS BLOCK ELEMENTS

1. BLOCK ELEMENTS

2. INLINE ELEMENTS

POSITIONING: RELATIVE/ABSOLUTE

1. RELATIVE POSITIONING

2. ABSOLUTE POSITIONING

COMMON CSS STRUCTURAL CLASSES

COMMON CSS STYLING CLASSES

1. COLORS

2. SPACING

3. OTHERS

CSS SPECIFICITY

CSS RESPONSIVE QUERIES

FLEXBOX/GRID

1. FLEXBOX

2. GRID

COMMON HEADER META TAGS

CSS UNITS

ABSOLUTE UNITS

RELATIVE UNITS

REFERENCES

Join Our Newsletter. No Spam, Only the good stuff.

Related