DEV Community

Ankit Dagar
Ankit Dagar

Posted on

HTML/CSS

Box model :

The CSS box model is a fundamental concept in web design and layout that describes how elements are rendered and how their dimensions are calculated. It is used to develop the design and structure of a web page. It can be used as a set of tools to personalize the layout of different components. It consists of several components that determine the overall size and positioning of an element within a web page.

The CSS box model consists of four main parts:

  1. Content: It represents the actual content of the element, such as text, images, or other HTML elements. The size of the content area is determined by the width and height properties.

  2. Padding: It is a transparent area surrounding the content and provides space between the content and the border. Padding can be set using the padding property and can have individual values for each side (top, right, bottom, left) or a shorthand notation.

  3. Border: It is a line that surrounds the padding and content areas. Borders can be customized using properties like border-width, border-style, and border-color.

  4. Margin: It is an invisible area outside the border that separates the element from other elements on the page. Margins can be set using the margin property and can also have individual values for each side or a shorthand notation.

Here's an example :

<!DOCTYPE html>  
<html>  
<head>  
<style>  
.box {  
width: 200px;  
height: 100px;  
padding: 20px;  
border: 1px solid black;  
margin: 10px;  
}  
</style>  
</head>  
<body>  
<div class="box">This is a box</div>  
</body>  
</html>
Enter fullscreen mode Exit fullscreen mode

Understanding the CSS box model is crucial for positioning and layout in CSS, as it determines how elements interact with each other and how much space they occupy on a webpage.

Inline versus block elements :

In HTML, elements are categorized into two main types: inline elements and block elements. These categories determine how elements are displayed and how they interact with other elements on a webpage.

  1. Block Elements:
  2. Block elements are formatted as blocks and create a new line before and after the element.
  3. They take up the full width available by default, unless their width is explicitly set.
  4. Examples of block elements include <div>, <p>, <h1> to <h6>, <ul>, <li>, <table>, <form>, etc.

  5. Block elements can contain both block and inline elements.

  6. Inline Elements:

  7. Inline elements are formatted inline and do not create a new line before or after the element.

  8. They occupy only the space necessary to render their content and do not affect the layout of surrounding elements.

  9. Examples of inline elements include <span>, <a>, <strong>, <em>, <img>, <input>, <br>, etc.

  10. Inline elements cannot contain block-level elements but can contain other inline elements.

Here's an example to illustrate the difference between block and inline elements:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
.block {  
background-color: lightblue;  
}  

.inline {  
background-color: lightgreen;  
}  
</style>  
</head>  
<body>  
<div class="block">This is a block element (div)</div>  
<span class="inline">This is an inline element (span)</span>  
<p class="block">This is another block element (p)</p>  
</body>  
</html>
Enter fullscreen mode Exit fullscreen mode

In the example above, the <div> and <p> elements are block elements, so they appear as separate blocks, each taking up the full width available. The <span> element is an inline element, so it does not create a new line and only occupies the necessary space around its content.

Relative positioning and Absolute positioning :

  1. Relative Positioning: Relative positioning refers to positioning an element relative to its normal position within the document flow. When an element is relatively positioned, it can be moved from its original position using CSS properties like top, right, bottom, and left. The element is then positioned based on its original position, and nearby elements still occupy their original space in the document flow.

For example, consider the following CSS code:

.relative-box {  
position: relative;  
top: 50px;  
left: 20px;  
}
Enter fullscreen mode Exit fullscreen mode

In this example, the element with the class "relative-box" will be moved 50 pixels down from its normal position and 20 pixels to the right.

  1. Absolute Positioning: Absolute positioning refers to positioning an element relative to its nearest positioned ancestor or, if there is none, relative to the document's initial containing block (usually the viewport). When an element is absolutely positioned, it is taken out of the normal document flow, and other elements are positioned as if the absolutely positioned element does not exist.

Absolute positioning is typically achieved by specifying CSS properties like top, right, bottom, and left. These properties define the exact position of the element relative to its nearest positioned ancestor.

