Search for a command to run...
The MERN Handbook Article 4: Stage 0 HTML and CSS Fundamentals - Topic 2: Introduction to CSS
I'm a full-stack engineer from Kerala. Helping startups turn their ideas into digital realities.I specialize in designing and building modern web solutions.
No comments yet. Be the first to comment.
This series makes industry knowledge accessible, fosters growth through practical learning, and builds a supportive community for aspiring developers.
The MERN Handbook Article 4: Stage 0 HTML and CSS Fundamentals - Topic 2: Introduction to SASS
Designing a Stateless Execution Loop to Eliminate Context Decay in AI Coding Systems
One of the most sophisticated supply chain attacks in history was discovered because of a 500-millisecond delay. A half-second lag in an SSH login—a fractional anomaly noticed by a single, curious developer—was the only thing that stood between the s...
1. Setting the Stage: A New Breed of Supply Chain Attack The Shai-Hulud campaign represents a critical evolution in supply chain threats, moving beyond isolated package compromise to a self-propagating contagion targeting the core of modern developme...
The healthcare landscape is undergoing a profound transformation. As our cities become smarter and our lives more connected, a new paradigm is emerging that promises to redefine how we approach health monitoring and care delivery. Edge AI-enabled IoT...
As a founder deeply immersed in both hardware and software, with a specialization in AI, I've spent years observing the tech industry's relentless pursuit of the "next big thing" beyond the smartphone. For a while now, the prevailing narrative has po...
Welcome back to "The MERN Handbook." In this fourth article of the series, we'll cover the basics of CSS (Cascading Style Sheets). Understanding CSS is crucial for designing visually appealing web applications. We'll cover selectors, properties, basic styling techniques, and various methods of applying CSS. Additionally, we'll showcase practical implementations with HTML to give you more clarity.
CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS allows you to apply styles to web pages, including layout, colors, fonts, and more. By separating content from design, CSS enhances the maintainability and flexibility of web pages.
Selectors are used to target HTML elements that you want to style. Here are some common types of selectors:
Element Selector: Targets all instances of a specific HTML element.
p {
color: blue;
}
This example changes the text color of all <p> elements to blue.
Class Selector: Targets elements with a specific class attribute.
.highlight {
background-color: yellow;
}
This example changes the background color of elements with the class highlight to yellow.
ID Selector: Targets a single element with a specific ID attribute.
#header {
font-size: 24px;
}
This example changes the font size of the element with the ID header to 24 pixels.
Attribute Selector: Targets elements with a specific attribute.
[type="text"] {
border: 1px solid black;
}
This example adds a border to all <input> elements with type="text".
Descendant Selector: Targets elements that are descendants of a specified element.
div p {
margin: 10px;
}
This example adds a margin to all <p> elements that are inside a <div> element.
Pseudo-Class Selector: Targets elements in a specific state.
a:hover {
color: red;
}
This example changes the text color of links to red when they are hovered over.
Properties are used to apply styles to elements. Here are some basic properties you should know:
Color: Sets the color of text.
color: green;
Background-Color: Sets the background color of an element.
background-color: lightblue;
Font-Size: Sets the size of the text.
font-size: 16px;
Margin: Sets the space outside an element.
margin: 20px;
Padding: Sets the space inside an element, between the content and the border.
padding: 10px;
Border: Sets the border around an element.
border: 1px solid black;
Width and Height: Sets the width and height of an element.
width: 200px;
height: 100px;
Here are some basic styling techniques to help you get started with CSS:
Centering Content: Centering an element horizontally.
.center {
margin: 0 auto;
width: 50%;
}
Styling Lists: Removing bullets from a list.
ul {
list-style-type: none;
}
Styling Links: Removing the underline from links.
a {
text-decoration: none;
}
Floating Elements: Floating elements to the left or right.
.left {
float: left;
}
.right {
float: right;
}
Using Flexbox: Creating a flexible layout.
.container {
display: flex;
justify-content: center;
align-items: center;
}
Using Grid: Creating a grid layout.
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
}
There are three primary methods of applying CSS to HTML: inline styles, internal styles, and external styles.
Inline Styles: Directly applying styles to HTML elements using the style attribute.
<p style="color: blue; font-size: 14px;">This is an inline styled paragraph.</p>
Internal Styles: Including CSS within the <style> tag in the head section of an HTML document.
<head>
<style>
p {
color: green;
font-size: 16px;
}
</style>
</head>
<body>
<p>This is an internally styled paragraph.</p>
</body>
External Styles: Linking to an external CSS file using the <link> tag.
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>This is an externally styled paragraph.</p>
</body>
styles.css:
p {
color: red;
font-size: 18px;
}
Let's combine what we've learned in a practical example. We’ll create a basic card layout using different CSS methods.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<style>
.card-title {
font-size: 24px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="card">
<h2 class="card-title">Card Title</h2>
<p class="card-content" style="color: gray; font-size: 16px;">This is a simple card with some content.</p>
</div>
</body>
</html>
styles.css:
.card {
border: 1px solid #ccc;
padding: 20px;
width: 300px;
background-color: #f9f9f9;
}
CSS is an essential part of web development, enabling you to create visually appealing and user-friendly interfaces. By understanding selectors, properties, basic styling techniques, and methods of applying CSS, you'll be well on your way to mastering CSS. In the next article, we'll dive deeper into advanced CSS techniques and how to use them effectively in your projects.