css logo

Styling Your First Web Page with CSS


Difficulty: Easy

Posted: Jan 13th, 2025 | By the 404Found Team


In this tutorial, we'll learn how to use CSS (Cascading Style Sheets) to add color, fonts, and layout styles to your HTML page. CSS is used to make web pages look more appealing by adding styling to the elements created with HTML.


What You’ll Learn:


  • How to link a CSS file to your HTML page.
  • How to apply styles to different HTML elements.
  • How to use basic CSS properties such as color, padding, margin, and font styles.

Step 1: Setting Up Your CSS File


To begin, you’ll need to create a CSS file. Open your text editor and create a new file. Save it as style.css.


Step 2: Linking the CSS File to Your HTML


To apply the styles, link the CSS file to your HTML document. You can do this by adding the following <link> tag in the <head> section of your HTML file:


HTML Example
<link rel="stylesheet" href="style.css">

Step 3: Adding Styles in the CSS File


Now, open the style.css file you created and add some simple styles to your page. For example, to change the background color, text color, and font size, you can add the following CSS code:


CSS Example
body {
    background-color: #f4f4f4;
    color: #333;
    font-family: Arial, sans-serif;
}

h1 {
    color: #0073e6;
    text-align: center;
}

h2 {
    color: #333;
}

In the example above, we set a light gray background color for the page, changed the text color to dark gray, and made the main heading <h1> blue and centered it.


Step 4: Viewing Your Styled Web Page


After saving the style.css file, return to your HTML page. Make sure the <link> tag is correctly added in the <head> section. Now, refresh the page in your web browser, and you should see the styles applied to your web page.


Step 5: More Styling Examples


Here are a few more styling examples you can try:


CSS Example
p {
    font-size: 18px;
    line-height: 1.6;
}

a {
    color: #0073e6;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

In this example, we’ve added a font size and line height to paragraphs (<p>), styled links (<a>) with a blue color and no underline, and added an effect for when the link is hovered over.


Step 6: Full Example


Here’s a full example of how your HTML and CSS might look together:


HTML Example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Styled Web Page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Welcome to My Styled Web Page!</h1>
    <p>This page has been styled using CSS to make it more visually appealing.</p>
    <a href="https://www.example.com" target="_blank">Visit Example</a>
</body>
</html>

CSS Example
body {
    background-color: #f4f4f4;
    color: #333;
    font-family: Arial, sans-serif;
}

h1 {
    color: #0073e6;
    text-align: center;
}

p {
    font-size: 18px;
    line-height: 1.6;
}

a {
    color: #0073e6;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

Step 7: Next Steps


Now that you've styled your first web page, here are some things to try next:


  • Experiment with different CSS properties like margins, padding, and borders.
  • Learn about CSS selectors and how to target specific elements.
  • Explore CSS frameworks like Bootstrap to make styling easier and faster.

Next, check out are JavaScript tutorial! Learning JavaScript for Beginners


Happy styling!



John Doe

404Found team

Posted: Jan 15th, 2025

At 404Found, we are committed to providing high-quality content that keeps you well-informed in the fast-paced and constantly evolving world of technology. Our goal is to ensure you stay up-to-date with the latest trends, innovations, and insights that shape the tech landscape.