- Introducction to frontend development
- HTML layout
- CSS layout
- Responsive Design
- CSS architecture
-
- Anatomy of a CSS Declaration: Selectors, Properties and Values
- Selectors Types: Basics and Combiners
- Selectors Types: Pseudoclasses and Pseudoelements
- Cascading and Specificity in CSS
- Most used Display Types: Block, Inline and Inline-block
- Most used Display Types: Flexbox and CSS grid
- Box Model
Box-SizingProperty- Image Collapse
- CSS Positioning
- Z-index and the Stacking Context
- Most used CSS Properties and Values
Websites are built using tree essential technologies: HTML, CSS and JavaScript. These tree languages form the foundations of the web.
HTML stands for HyperText Markup Language. It is the code used to build a website structure. In other words, it provides the skeleton where all elements are defined, such as: links, paragraphs, headings, buttons, images, forms, etc.
CSS stands for Cascade Style Sheets. It is the code that describes the presentation of a webpage elements, including layout, colors, fonts and spacing.
Rendering engines are programs that translates our code into a format that browsers can understand. This way, the brower knows what to display on the screen for the user.
Browsers have their own rendering engines: Chrome uses Blink, Edge uses Edge HTML, Safari uses Webkit y Firefox uses Gecko. Each engine compiles code in a slighly different way, but the result is the same: converting files into pixels.
The browser engine performs five steps to compile our code and render it on the screen. These steps are:
- Transforming the files into an object tree, either HTML or CSS. These are known as the DOM (Document Object Model) and CSSOM (Cascading Style Sheets Object Model), respectively. Each node in the tree represents an element in the HTML or CSS file.
- Calculating the style for each node in the DOM based on the CSSOM.
- Determining the dimensions of each node and where it should be placed on the screen.
- Painting or rendering the various elements as boxes or containers.
- Compositing all the boxes into different layers to create the final image that is rendered on the screen.
Before we start writing HTML code, we should understand the structure of a document and its elements
Elements are the individual parts that make up an HTML file. Their structure contains:
- Tags: There are an HTML element. Tags are divided into opening tags, represented by
<tag>, and closing tags, represented by</tag> - Content: This is the text or other elements enclosed by the tag. This value is optional in some cases.
HTML attributes are propeties within the opening tags that control the behavior of the element. Their value is enclosed in quotation marks.
Empty elements are those that are represented only by an opnening tag. For example, the image tag: <img ...>.
HTML element nesting involves wrapping several tags within other tags.
Think of each HTML element as a box where you can place other elements or additional boxes. These boxes will vary in size and can be positioned next to one another.
Tags that wrap other tags are called "parent" elements. For example, <section> is the parent of <h1>, <p>, and <ul>, while <ul> is the parent of three <li> tags.
Tags that are contained within other tags are called "child" elements. For example, <h1>, <p>, and <ul> are children of <section>, while <li> tags are children of <ul>.
The basic structure of an HTML document consists of the following key tags:
-
Doctype tag: The
<!DOCTYPE html>tag specifies that the file is handled with HTML5. -
html tag: The
<html>tag defines the root element of an HTML document. All other elements must be contained within this root element. The language of the web page is specified using the lang attribute in this tag. -
head tag: The
<head>tag defines meta-information, which is not actual content on the web page. This includes links to CSS and JavaScript files, the title, and the favicon that appears in the browser tab. This is crucial for search engines like Google. -
body tag: The
<body>tag defines the content of the web page. It must be a direct child of<html>and the parent of all HTML tags except those used for meta-information.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Desafío HTML</title>
</head>
<body>
<h1>Anatomía de un documento HTML y sus elementos</h1>
<p>Soy un párrafo</p>
<ul>
<li>Soy un elemento</li>
<li>Soy otro elemento</li>
<li>Mi padre es "ul"</li>
</ul>
</body>
</html>
HTML comments are used to annotate something that will be ignored during rendering. To add an HTML comment, it is wrapped between <!-- and -->, regardless of the number of lines.
Semantic HTML means that each element has its own tag that accurately defines its purpose, avoiding the use of overly general tags like <div> or <span>.
The div tag defines a generic block of content that lacks semantic value. It's used for design elements like containers.
Semantic tags to define a web page's interface include:
<header>: Defines the page's header (not to be confused with<head>).<nav>: Defines a navigation bar with links.<section>: Defines a section of the page.<footer>: Defines a footer for a page or section.<article>: Defines an article, which can have its own header, navigation, section, or footer.
Now that you know about semantic tags, try to avoid overusing <div>.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Desafío HTML</title>
</head>
<body>
<header>
Soy el encabezado
</header>
<nav>
<ul>
<li>Soy un enlace</li>
<li>Soy un enlace</li>
<li>Soy un enlace</li>
</ul>
</nav>
<article>
Soy un artículo
</article>
<section>
Soy una sección
</section>
<footer>Soy el pie de página</footer>
</body>
</html>
The benefits of using semantic HTML include:
- Helps make your site more accessible
- Improves your SEO (Search Engine Optimization)
- Leads to clearer, more readable, and maintainable code
- Helps search engines (like Google) find your page
- Go deep into the advantages here
Check the links below to see more information about the most used HTML tags:
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav>
<ul>
<li>about us</li>
<li>contact us</li>
</ul>
</nav>
<section>
<div>
<img src="https://images.pexels.com/photos/1741205/pexels-photo-1741205.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt="cat">
</div>
<div>
<h1>Cats</h1>
<p>Cats are awesome</p>
</div>
</section>
<form action="">
<label for="name">Name</label>
<input type="text" id="name">
</form>
<a href="https://platzi.com/home">Go to Platzi</a>
</body>
</html>
Before we start writing CSS code, we need to understand the anatomy of a style declaration.
A CSS declaration is a block that specifies the set of styles to be added to an HTML element. Its structure includes the following:
- Selector: Defines the element or set of elements to which styles will be applied.
- Property: The name of the CSS style.
- Value: The value that the property will take on.
Example:
CSS comments are used to indicate something that should be ignored. To create a CSS comment, wrap it between /* and */, regardless of the number of lines.
Before starting with CSS, let's use some initial CSS properties:
- color: Sets the text color of an element.
- background-color: Sets the background color for an element.
- font-size: Sets the font size.
- width: Sets the width of an element.
- height: Sets the height of an element.
These are the initial units of measurement you should know to set the sizes of elements or typography:
- px: Represents a length in pixels.
- %: Represents a percentage relative to a base measurement.
Selectors in CSS define the HTML element or set of elements to which styles will be applied. CSS has built-in color names that you can explore. Let's dive deeper into selectors.
A basic selector is the minimal CSS expression to apply styles.
selector {
/* Styles */
}
Selects all elements that match the HTML tag name.
div {
/* All divs in the document */
}
Type Selector Challenge:
Try setting a background color for 10 <div> tags with a single selector using the background-color property.
HTML file:
<div>Soy el div 1</div>
<div>Soy el div 2</div>
<div>Soy el div 3</div>
<div>Soy el div 4</div>
<div>Soy el div 5</div>
<div>Soy el div 6</div>
<div>Soy el div 7</div>
<div>Soy el div 8</div>
<div>Soy el div 9</div>
<div>Soy el div 10</div>
CSS file:
div{
background-color: aqua;
}
/* Ignora esto, por ahora */
* {
font-size: 1.5rem;
margin-bottom: 10px;
}
Check the demo here
Selects all elements that match the HTML tags with a specific class attribute.
<!-- HTML File -->
<div class="card">I'm a card</div>
To select these elements, use a dot . followed by the exact class attribute value. This can be any value you want.
/* CSS File */
.card {
/* All tags with the class "card" */
}
Multiple class values can exist within a single class attribute, separated by spaces.
<!-- HTML File -->
<div class="card card1">I'm a card</div>
<div class="card card2">I'm a card</div>
/* CSS File */
.card {
/* All tags with the class "card" */
}
.card1 {
/* All tags with the class "card1" */
}
.card2 {
/* All tags with the class "card2" */
}
Class Selector Challenge:
From a set of <div> tags, try setting a background color to the ones containing the class "card" with a single selector. Then, try setting a different text color for tags containing "card1" and "card2".
HTMl File:
<div>Soy el div 1</div>
<div>Soy el div 2</div>
<div class="card card1">Soy card-1</div>
<div>Soy el div 3</div>
<div>Soy el div 4</div>
<div class="card">Soy solo card</div>
<div>Soy el div 5</div>
<div>Soy el div 6</div>
<div>Soy el div 7</div>
<div class="card card2">Soy card-2</div>
<div>Soy el div 8</div>
<div>Soy el div 9</div>
<div>Soy el div 10</div>
CSS File:
/*Agrega los selectores aquí */
.card {
background-color: aqua;
}
.card1{
color: red;
}
.card2{
color: blue;
}
/*Agrega los selectores aquí */
/* Ignora esto, por ahora */
* {
font-size: 1.5rem;
margin-bottom: 10px;
}
Check the demo here
Selects the unique element that matches the HTML tag with a specific ID attribute. There should only be one ID value for the entire document.
<!-- HTML File -->
<button id="delete">Delete</button>
To select this element, use a hashtag # followed by the exact ID attribute value.
/* CSS File */
#delete {
/* The only tag with the ID "delete" */
}
ID Selector Challenge:
From a set of <button> tags, find the single button for deletion. Try setting a red background color for this element.
HTML File:
<button>Soy el button 1</button>
<button>Soy el button 2</button>
<button>Soy el button 3</button>
<button>Soy el button 4</button>
<button>Soy el button 5</button>
<button>Soy el button 6</button>
<button>Soy el button 7</button>
<button>Soy el button 8</button>
<button>Soy el button 9</button>
<button id="eliminar">¡Elimínalo!!!!!!!!</button>
CSS File:
/*Agrega los selectores aquí */
#eliminar{
background-color: red;
}
/*Agrega los selectores aquí */
/* Ignora esto, por ahora */
* {
font-size: 1.2rem;
padding: 5px;
margin-bottom: 10px;
}
Check the demo here
Selects elements that match the HTML tag with a specific attribute and value.
<!-- HTML File -->
<a href="https://example.com">Visit Example</a>
To select these elements, use the tag name followed by square brackets [] containing the specified attribute and value.
CSS File:
a[href="https://example.com"] {
/* All <a> tags with an href attribute value of "https://example.com" */
}
Attribute Selector Challenge:
Try setting a background color to all <a> tags that contain the href attribute with the value "https://example.com".
HTML File:
<a href="https://platzi.com">Ir a platzi</a>
<a href="#">Soy un enlace 1</a>
<a href="#">Soy un enlace 2</a>
<a href="#">Soy un enlace 3</a>
<a href="https://platzi.com">Ir a platzi</a>
<a href="#">Soy un enlace 5</a>
<a href="#">Soy un enlace 6</a>
<a href="#">Soy un enlace 7</a>
<a href="https://platzi.com">Ir a platzi</a>
<a href="#">Soy un enlace 8</a>
<a href="#">Soy un enlace 9</a>
CSS File:
/*Agrega los selectores aquí */
a[href="https://platzi.com"]{
background-color: greenyellow;
}
/*Agrega los selectores aquí */
/* Ignora esto, por ahora */
* {
font-size: 1.2rem;
padding: 5px;
margin-bottom: 10px;
}
a {
display: block;
}
Check the demo here
Selects all elements in the document using an asterisk *.
* {
/* All elements */
}
Universal Selector Challenge:
Try setting a background color to all elements in the document.
HTML File:
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div></div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div></div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div></div>
CSS File:
/*Agrega los selectores aquí */
* {
background-color: papayawhip;
}
/*Agrega los selectores aquí */
Check the demo here
A combinator selector is the combination of two or more basic selectors.
selector1 selector2 selector3 {
/* Styles */
}
Selects all elements on the right that are descendants of the selector on the left, regardless of depth. These selectors are separated by a space.
parent children {
/* All descendants of the parent */
}
div p {
/* All <p> descendants of <div> */
}
.container img {
/* All <img> descendants of the class "container" */
}
Descendant Combinator Challenge:
Try setting a text color to all <li> tags that are children of the class "container".
HTML File:
<nav>
<ul>
<li>Home</li>
<li>Más opciones</li>
</ul>
</nav>
<div class="container">
<ul>
<li>Lista 1</li>
<li>Lista 2</li>
<li>Lista 3</li>
<li>Lista 4</li>
<li>Lista 5</li>
<li>Lista 6</li>
<li>Lista 7</li>
<li>Lista 8</li>
<li>Lista 9</li>
<li>Lista 10</li>
</ul>
</div>
<footer>
<ul>
<li>Conoce la empresa</li>
<li>Más actividades</li>
<li>Acerca de nosotros</li>
</ul>
</footer>
CSS File:
* {
font-size: 1.2rem;
}
/*Agrega los selectores aquí */
.container li{
color: red;
}
/*Agrega los selectores aquí */
Check the demo here
Selects all elements on the right that are direct children of the selector on the left. These selectors are separated by >.
parent > direct_children {
/* All direct children of the parent */
}
div > p {
/* All direct children <p> of <div> */
}
.container > img {
/* All direct children <img> of the class "container" */
}
Child Combinator Challenge:
Try setting a text color to all <p> tags that are direct children of the class "container".
HTML File:
<div class="container">
<p>Soy un hijo directo</p>
<p>Soy un hijo directo</p>
<p>Soy un hijo directo</p>
<p>Soy un hijo directo</p>
<p>Soy un hijo directo</p>
<p>Soy un hijo directo</p>
<p>Soy un hijo directo</p>
<p>Soy un hijo directo</p>
<p>Soy un hijo directo</p>
<p>Soy un hijo directo</p>
<div>
<p>Soy un hijo indirecto o ñeto</p>
<p>Soy un hijo indirecto o ñeto</p>
<p>Soy un hijo indirecto o ñeto</p>
<p>Soy un hijo indirecto o ñeto</p>
<p>Soy un hijo indirecto o ñeto</p>
</div>
</div>
CSS File:
* {
font-size: 1.2rem;
}
/*Agrega los selectores aquí */
.container > p {
color: red;
}
/*Agrega los selectores aquí */
Check the demo here
Selects all elements on the right that are adjacent to the selector on the left. These selectors are separated by +.
element + adjacent {
/* Adjacent elements */
}
div + p {
/* All <p> adjacent to <div> */
}
.container + img {
/* All <img> adjacent to the class "container" */
}
Adjacent means they share the same parent and are placed immediately after another element. For example, in the following code, <div> is adjacent to <h1>, and <p> is adjacent to <div>. However, <h1> is not adjacent to <div>, and <div> is not adjacent to <p>.
<!-- HTML File -->
<h1>I'm a header</h1>
<div>I'm a div</div>
<p>I'm a paragraph</p>
Adjacent Sibling Combinator Challenge:
Try setting a text color to all <p> tags that are adjacent to <div> tags.
HTML File:
<p>Soy otro párrafo</p>
<div>Soy un div</div>
<p>Soy un párrafo adyacente a div</p>
<p>Soy otro párrafo</p>
<p>Soy otro párrafo</p>
<hr/>
<p>Soy otro párrafo</p>
<div>Soy un div</div>
<p>Soy un párrafo adyacente a div</p>
<p>Soy otro párrafo</p>
<p>Soy otro párrafo</p>
<hr/>
<p>Soy otro párrafo</p>
<div>Soy un div</div>
<p>Soy un párrafo adyacente a div</p>
<p>Soy otro párrafo</p>
<p>Soy otro párrafo</p>
<hr/>
<p>Soy otro párrafo</p>
<div>Soy un div</div>
<p>Soy un párrafo adyacente a div</p>
<p>Soy otro párrafo</p>
<p>Soy otro párrafo</p>
<hr/>
CSS File:
/*Agrega los selectores aquí */
div + p {
color: red;
}
/*Agrega los selectores aquí */
Check the demo here
Selects all elements on the right that are siblings of the selector on the left. These selectors are separated by ~.
element ~ siblings {
/* Sibling elements */
}
div ~ p {
/* All <p> siblings of <div> */
}
.container ~ img {
/* All <img> siblings of the class "container" */
}
Siblings share the same parent and are placed after one another. For example, in the following code, <div> and <p> are siblings of <h1>, but <h1> is not a sibling of <div>, and <div> is not a sibling of <p>.
<!-- HTML File -->
<h1>I'm a header</h1>
<div>I'm a div</div>
<p>I'm a paragraph</p>
General Sibling Combinator Challenge:
Try to set a text color for all <p> tags that are siblings of <div>.
HTML File:
<div class="container">
<p>Soy otro párrafo</p>
<div>Soy un div</div>
<p>Soy un párrafo hermano de div</p>
<p>Soy un párrafo hermano de div</p>
<p>Soy un párrafo hermano de div</p>
</div>
<hr/>
CSS File:
/*Agrega los selectores aquí */
div ~ p {
color: red;
}
/*Agrega los selectores aquí */
Check the demo here
Check the practice file 1 Check the practice file 2
There are other types of selectors, besides basic and combinator selectors, capable of changing a state or adding something extra to the element. These are called pseudo-classes and pseudo-elements.
A pseudo-class defines the style for a special state of an element.
Index of Standard Pseudo-classes: here
Learn more about pseudo-classes here
selector : pseudo-class {
property: value;
}
-
:hover: Represents the state when the cursor is hovering over the element.
-
:active: Represents the state of an element that is being interacted with (like when a button is clicked).
-
:visited: Represents the state of a link that has already been visited.
-
:not(): Represents the state when the specified selectors do not match.
-
:nth-child(): Represents the state where child elements match according to the specified value.
- Key terms:
- odd: The child elements in odd positions.
- even: The child elements in even positions.
- Mathematical formula: An + B, where A and B are integers.
- Example
- Key terms:
A pseudo-element defines the style of a specific part of an element.
List of Pseudo-elements: here
Learn more about pseudo-elements here
selector :: pseudo-element {
property: value;
}
-
::before: Adds content before the element. The content is added using the CSS content property.
-
::after: Adds content after the element. The content is added using the CSS content property.
-
::first-letter: Adds styles to the first letter of the text in any element.
At some point, when you're creating a website, you might encounter issues with styles, such as:
- Why isn't the color I'm applying taking effect?
- Why is this element behaving differently?
The issue is likely related to cascade or specificity.
The cascade is the concept that determines which styles override others, prioritizing those that appear later in the code. Remember that CSS stands for Cascading Style Sheets.
Look at the following code and identify the text color for the <h1> tag:
h1 {
color: red;
}
h1 {
color: blue;
}
The <h1> tag will have blue text because it's declared later in the code. This applies to any CSS property that is repeated elsewhere earlier in the code.
Example of CSS Cascade: here
However, this happens when the specificity of a CSS rule has the same value. But what is specificity?
Specificity is the value assigned to a CSS rule indicating how specific the style is, allowing browsers to determine which styles override others, regardless of where they are in the code. The style with higher specificity will be applied.
There are six types of specificity with their corresponding values, where X is the number of styles containing them. Take a look at this image:
The reserved word !important is a value for any CSS property that provides a specificity of 10,000, causing it to take precedence over other styles. This is considered a bad practice and should not be used.
h1 {
color: red !important;
}
Example of !important here
Inline styles are CSS properties written directly in HTML using the style attribute within any tag. This is also a bad practice and should be avoided.
<h1 style="color: blue;">Specificity</h1>
Example of Inline Styles here
Since you're familiar with selectors, you know that ID selectors are more specific than classes, attributes, and pseudo-classes. The latter are more specific than elements and pseudo-elements. The universal selector has a specificity of zero.
In a project, you should avoid using !important and inline styles, focusing solely on the specificity of selectors. However, keep in mind that combinator selectors add up the specificity of each basic selector to obtain the total specificity of the CSS rule.
If you're using Visual Studio Code, hovering over a selector will show the total specificity. Specificity Calculator is a website where you can calculate specificity.
In the other hand, there is a specificity calculator
The display property sets the type of visual representation for HTML elements without affecting the normal flow of elements.
Some tags have a default display type, such as <div> which has display: block, <span> which has display: inline, and <button> which has display: inline-block.
display: block means that an element will occupy the entire available width by default, and the next element will be placed below it.
It's possible to add width and height measurements to these elements.
You can also add all the properties of the box model (don't worry, we'll cover this concept later).
display: inline means that an element will occupy only the space of its content, and the next element will be placed to its right.
You can't add width and height measurements to these elements.
Additionally, you can't apply all the box model properties; only the margin property on the horizontal axis works (again, we'll cover this concept later).
display: inline-block combines the advantages of block—being able to set measurements and apply box model properties correctly—with the advantages of inline, allowing elements to be positioned side by side in the same line.
If an element exceeds the total content width, it moves to the next line below.
Example of Inline-Block Display
display: none disables the display of an element, making it as if the element doesn't exist.
Flexbox and Grid are recent methods for displaying elements, and each has its own features for effectively creating interfaces. Both start from a parent container that gives child elements special positioning powers.
Both are highly useful tools in development, especially for creating user-friendly interfaces that are adaptable to any device, known as responsive design.
Flexbox involves arranging child elements along a single axis, usually horizontally by default. The parent element or container must have the display property set to flex. From there, you can organize the children as needed.
Grid involves arranging child elements along two axes, like a grid or table. The parent element or container must have the display property set to grid, and you must define the dimensions of the columns and rows. From there, you can organize the children as needed.
A Complete Guide to Grid Flexbox VS Grid
The box model consists of four elements: margin, border, padding, and content.
If you open your browser's developer tools and hover over an HTML element, you'll see a view similar to the previous image in the style section—this is the box model of the selected element.
The content of the element, as the name suggests, is everything inside it. This is defined by the width and height properties, representing the width and height, respectively. If you imagine a box, this value would represent everything you decide to put inside it.
div {
width: 100px;
height: 100px;
}
The border is the outline or edge of an HTML element. If you imagine a box, this would be the box itself. To define a border, you need to use the following three properties:
- border-color: Sets the border color.
- border-style: Defines the style of the border. Options include: none, dotted, dashed, solid, double, groove.
- border-width: Sets the border's thickness.
You can also set all three values in a single border property, where order does not matter.
div {
border: [color] [style] [width];
}
div {
border-color: red;
border-style: solid;
border-width: 1px;
}
You can also set individual border values for each position:
div {
border-top: 5px solid blue;
border-bottom: 5px solid red;
border-left: 5px solid black;
border-right: 5px solid yellow;
}
Padding is the space between the border and the content of an HTML element. If you imagine a box, this would be the space between the box and what you want to put inside it.
div {
padding: 100px;
}
You can set padding for each position in a single line in the following ways:
- padding: [top] [right] [bottom] [left], following a clockwise direction.
- padding: [top] [right and left] [bottom], following the primary axis.
- padding: [top and bottom] [right and left], following the element's axes.
You can also set individual values for each position:
div {
padding-top: 10px;
padding-bottom: 15px;
padding-left: 20px;
padding-right: 10px;
}
Margin is the space between the border and another HTML element. If you imagine a box, it’s the space between your box and another box.
div {
margin: 10px;
}
You can set margin for each position in a single line in the following ways:
- margin: [top] [right] [bottom] [left], following a clockwise direction.
- margin: [top and bottom] [right and left], following the primary axis.
- margin: [top and bottom] [right and left], following the element's axes.
You can also set individual values for each position:
div {
margin-top: 10px;
margin-bottom: 15px;
margin-left: 20px;
margin-right: 10px;
}
By default, the browser sets initial values for some CSS properties, like margin and padding. A good practice is to use the universal selector to reset these values to zero to avoid unexpected errors.
* {
margin: 0;
padding: 0;
}
The total size of an element is determined by the sum of the values for border, padding, and width or height, depending on the axis. Margin is not included in this calculation.
For example, we define the following styles:
div {
width: 150px;
height: 150px;
padding: 20px;
border: 10px solid gray;
margin: 30px;
}
The total size of the element will be 210px on both axes, where the sum was: 150 (height/width) + 20 x 2 (padding on both sides) + 10 x 2 (border on both sides). If you inspect this element in the developer tools, it will show its size as 210x210.
Even if the elements' dimensions are known this way, you won't always have complete control. So, to set the total size of the element using width and height, not just the content, you can add the box-sizing property.
The box-sizing property sets how width and height are calculated—whether they include borders and padding. A best practice is to set this in the universal selector, so all elements follow this approach.
* {
box-sizing: border-box;
}
With the border-box value, the total size of the element will be equal to the specified width and height, causing the content measurements to adjust according to the borders and padding.
For example, with the styles defined earlier, let's set this new property.
The total size of the element will be 150px on both axes, where the content is calculated to ensure the total is what’s specified in width and height. If you inspect this element in the developer tools, it will show its total size as 150x150 and the content as 90x90.
In conclusion, set the total size of the element with width and height, along with box-sizing: border-box, so that the content adjusts to the container's needs.
To recap, the total size of an element is the sum of three things: the border, the padding, and the content.
Sometimes, you might want to add a border when hovering over an element. This can cause the element to require more space, which can create layout issues if other elements are within the same container.
Look at the following example, and try hovering over an element. What happens?
You saw this behavior; you must be careful with what you add because it can cause issues.
The solution is to set a transparent border of the same size as the existing border. This will keep the element at its total size, with only the color changing.
Avoid adding a different size than the original one.
Margin collapse occurs when two adjacent block elements have a certain margin value, causing those margins to overlap into a single value, which is the larger of the two.
Look at the following code, change the display value to inline-block, and observe the result.
As you can see, when you change the display, this behavior disappears. Additionally, in Flexbox and Grid, margin collapse does not occur. Be mindful of the margins you set on block-type elements.
CSS positioning refers to how an element is placed relative to its parent element and the normal flow of the document. The normal flow of the document is the order of elements established in the HTML.
An element's position is defined using the position property with the following possible values:
- static
- relative
- absolute
- sticky
In addition to the position property, there are four properties that determine an element's position relative to its parent: top, bottom, left, and right.
div {
top: 10px;
bottom: 15px;
left: 20px;
right: 10px;
}
These values are relative to the nearest parent with position: relative.
If both top and bottom are defined, top takes precedence. If both left and right are defined, left takes precedence (depending on the configured language).
position: static is the default value for all HTML elements. It respects the normal flow of the document, and positioning properties cannot be set.
position: relative respects the normal flow of the document but allows positioning properties to be set.
position: absolute removes the element from the normal flow of the document, allowing positioning properties to be set.
In the following example, notice what happens to the first element relative to the others.
You may have noticed that the "2" element appears to vanish, but in reality, it's being positioned behind the element with absolute positioning, which is out of the normal document flow. This behavior is due to the Z-axis and the stacking context.
An element with position: absolute will move up, down, left, or right in relation to the nearest parent element with position: relative.
If there's no parent with position: relative, the absolute positioned element will move relative to the root element of the document.
In the following example, you will see several parent containers, including <html> and <body>. Follow the steps and observe the behavior. Ignore the initial styles; they're there to establish the exercise structure.
Example of Positioning with Different Parent Containers
As you may have noticed, the movement of the element with position: absolute is based on the nearest parent element with position: relative.
Relative and absolute positioning are two types of CSS positioning that determine how elements are placed within a webpage. Here's a breakdown of the key differences:
Relative Positioning:
- Definition: With position: relative, an element is positioned relative to its normal position in the document's flow. The original space it occupies remains, even if it's moved.
- Movement: You can use properties like top, right, bottom, and left to move the element from its normal position. However, this shift is relative to where the element would be in the natural document flow.
- Parent Context: A relatively positioned element does not affect other elements' placement in the document flow. Other elements retain their usual positions, and the document flow remains largely unaltered.
- Use Case: It's often used to adjust an element's position slightly while maintaining the overall layout structure. It's useful for creating subtle shifts without removing an element from the document's flow.
Absolute Positioning:
- Definition: With position: absolute, an element is completely removed from the document's normal flow. It's positioned relative to the nearest ancestor with position: relative, or to the document's root if no relative ancestor is found.
- Movement: The element can be positioned anywhere on the page using top, right, bottom, and left, without affecting the layout of surrounding elements. It can overlap or stack with other elements.
- Parent Context: Absolute positioning relies on the context of a parent element with position: relative (or other non-static positioning). If there's no relative parent, it will position relative to the entire page ( or ).
- Use Case: It's useful for creating layered effects, overlays, or when precise positioning is required. Because it doesn't reserve space in the normal flow, it can lead to overlapping content if not used carefully.
Conclusion:
Relative Positioning maintains the general structure and flow of the document, allowing for minor adjustments relative to where the element would normally be. Absolute Positioning removes the element from the normal flow and can be used for more complex layouts or effects, but requires a parent with a defined position to avoid unexpected behavior. It can create issues with stacking and overlapping if not used with caution.
position: fixed removes the element from the normal document flow and fixes it in place; positioning properties can be set.
In the following example, scroll through the document to observe the behavior before and after setting the fixed position.
position: sticky removes the element from the normal document flow and fixes it in place while its parent container is visible; positioning properties can be set.
In the following example, scroll through the document and notice the behavior before and after applying the sticky position.
The stacking context refers to the overlapping of layers or elements along the Z-axis of the browser. This is crucial to avoid one element obscuring another.
The browser consists of three planes and axes: width or X; height or Y; and depth or Z.
- The positive X-axis points to the right.
- The positive Y-axis points downward.
- The positive Z-axis points toward the user.
These concepts are crucial for moving HTML elements from one point to another.
The stacking context is configured using the z-index property.
By default, all elements have a value of auto, meaning the order is defined by the structure of the HTML. The earliest elements will be at the back, and the later ones will be at the front.
If a positive value is set, the element is positioned in front of others. If a negative value is set, it is positioned behind.
If an element has a higher z-index than another, it will be in front. However, if an element has a lower z-index than others, its children will never be on top, even if their z-index is higher.
As you can see in the image, the element with the class "yellow" has a higher z-index than "red," but it isn't on top because its stacking context is within the stacking context of the "blue" element. Similarly, it will never be behind its parent element.
The most commonly used CSS properties are as follows, grouped into typical sections, some of which we are already familiar with:
- Display
- Margin
- Padding
- Border
- Width
- Height
- Color
- Background
Also, if you'd like to explore all existing CSS properties, you can visit the CSS Reference website.
The properties for manipulating text and typography are:
- font-size: Sets the font size.
- font-weight: Sets the text's boldness, with values from 100 to 900 in intervals of 100; 100 being thin and 900 being bold.
- font-family: Sets the font type. text-align: Sets the text alignment: right, left, center, or justify.
- color: Sets the text color.
The property that sets rounded borders is border-radius.
Try to create a business card. You can base your design on the work of your classmates in the "Contributions" section.
You can use the following code as a reference.
Check the practice file
Units of measurement determine the length for a specific element or typography. There are two types of measurements: absolute and relative.
Absolute measurements are fixed values, so the measurement does not change. The most commonly used absolute unit is pixels (px), while others are used less frequently but are still worth knowing.
| Unit | Name | Equivalence |
|---|---|---|
| px | pixels | 1 px = 1/96 in |
| cm | centimeters | 1 cm = 96/2.54 px |
| mm | milimeters | 1 mm = 1/10 cm |
| Q | quarters of a milimeter | 1 Q = 1/4 mm |
| in | inches | 1 in = 2.54 cm = 96 px |
| pc | picas | 1 pc = 1/6 in |
| pt | points | 1 pt = 1/72 in |
Relative measurements are variable values, so the measurement depends on an external value. These need to be used with caution, as a small change can lead to unexpectedly large sizes.
| Unit | Depends On |
|---|---|
| em | the containing element |
| rem | the root element |
| vm | 1% of the screen width |
| vh | 1% of the height |
| vmin | 1% of the smallest screen dimension |
| vmax | 1% of the largest screen dimension |
| ch | the width of the character "0" in the containing element |
| lh | the line height of the containing element |
The em unit depends on the containing element's size. If an element has a font-size of 20px, then 1em is equivalent to 20px, and 2em would be 40px, and so on.
The rem unit depends on the root element. The font-size of the root element is usually 16px, so 2rem is equivalent to 32px, and so on.
In developer tools, you can view the font size in pixels.
Percentages represent the size relative to the total size of the parent element. If the parent element is 20px, then 100% would be 20px.
On the other hand, the units vw (view width) and vh (view height) represent the size relative to the total screen size. If an element has a size of 100vw, it takes up 100% of the screen's width.
If an element occupies the full screen size, then only at that point does 100% equal 100vw or 100vh.
Browsers have an option to change text size. With absolute measurements, the text size will not change, which can be a problem for users.
With relative measurements, the text size changes based on the root element's font size, which is a good solution for accessibility. The rem`` unit is particularly useful for this.
However, the default rem is equivalent to 16px, which can be confusing when using larger values. To address this, you can adjust the root element's font-size so that 1rem is equal to 10px.
In the <html> tag, change the font-size property to 62.5%, based on a simple ratio: if 16px is 100%, what percentage represents 10px?
html {
font-size: 62.5%;
}
With this change, 1rem will equal 10px, allowing you to use it without issue, and your text will adapt to user preferences.
Responsive Design is a set of tools that ensure your site looks good across various screen sizes, including adjustments for images, typography, page internationalization, and more.
Currently, most websites are accessed from mobile devices, so ensuring that your site is responsive on any device is crucial for optimizing revenue.
Media queries are CSS rules that define different behaviors or styles within a certain range of screen sizes. This helps set the layout of the website for different screen types: desktops, tablets, and mobile devices.
There are two types of media queries:
max-width / max-height: Sets a maximum range for certain behaviors.min-width / min-height: Sets a minimum range for certain behaviors.
These values function similarly to conditionals; as long as the condition is met, certain styles will be applied.
The structure of a media query begins with @media, followed by the type of media query that establishes a range, with the CSS rules enclosed within that range.
@media (max-width: 750px) {
div {
color: red;
}
p {
background-color: red;
}
}
To check if the changes are applied correctly, developer tools are very helpful.
Open your browser's developer tools and click on "Toggle device tool." This allows you to manipulate the screen size and see at what pixel widths certain styles are applied.
Use the following example to visualize how styles change depending on the screen's length. You can examine the media query in the code snippet. Although the example only changes the color of two elements, any property can be modified, so feel free to experiment.
Check the practice file
CSS architectures involve managing CSS code with a series of rules and patterns to facilitate readability, maintainability, and scalability.
The code you've worked with so far doesn't resemble reality, as you will likely handle several hundred or thousands of lines of code. CSS architectures aim to maintain a standard in the code so that anyone can add or remove functionality without much effort.
The goals of CSS architectures are:
- Predictable: The code should be as simple as possible.
- Reusable: The code should be as non-redundant as possible to avoid issues with specificity.
- Maintainable: The code should be easy to manage for adding or removing styles.
- Scalable: The code should be able to grow as needed.
The best practices for CSS architectures are:
- Guidelines and Standards: Define rules within your workgroup about how the code should be written.
- Documentation: Establish a brief explanation of the code and guidelines, which is especially useful for new team members to get familiar with what they should do.
- Components: Define each element of your page in a componentized manner, handling them in parts, and then combine them into a whole.
Now that you understand what it means to work with a CSS architecture, let's explore the most common ones when working with CSS code.
The OOCSS (Object-Oriented CSS) architecture involves separating the main structure from the skin or mask.
In other words, it involves having objects that are the main structures. These objects are wrapped in a skin that can change while keeping the structure intact.
The BEM (Block-Element-Modifier) architecture is one of the most widely used today. It involves managing elements through classes defined by blocks, elements, and modifiers.
- Block: The main structure that contains multiple elements.
- Element: The HTML element referenced by the container.
- Modifier: A specific style for the element, such as a button with a different color, often related to specificity.
You can learn more about this architecture in the following article:
BEM Guide for CSS | Falcon 9 Rocket by SpaceX
The SMACSS (Scalable and Modular Architecture for CSS) architecture defines the order of components that will be placed in folders. Combining these components results in a styled web page.
- Base: Basic elements like buttons, headings, links.
- Layout: Page structure, related to Responsive Design.
- Modules: Elements that contain the base elements.
- State: Styles related to element behavior, often tied to pseudo-classes and pseudo-elements.
- Themes: A set of styles that define your web page's look.
The ITCSS (Inverted Triangle CSS) architecture involves separating project files by adjustments, tools, elements, and other categories. This is done to manage specificity, clarity, and scale.
The Atomic Design architecture is also one of the most widely used today. It involves managing elements as a minimum structure, where the combination of several of these results in the styles for a web page. It is based on the minimal structure of matter: atoms.
- Atoms: The minimum structure, like buttons, links, headings, etc.
- Molecules: A combination of atoms.
- Organisms: A combination of molecules.
- Templates: A combination of organisms.
- Pages: A combination of templates.
This project was developed by Juan Cumbe. If you have any questions or suggestions about the project, feel free to contact me via e-mail or my Linkedin profile.