Surya's blog
Getting Creative with CSS: Styling Your First Web Page

Getting Creative with CSS: Styling Your First Web Page

Mastering the Power of Selectors, Colors, and Fonts

Surya Durgesh's photo
Surya Durgesh
·

5 min read

Cascading Style Sheets (CSS) bring life to web pages by allowing you to control the visual presentation of your HTML content. While HTML provides structure, CSS is what makes your web pages visually appealing and professional. In this guide, you'll learn the basics of CSS, from applying colors and fonts to using selectors to target specific elements.

Introduction to CSS and Its Purpose

CSS is a stylesheet language used to describe the look and formatting of a document written in HTML. It allows you to control multiple aspects of your web page's appearance, including layout, fonts, colors, and spacing. This separation of content (HTML) and presentation (CSS) makes it easier to maintain and update your site.

Why CSS?

  • Separation of Content and Style: HTML handles the content, while CSS manages how that content looks.

  • Consistency: CSS ensures that styles can be applied across multiple pages.

  • Efficiency: Changes to a CSS file can update the entire website's design without altering the HTML.

CSS follows a simple syntax that consists of a selector and a declaration block. Here’s an example:

selector {
    property: value;
}

  • Selector: Targets an HTML element (e.g., <h1> or <p>).

  • Property: Refers to the visual aspect (e.g., color, font-size).

  • Value: Specifies how the property should be styled (e.g., red, 16px).

Linking CSS to HTML

You can add CSS to an HTML file in three different ways:

  1. Inline CSS: Directly inside HTML tags using the style attribute.
    Example:

     <p style="color: blue;">This text is blue.</p>

  2. Internal CSS: Inside a <style> tag within the <head> section of your HTML document.
    Example:

     <head>
     <style>
         p {
             color: green;
         }
     </style>
 </head>

  3. External CSS: Using an external stylesheet linked in the <head> section.
    Example:

     <head>
     <link rel="stylesheet" href="styles.css">
 </head>

External stylesheets are the preferred method since they keep the HTML clean and reusable across multiple pages.

Working with Selectors (Class, ID, Element)

Selectors help you target specific HTML elements to apply styles. Understanding selectors is key to mastering CSS.

1. Element Selector:

Targets all elements of a specific type.
Example:

p {
    color: red;
}

This rule will make all <p> elements on the page red.

2. Class Selector:

Targets elements with a specific class attribute.
Example:

<p class="intro">This is an introduction.</p>

.intro {
    font-weight: bold;
}

Class selectors begin with a . and can be reused on multiple elements.

3. ID Selector:

Targets an element with a unique ID attribute.
Example:

<p id="main-text">Main content goes here.</p>

#main-text {
    font-size: 18px;
}

ID selectors are unique, meaning they should only be used once per page and begin with #.

Applying Colors, Fonts, and Basic Styling

CSS gives you the ability to change the appearance of text, backgrounds, and more.

1. Colors:

You can set text and background colors using color names, HEX codes, or RGB values.

  • Color Name:

      h1 {
      color: blue;
  }

  • HEX Code:

      body {
      background-color: #f0f0f0;
  }

  • RGB Value:

      p {
      color: rgb(255, 0, 0);
  }

2. Fonts:

Fonts can be customized using the font-family, font-size, and font-weight properties.

Example:

h1 {
    font-family: 'Arial', sans-serif;
    font-size: 24px;
    font-weight: bold;
}

To include a custom web font, such as one from Google Fonts, you can add the following inside the <head>:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">

Then apply it in CSS:

body {
    font-family: 'Roboto', sans-serif;
}

3. Basic Styling:

You can enhance the appearance of your elements with borders, padding, and margins.

Example:

p {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 20px;
}

Responsive Design Basics

With the rise of mobile devices, creating responsive designs is crucial. CSS provides powerful tools to ensure your site looks great on all screen sizes.

1. Viewport Meta Tag:

Add this tag to your HTML’s <head> to ensure your site scales properly on different devices:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Media Queries:

Media queries allow you to apply different styles based on screen size.

Example:

/* Styles for screens larger than 600px */
@media (min-width: 600px) {
    body {
        font-size: 18px;
    }
}

/* Styles for screens smaller than 600px */
@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

With media queries, you can create responsive layouts that adjust based on the user's device.

Practical Examples and Exercises

Example 1: Basic Styling

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>CSS Basics</title>
</head>
<body>
    <h1>Welcome to CSS Basics</h1>
    <p class="intro">Learn how to style your web pages with CSS.</p>
    <p id="main-text">This is an example of styled text with CSS.</p>
</body>
</html>

In styles.css:

body {
    font-family: 'Arial', sans-serif;
    background-color: #f9f9f9;
}

h1 {
    color: #333;
}

.intro {
    color: #007bff;
    font-size: 20px;
}

#main-text {
    font-size: 18px;
    color: #555;
}

Exercise:

  1. Create an HTML file and link it to a CSS file.

  2. Style headers, paragraphs, and links.

  3. Experiment with different colors and fonts.

  4. Try making your page responsive using media queries.

Conclusion

CSS is an essential tool for web developers, allowing you to transform plain HTML into visually stunning web pages. By mastering selectors, colors, fonts, and responsive design, you can create professional-looking websites that function beautifully across devices.

In the next blog, we'll explore CSS layout techniques, including Flexbox and Grid, to help you arrange content effectively. Stay tuned and keep practicing!

By following this guide and working through the exercises, you’ll gain a solid understanding of CSS and how to make your web pages look fantastic.

CSS3Web Developmentstyling web pages with CSSselectorscolorsstyling