CSS Fundamentals: Enhance Your HTML with Basic Styling Techniques

3 min readJun 14, 2024

CSS (Cascading Style Sheets) is a powerful tool that allows you to add style and design to your HTML web pages.

In this post, we’ll delve into CSS properties, selectors, units, and basic styling techniques. By the end, you’ll be able to apply CSS styles to your HTML web pages created earlier.

What is CSS?

CSS is used to control the appearance of web pages. It allows you to separate content (HTML) from presentation (CSS), making your web pages more flexible and easier to maintain.

Key Concepts:

Selectors: Define which HTML elements to style.
Properties: Specify the style to apply.
Values: Define the setting for the property.

CSS Selectors

Selectors are patterns used to select the elements you want to style.

Common Selectors:

Element Selector: Selects all elements of a specific type.

p {
 color: blue;
}

Class Selector: Selects all elements with a specific class attribute.

.myClass {
 color: red;
}

ID Selector: Selects a single element with a specific ID attribute.

#myId {
 color: green;
}

CSS Properties and Units

CSS properties are used to style elements. Units define the values of these properties.

Example Properties:

color: Changes the text color.
font-size: Sets the size of the text.
margin: Adds space around elements.
padding: Adds space inside elements, around the content.

Example Units:

px (pixels): Absolute unit.
% (percentage): Relative unit.
em: Relative to the font-size of the element.
rem: Relative to the font-size of the root element.

Example:

p {
 color: blue;
 font-size: 16px;
 margin: 20px;
 padding: 10px;
}

Applying CSS to Your HTML Webpage

Let’s apply some basic CSS styles to a simple welcome page with a heading and a paragraph.

HTML Code:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Welcome Page</title>
      <link rel="stylesheet" href="styles.css">
   </head>
   <body>
      <h1>Welcome to My Website</h1>
      <p>This is a paragraph introducing my website. Replace this text with your own content.</p>
   </body>
</html>

CSS Code (styles.css):

/* Apply a background color to the body */
body {
 background-color: #f0f0f0;
 font-family: Arial, sans-serif;
}

/* Style the main heading */
h1 {
 color: #007bff;
 font-size: 2.5rem;
 text-align: center;
 margin-top: 50px;
}

/* Style the paragraph */
p {
 color: #333;
 font-size: 1.25rem;
 text-align: center;
 margin: 20px auto;
 width: 80%;
 line-height: 1.6;
 background-color: #fff;
 padding: 20px;
 border-radius: 10px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

Explanation:

The body selector applies a light grey background color and sets the font family to Arial.
The h1 selector changes the main heading color to blue, sets the font size, centers the text, and adds a top margin.
The p selector styles the paragraph with dark grey text color, larger font size, centered text, margin, width, line-height, background color, padding, rounded corners, and a subtle shadow.

Additional Resources

To further enhance your understanding of CSS, you can explore the following resources:

MDN Web Docs: CSS — Comprehensive documentation and tutorials.
CSS Tricks — Articles, guides, and tips for all things CSS.

Conclusion

By learning CSS fundamentals, you can enhance the appearance of your HTML web pages. Understanding selectors, properties, units, and basic styling techniques allows you to create visually appealing and responsive designs.

Practice applying CSS styles to your HTML content to become more proficient and confident in your web development skills.

Happy styling!