2026-10-05
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minimal CSS Example</title>
<!-- Link to External CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Inline CSS -->
<style>
.inline-style {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<h1 class="inline-style">Hello, World!</h1>
<p>This is a paragraph styled with external CSS.</p>
</body>
</html>A CSS rule consists of a selector and a declaration block.
CSS:
Targets all instances of an element.
CSS:
HTML:
Targets elements with a specific class attribute.
CSS:
HTML:
Targets a single element with a specific ID attribute.
CSS:
HTML:
Targets elements with a specific attribute.
CSS:
HTML:
Targets the direct parent of an element.
CSS:
HTML:
Targets an element that is a descendant of another element.
CSS:
HTML:
color: Sets the text color.
font-family: Sets the font of the text.
font-size: Sets the size of the text.
font-weight: Sets the weight (boldness) of the text.
text-align: Aligns the text (left, right, center, justify).
CSS:
background-color: Sets the background color.
background-image: Sets a background image.
background-repeat: Controls the repetition of the background image.
background-position: Sets the initial position of the background image.
CSS:
!important.Specificity is a measure of how specific a CSS selector is.
More specific selectors have higher priority.
CSS:
HTML:
The !important declaration can be used to override other rules.
CSS:
HTML:
When specificity and importance are equal, the last defined rule in the source order is applied.
CSS:
HTML:
Every HTML element is considered a box.
The box model consists of: content, padding, border, and margin.
CSS:
display: block;: The element takes up the full width available.
display: inline;: The element takes up only as much width as necessary.
display: inline-block;: The element is formatted as an inline element but can have a width and height.
CSS:
position: static;: Default positioning.
position: relative;: Positioned relative to its normal position.
position: absolute;: Positioned relative to the nearest positioned ancestor.
position: fixed;: Positioned relative to the viewport.
CSS:
display: flex;.flex-direction: Direction of the flex items (row, column).justify-content: Aligns items along the main axis (flex-start, center, space-between).align-items: Aligns items along the cross axis (flex-start, center, stretch).flex-grow: How much a flex item will grow relative to the rest.flex-shrink: How much a flex item will shrink relative to the rest.flex-basis: Initial size of a flex item.CSS:
HTML:
Explanation:
.container class defines a flex container with display: flex;.flex-direction: row; arranges items in a row.justify-content: space-between; distributes space between items.align-items: center; aligns items along the cross axis..item grows to fill available space equally (flex: 1;).A layout model for creating complex, responsive grid-based layouts.
CSS:
HTML:
Media queries use the @media rule followed by a condition and a block of CSS rules.
Example:
Common Media Query Conditions:
max-width: Applies styles if the viewport width is less than or equal to the specified value.min-width: Applies styles if the viewport width is greater than or equal to the specified value.max-height: Applies styles if the viewport height is less than or equal to the specified value.min-height: Applies styles if the viewport height is greater than or equal to the specified value.orientation: Applies styles based on the device orientation (portrait or landscape).CSS:
CSS:
Explanation:
CSS:
Explanation:
Using percentage values for width allows elements to resize relative to their parent container.
Example:
Viewport Width (vw): 1vw is equal to 1% of the viewport’s width.
Viewport Height (vh): 1vh is equal to 1% of the viewport’s height.
Example:
CSS:
.container {
width: 80%; /* Element takes up 80% of its parent container's width */
max-width: 1200px; /* Maximum width of the element */
margin: 0 auto; /* Center the element horizontally */
}
.responsive-box {
width: 50vw; /* Element takes up 50% of the viewport's width */
height: 50vh; /* Element takes up 50% of the viewport's height */
background-color: lightblue;
}HTML:
Before studying a framework to be more efficient, let’s do some exercises to practice CSS fundamentals.
Please go to CSS Hands-on
Use update to date version of Bootstrap from Bootstrap Official Website
<link> and <script> tags to the <head> section of your HTML file.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Quickstart</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<!-- Your content here -->
<!-- Bootstrap JS and dependencies -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html><nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>Use Bootstrap’s grid system to create responsive layouts.
Use Bootstrap classes to style buttons and forms.
<button type="button" class="btn btn-primary">Primary Button</button>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>Use Bootstrap classes to create modals for displaying content in a dialog box.
Example:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
This is a Bootstrap modal.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>Use Bootstrap classes to create alert messages for feedback.
Example:
Use Bootstrap classes to create card components for displaying content.
Example:
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Use Bootstrap classes to add tooltips to elements for additional information.
Example:
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>E. Bruno - CSS Fundamentals