Box Model
In web development, the CSS box model is a rectangular structure that encloses each HTML element and includes the content itself, as well as padding, borders, and margins. The below diagram shows these layers:
content: encompasses text and images within the box.
padding: surrounds the content and is transparent
border: outlines the padding and content.
margin: lies outside the border and is transparent.
If we assume that a box has the following CSS:
The actual space taken up by the box will be 410px wide (350 + 25 + 25 + 5 + 5) and 210px high (150 + 25 + 25 + 5 + 5).
.box {
width: 350px;
height: 150px;
margin: 10px;
padding: 25px;
border: 5px solid black;
}
Inline vs Block Elements.
Block-level elements are automatically positioned on a new line by browsers and have a margin added before and after the element. They occupy the full available width, extending both to the left and right as far as possible. Examples of popular block-level elements include <p>, <form> , <div>, etc.
An inline element is positioned without starting a new line. An inline element occupies only the required width. Examples of popular inline elements include <span>, <a>, <img>, etc.
Positioning: Relative/Absolute
Relative Positioning:
- When an element is positioned relatively, it remains in the normal flow of the page, but its position can be adjusted relative to its default position.
- The element's position is set using the same top, bottom, left, and right properties as absolute positioning, but the values are relative to the element's original position.
Absolute positioning:
- When an element is positioned absolutely, it is removed from the normal flow of the page and positioned relative to its nearest positioned ancestor. If there is no positioned ancestor, it will be positioned relative to the initial containing block.
- The element's position is set using the top, bottom, left, and right properties.
Common CSS structural classes
:first-child - Selects first child element under the parent element when first child element is a specified element.
:last-child - Selects last child element under the parent element when last child element is a specified element.
:first-of-type - Selects first child element of its type under the parent element.
:last-of-type - Selects last child element of its type under the parent element.
:only-child - Selects a specified element if it is the only child element under the parent element.
:nth-of-type(n) - Selects one or more child elements based on its type under the parent element.
:nth-last-of-type(n) - Selects one or more child elements based on its type under the parent element.
:not - This takes simple selector as an argument and selects elements that are not represented by the argument.
:empty - Selects empty elements.
:root - Selects root element.
Common CSS styling classes
Container: It is usually defined using the class attribute in HTML and styled in CSS.
Row: A row class is used to define a horizontal row of elements within a container.
Column: A column class is used to define a vertical column of elements within a row.
Header: A header class is used to define the top section of a web page, which typically includes the site logo, navigation menu, and other important information.
Footer: A footer class is used to define the bottom section of a web page, which typically includes copyright information, contact details, and links to social media accounts.
Sidebar: It is often used to display additional navigation links or other secondary content.
Navigation: A navigation class is used to define a menu of links that allows users to navigate through different sections of the website.
Content: A content class is used to define the main section of a web page, which typically includes the main text, images, and other media.
CSS Specificiy
Specificity determines, which CSS rule is applied by the browsers.
Every selector has its place in the specificity hierarchy. If two selectors apply to the same element, the one with higher specificity wins.
The embedded style sheet has a greater specificity than other rules.
ID selectors have a higher specificity than attribute selectors.
A class selector beats any number of element selectors.
Universal selectors applied at last.
CSS Responsive Queries
CSS responsive queries are also known as media queries. They allow you to apply different styles to a webpage based on the screen size, orientation, and other characteristics of the device on which it is being viewed.
- Basic media query to target smaller screens:
@media (max-width: 768px) {
/* This query targets screens with a maximum width of 768 pixels, and applies styles only when the screen is narrower than that. */
}
- Media query to target larger screens:
@media (min-width: 992px) {
/* This query targets screens with a minimum width of 992 pixels, and applies styles only when the screen is wider than that. */
}
Flexbox
Flexbox is a layout mode in CSS that allows you to create flexible and responsive layouts with a single container element and its child elements.
Flexbox has two main axis: the main axis and the cross axis. By default, the main axis is horizontal and the cross axis is vertical.
To use flexbox, we need to set the display property of the container element to flex. For example:
.container {
display: flex;
}
- To Center the child elements along the main axis.
.container {
display: flex;
justify-content: center;
}
- To center the child elements along the cross axis.
.container {
display: flex;
align-items: center;
}
- To switch the main axis to vertical.
.container {
display: flex;
flex-direction: column;
}
- To allow the child elements to wrap to the next line.
.container {
display: flex;
flex-wrap: wrap;
}
Grid
CSS grid is a two-dimensional layout system that allows you to create complex layouts for websites.
To create a grid, we need to define a container element and set it to display: grid.
The grid container can be divided into rows and columns using the grid-template-rows and grid-template-columns properties.
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
grid-gap: 10px;
}
.grid-item {
background-color: #ccc;
padding: 20px;
}
In this example, we have a grid container with six grid items. We've set the grid-template-columns property to repeat three columns, each with a width of 1fr, and the grid-template-rows property to repeat two rows, each with a height of 100px. We've also added a grid gap of 10px between rows and columns. The result is a 3x2 grid with six equally sized cells.
Common header meta tags
- Description tag - This tag provides a brief description of the web page.
<head>
<meta name="description" content="This is an example description of the web page.">
</head>
- Keywords tag - This tag lists keywords that are relevant to the content on the web page.
<head>
<meta name="keywords" content="example, keywords, web page">
</head>
- Author tag - This tag specifies the name of the author of the web page.
<head>
<meta name="author" content="John Doe">
</head>
- Robots tag - This tag specifies whether or not search engine robots should index or follow the web page.
<head>
<meta name="robots" content="index, follow">
</head>
- Viewport tag - This tag specifies the viewport settings for the web page.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
- Charset tag - This tag specifies the character set used in the web page.
<head>
<meta charset="UTF-8">
</head>
Top comments (0)