For example:

.absolute-box {  
position: absolute;  
top: 100px;  
right: 50px;  
}
Enter fullscreen mode Exit fullscreen mode

In this case, the element with the class "absolute-box" will be positioned 100 pixels down from its nearest positioned ancestor and 50 pixels from the right edge.

Common CSS structural classes :

In CSS, structural classes are classes that are used to target elements based on their position within a structure or hierarchy, rather than their specific attributes or content. These classes are useful for applying styles to specific elements or groups of elements within a structured layout. Here are a few commonly used structural classes:

  1. :first-child: The :first-child pseudo-class selects the first child element of its parent container. It matches an element that is the first child among its siblings.

Ex :

ul li:first-child {  
color: red;  
}
Enter fullscreen mode Exit fullscreen mode

In this example, the first <li> element within a <ul> will have its text color set to red.

  1. :nth-child(): The :nth-child() pseudo-class allows you to select elements based on their position among their siblings using a formula. It takes an argument in the form of an expression, such as n, 2n, 3n+1, etc.

Ex :

ul li:nth-child(odd) {  
background-color: lightgray;  
}
Enter fullscreen mode Exit fullscreen mode

This CSS rule applies a light gray background to all odd-numbered <li> elements within a <ul>.

  1. :last-child: The :last-child pseudo-class selects the last child element of its parent container.

Ex :

ul li:last-child {  
font-weight: bold;  
}
Enter fullscreen mode Exit fullscreen mode

In this example, the last <li> element within a <ul> will have its font-weight set to bold.

  1. :only-child: The :only-child pseudo-class matches elements that are the only child of their parent container.

Ex :

div p:only-child {  
border: 1px solid blue;  
}
Enter fullscreen mode Exit fullscreen mode

Here, any <p> element that is the only child within a <div> will have a blue border.

  1. :nth-last-child(): The :nth-last-child() pseudo-class selects elements based on their position counted from the end of the parent container.

Ex :

ul li:nth-last-child(2) {  
text-decoration: underline;  
}
Enter fullscreen mode Exit fullscreen mode

This rule underlines the second-to-last <li> element within a <ul>.

  1. :first-of-type: The :first-of-type pseudo-class matches the first element of its type among its siblings.

Ex :

h2:first-of-type {  
color: green;  
}
Enter fullscreen mode Exit fullscreen mode

Here, the first <h2> element within its parent container will have its text color set to green.

  1. :nth-of-type(): The :nth-of-type() pseudo-class selects elements based on their position among their siblings of the same type.

Ex:

ul li:nth-of-type(3n+2) {  
background-color: lightblue;  
}
Enter fullscreen mode Exit fullscreen mode

In this example, every third <li> element (starting from the second one) within a <ul> will have a light blue background.

  1. :last-of-type: The :last-of-type pseudo-class selects the last element of its type among its siblings.

Ex :

p:last-of-type {  
font-style: italic;  
}
Enter fullscreen mode Exit fullscreen mode

Here, the last <p> element within its parent container will have its font-style set to italic.

  1. :nth-last-of-type(): The :nth-last-of-type() pseudo-class selects elements based on their position counted from the end among their siblings of the same type.

Ex :

div p:nth-last-of-type(odd) {  
background-color: yellow;  
}
Enter fullscreen mode Exit fullscreen mode

This CSS rule applies a yellow background to all odd-numbered <p> elements within a <div>.

Common CSS styling classes :

In CSS, you can define and apply styling classes to elements using the class selector. Styling classes are reusable sets of CSS rules that can be applied to multiple elements on a webpage. Here's how you define and use styling classes in CSS:

  1. Defining a Class: To define a class, you prefix the class name with a dot (.) and specify the desired CSS rules within curly braces {}.

Ex :

.my-class {  
color: red;  
font-size: 16px;  
}
Enter fullscreen mode Exit fullscreen mode

