Box Model
The CSS box type is like a container that has the following properties:
Content
- This section includes the primary content, such as text, images, and other media. The height and width characteristics can be changed.
Padding
- The padding area is the space between the content region and the border box. It can be applied to all sides or particular sides such as the top, right, bottom, and left.
Border
- The border area surrounds the padding and content and can be applied to all sides or particular sides such as the top, right, bottom, and left.
Margin
- The margin region is the space between the border and the outside edge of the box.
<style>
div {
width: 300px;
height: 200px;
border: 2 pixels of solid black;
padding: 10px;
margin: 20px;
}
</style>
<html>
<body>
<div>
some content
</div>
</body>
</html>
In the preceding example, the innermost layer of the div element that includes the real content has a width of 300px, and the padding property surrounds the content layer and provides 10px space between the content and the border.
The border property surrounds the padding layer and provides a visible border of 2 px, and the margin property is the outermost layer that surrounds the complete element.
Inline VS Block
Block - HTML Block Level elements commence on a new line and occupy the entire width of their parent element. They have the ability to utilize width, height, and text-align properties as they fill the entire width of their container.
Inline - HTML inline elements consistently begin on the same line and their width is determined by their content. Most inline elements are presentational.
| Block | Inline |
|---|---|
| A block level element can have both inline and block elements as children or descendants | inline level elements can have only inline elements as children or descendant. |
| CSS property: display:block | CSS property: display:inline |
Postioning Absolute/Relative
Aboslute - When an element is assigned a position value of "absolute", its position is determined in relation to the closest ancestor element that has a specified position (as opposed to being positioned relative to the viewport, which is the case for "fixed" elements).
In the absence of any such ancestor, an absolutely positioned element is placed in relation to the document body and will scroll along with the page.
It's important to note that elements with absolute positioning are taken out of the normal flow of the page and may overlap with other elements.
Relative - When an element is assigned a position value of "relative", it will be positioned based on its default position. If the top, right, bottom, or left properties are specified, the element's position will be adjusted accordingly, but the surrounding content will not be affected to fill the space created by the element's displacement.
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
CSS Structural Classes
They allow you to target specific elements like the first child, last child, or alternate elements based on their position in the hierarchy. Here are some common examples:
- :first-child - targets the element that appears first among its siblings.
- :nth-child(n) - targets elements at a certain position, based on an expression.
- :last-child- targets the element that appears last among its siblings.
- :nth-last-child(n) - like :nth-child, but starts counting from the end.
- :only-child - targets elements that are the only child of their parent element.
- :first-of-type - targets the first element of a specific type of sibling.
- :nth-of-type(n) - targets elements of a specific type at a position determined by an expression.
- :last-of-type - targets the last element of a specific type of sibling. :nth-last-of-type(n) - like :nth-of-type, but starts counting from the end.
CSS Specifity
It is a method used to determine which CSS rule applies to an HTML element when there are multiple rules targeting the same element. Specificity is calculated based on the type of selector used in the rule, and the number of instances of each selector in the rule.
Four types of selectors in CSS:
- type selectors,
- class selectors,
- ID selectors,
- attribute selectors.
The selectors are ranked in order of increasing specificity, with type selectors having the lowest specificity and ID selectors having the highest.
!important keyword can be applied to override specificity and force a rule to apply to an element, it is better to avoid this keyword.
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.
The media query includes a media type, such as screen, print, or speech, and one or more expressions that define the conditions under which the styles should be applied. For example, you can use a media query to apply styles only to devices with a maximum width of 768 pixels, or to print styles that are optimized for printing on paper.
@media (max-width: 768px) {
body {
background-color: blue;
}
}
Flex and Grid
CSS Grid and Flexbox are two different properties that web developers can use to create complex and responsive web layouts.
CSS Grid is a layout module that works by creating a grid of rows and columns on a webpage. Once you've created your grid, you can place content within it by specifying which grid lines and areas should be used. This makes CSS Grid really useful for creating layouts that need to be highly controlled and complex, like those you might see in a magazine or on a dashboard.
Flexbox, on the other hand, is a layout module that works by creating containers that can be used to organize items on a webpage. we can use Flexbox to tell these containers how the items within them should be organized, like by specifying whether they should be laid out in a row or a column. This makes Flexbox really useful for creating layouts that need to be more flexible and responsive to different screen sizes, like a navigation menu or a gallery of images.
Meta Tags
The meta tag provides information about a web page, such as its description, keywords, author, and character encoding.
This information can be used by web browsers to display information about the page and can aid in search engine optimization.
The name attribute specifies the type of metadata provided, while the content attribute contains the actual metadata content.
The charset attribute specifies the web page's character encoding.
Top comments (0)