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: absoluteis 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
@mediarule. - 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.
Top comments (0)