In this example, we define a class called "my-class" with the color set to red and font size set to 16 pixels.

  1. Applying a Class: To apply a class to an HTML element, you use the class attribute and set it to the name of the class you want to apply.

Ex :

<p class="my-class">This paragraph has the "my-class" styling applied.</p>
Enter fullscreen mode Exit fullscreen mode

In this case, the "my-class" styling class is applied to the <p> element.

  1. Multiple Classes: You can apply multiple classes to an element by separating the class names with spaces within the class attribute.

Ex :

<p class="my-class another-class">This paragraph has both "my-class" and "another-class" styling applied.</p>
Enter fullscreen mode Exit fullscreen mode

Here, both "my-class" and "another-class" styling classes are applied to the <p> element.

  1. Specificity and Cascading: When applying multiple classes or combining them with other CSS selectors, the specificity rules and cascading nature of CSS determine which styles take precedence. The order of the classes or their placement in the CSS file can also affect the final styles applied.

Ex :

<p class="my-class another-class">This paragraph has the combined styles of "my-class" and "another-class".</p>
Enter fullscreen mode Exit fullscreen mode

In this example, if both "my-class" and "another-class" define conflicting styles, the last defined style or the one with higher specificity will take precedence.

Styling classes provide a convenient way to group and reuse CSS styles across multiple elements, allowing for consistent and modular styling throughout your web page.

CSS Specificity :

CSS specificity is a mechanism that determines which styles should be applied to an HTML element when multiple CSS rules target the same element. Specificity helps resolve conflicts when different styles are defined for the same element, allowing you to control the precedence of styles based on their specificity values. Specificity is calculated based on selectors used in CSS rules. Let's dive into the details of CSS specificity:

  1. Specificity Hierarchy: CSS specificity follows a hierarchy of selector types, from the least specific to the most specific:

  • Inline Styles: Styles defined directly on an element using the "style" attribute have the highest specificity.

  • IDs: Selectors targeting elements by their ID attribute have a higher specificity than other selector types. For example, #myId.

  • Classes, Attributes, and Pseudo-Classes: Selectors targeting elements by their class, attribute, or pseudo-class have a medium specificity. For example, .myClass, [type="text"], :hover.

  • Elements and Pseudo-Elements: Selectors targeting elements or pseudo-elements have the lowest specificity. For example, p, ::before.

  1. Calculating Specificity: Specificity is calculated by assigning a weight to each selector type within a CSS rule. The weights are represented by a four-component value called the specificity value. The components, from left to right, represent the weight of inline styles, IDs, classes/attributes/pseudo-classes, and elements/pseudo-elements.

  • The specificity value is calculated by counting the number of occurrences of each selector type and concatenating the counts. For example, a selector with two classes and one element would have a specificity value of 0111.

  • If a higher component has a tie, the next component is considered. For example, a selector with one ID and one class has a higher specificity than a selector with three classes.

  • The specificity value is always a non-negative integer, and the higher the value, the more specific the selector.

  1. Resolving Conflicts: When multiple CSS rules target the same element and have conflicting styles, the rule with the highest specificity value takes precedence. If two or more rules have the same specificity value, the rule defined later in the CSS document or file overrides the earlier one.

  • Inline styles always override external stylesheets and styles defined in the "style" attribute.

  • Rules with higher specificity override rules with lower specificity, regardless of their order.

  1. Specificity Examples: Let's consider a few examples to understand specificity better: 
/* Rule 1 */  
h1 {  
color: red;  
}  

/* Rule 2 */  
.header {  
color: blue;  
}  

/* Rule 3 */  
#myId {  
color: green;  
}  

/* Rule 4 */  
h1#myId {  
color: orange;  
}
Enter fullscreen mode Exit fullscreen mode 
<h1 id="myId" class="header">Hello, CSS!</h1>
Enter fullscreen mode Exit fullscreen mode

In this example, the color of the <h1> element will be orange because Rule 4 has the highest specificity, targeting the element by both its ID and element type. If Rule 4 were not present, Rule 3 would apply due to its higher specificity than Rule 2. Rule 1 has the lowest specificity and would only apply if none of the other rules matched.

