HTML AND CSS CONCEPTS

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

• Box Model
• Inline vs Block element
• Positioning: Relative/Absolute
• Common CSS structural classes
• Common CSS syling classes
• CSS Specificity
• CSS Responsive Queries
• Flexbox/Grid
• Common header meta tags
• CSS length units