DEV Community

Anirban Das
Anirban Das

Posted on

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode
  • :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;
}
Enter fullscreen mode Exit fullscreen mode
  • :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;
}
Enter fullscreen mode Exit fullscreen mode
  • :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;
}
Enter fullscreen mode Exit fullscreen mode
  • :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;
}
Enter fullscreen mode Exit fullscreen mode
  • :first-of-type: They represent the first element of the one type of siblings. 
.card li:first-of-type {
  color: gray;
}
Enter fullscreen mode Exit fullscreen mode
  • :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;
}
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode
  • 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">
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
  • 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">
Enter fullscreen mode Exit fullscreen mode
  • 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">
Enter fullscreen mode Exit fullscreen mode
  • To Specify whether search engines should index the page and follow its links. 
<meta name="robots" content="index, follow">
Enter fullscreen mode Exit fullscreen mode
  • 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/">
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

Read next

ridoy_hasan profile image

Responsive Design with Tailwind CSS

Ridoy Hasan -

hoainhoblogdev profile image

CSS 2024 Breakthrough: Redefining Animations with animation-timeline: view()

Hoài Nhớ ( Nick ) -

aepasahan profile image

What Are Design Tokens and Why Should We Use Them?

Ahmet Erkan Paşahan -

tailwine profile image

CSS Flexbox: Creating a Landing Page Layout

Tailwine -