CSS Responsive Queries :

CSS responsive queries, also known as media queries, allow you to apply different CSS styles based on the characteristics of the device or viewport size. Media queries are commonly used in responsive web design to create adaptable layouts and optimize the display of content on different devices. Here's how you can use media queries in CSS:

  1. Syntax: Media queries are written using the @media rule followed by a condition enclosed in parentheses. The condition specifies the characteristics of the device or viewport size that you want to target. 
@media (condition) {  
/* CSS rules to apply when the condition is true */  
}
Enter fullscreen mode Exit fullscreen mode
  1. Device Characteristics: Media queries can target various device characteristics, including viewport width, device type, resolution, orientation, etc. Some commonly used conditions include:

(i) - Viewport Width:

@media (max-width: 768px) {
/* CSS rules for screens with a maximum width of 768 pixels */  
}

@media (min-width: 768px) and (max-width: 1024px) {
/* CSS rules for screens with a width between 768 and 1024 pixels */
}
Enter fullscreen mode Exit fullscreen mode

(ii) - Device Type:

@media screen {  
/* CSS rules for screens */  
}  

@media print {  
/* CSS rules for print styles */  
}
Enter fullscreen mode Exit fullscreen mode

(iii) - Resolution:

@media (min-resolution: 300dpi) {  
/* CSS rules for devices with a minimum resolution of 300dpi */  
}  

@media (max-resolution: 72dpi) {  
/* CSS rules for devices with a maximum resolution of 72dpi */  
}
Enter fullscreen mode Exit fullscreen mode

(iv) - Orientation:

@media (orientation: landscape) {  
/* CSS rules for landscape orientation */  
}  

@media (orientation: portrait) {  
/* CSS rules for portrait orientation */  
}
Enter fullscreen mode Exit fullscreen mode
  1. Applying Styles: Inside a media query block, you can include CSS rules that will be applied when the specified condition is true. These rules can override or modify existing styles or introduce new styles specific to the targeted condition. 
@media (max-width: 768px) {  
body {  
font-size: 14px;  
}  

.container {  
width: 100%;  
}  
}
Enter fullscreen mode Exit fullscreen mode

In this example, when the viewport width is 768 pixels or less, the font size of the body element will be 14 pixels, and the width of the elements with the class .container will be set to 100%.

By utilizing media queries, you can create responsive designs that adapt to different screen sizes, orientations, and other device characteristics. This allows you to optimize the user experience across a range of devices and improve the accessibility of your website or application.

Flexbox/Grid :

Flex Layout and Grid Layout are two popular CSS layout systems used to create responsive and flexible web designs. They offer different approaches to organizing and positioning elements on a webpage.

  1. Flex Layout: Flexbox, also known as Flexible Box Layout, is a one-dimensional layout system designed for arranging elements along a single axis (either horizontally or vertically) within a container. It provides an easy way to create flexible and dynamic layouts. Here are some key features of Flex Layout:

  • Container and Items: The flex layout involves a container element (parent) and its child elements (items). The container is defined using the CSS property display: flex, while the child elements become flex items.

  • Main and Cross Axis: Flexbox works with a main axis and a cross axis. By default, the main axis is horizontal (from left to right) and the cross axis is vertical. However, you can change the direction as needed.

  • Flexbox Properties: Flexbox offers several CSS properties to control the behavior of the layout, such as flex-direction, justify-content, align-items, and flex-grow. These properties allow you to control the alignment, distribution, and resizing of flex items.

  • Responsive Design: Flexbox simplifies responsive design by providing features like flex-wrap and media queries that allow items to wrap or change their layout based on available space.

Flex Layout is commonly used for creating navigation menus, flexible content containers, and vertical alignment of elements.

Example :  

HTML:  
<div class="container">  
<div class="item">Item 1</div>  
<div class="item">Item 2</div>  
<div class="item">Item 3</div>  
</div>  

CSS :  
.container {  
display: flex;  
justify-content: space-between;  
}  

.item {  
flex: 1;  
background-color: #e0e0e0;  
padding: 10px;  
margin: 5px;  
}
Enter fullscreen mode Exit fullscreen mode
  1. Grid Layout: CSS Grid Layout is a two-dimensional layout system that allows you to create complex and grid-based layouts. It provides more control over the placement and sizing of elements in both rows and columns. Here are some key features of Grid Layout:

  • Grid Container and Items: Grid Layout uses a grid container (parent) and its child elements (items). The container is defined using the CSS property display: grid, and the child elements become grid items.

  • Rows and Columns: You can define the number and size of rows and columns in the grid using properties like grid-template-rows and grid-template-columns. You can use fixed lengths, percentages, or flexible units to define the size of grid tracks.

  • Grid Areas: Grid Layout allows you to define named grid areas using the grid-template-areas property. This makes it easier to place items in specific areas of the grid.

  • Alignment and Spacing: Grid Layout provides properties like justify-items, align-items, justify-content, and align-content to control the alignment and spacing of items within the grid.

  • Responsive Design: Grid Layout works well for responsive design by using media queries to change the grid structure or redefine grid-template-areas based on different viewport sizes.

Grid Layout is commonly used for creating complex page layouts, such as magazine-style designs, image galleries, and dashboard layouts.

Example :  

HTML :  
<div class="container">  
<div class="item">Item 1</div>  
<div class="item">Item 2</div>  
<div class="item">Item 3</div>  
<div class="item">Item 4</div>  
</div>  

CSS :  
.container {  
display: grid;  
grid-template-columns: 1fr 1fr;  
grid-gap: 10px;  
}  

.item {  
background-color: #e0e0e0;  
padding: 10px;  
}
Enter fullscreen mode Exit fullscreen mode

Common html meta tags :

The HTML <meta> tag is used to provide metadata about an HTML document. It is placed within the <head> section of an HTML page. Here's an explanation of the commonly used attributes of the <meta> tag:

  1. charset: Specifies the character encoding for the HTML document. It helps browsers interpret and display the text correctly.

Example:

<meta charset="UTF-8">
Enter fullscreen mode Exit fullscreen mode
  1. name and content: These attributes work together to define various types of metadata. The name attribute specifies the type of metadata, while the content attribute provides the actual value.

Examples:

<meta name="description" content="This is a description of the page.">  
<meta name="keywords" content="HTML, meta tags, example">  
<meta name="author" content="John Doe">
Enter fullscreen mode Exit fullscreen mode
  1. http-equiv: Used to simulate an HTTP response header field within an HTML document. It can be used to set the behavior of the browser or define the document's caching policies.

Example:

<meta http-equiv="refresh" content="5; URL=[https://example.com](https://example.com/)">
Enter fullscreen mode Exit fullscreen mode
  1. viewport: Primarily used for responsive web design, it specifies the viewport's width and initial scale for mobile devices.

Example:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Enter fullscreen mode Exit fullscreen mode

Here's an example of a complete <head> section of an HTML page with multiple <meta> tags:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<meta name="description" content="This is a description of the page.">  
<meta name="keywords" content="HTML, meta tags, example">  
<meta name="author" content="John Doe">  
<meta http-equiv="refresh" content="5; URL=[https://example.com](https://example.com/)">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Example Page</title>  
</head>  
<body>  
<!-- Page content goes here -->  
</body>  
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

rafaeljcamara profile image

Introducing nebula-http-resiliency

Rafael Câmara -

shescloud_ profile image

Conceitos de Computação: IAAS, SAAS, PAAS. Ques bichos são esses?

Paloma Lataliza -

shescloud_ profile image

IAC e Terraform. O que é e porque são tão importantes? Ep.1

Paloma Lataliza -

shescloud_ profile image

IAC e Terraform. O que é e porque são tão importantes? Ep.2

Paloma Lataliza -