HTML 05: Introduction to CSS and Styling Your Web Page

CSS is used to style and layout web pages. It lets you add colors, adjust font sizes, position elements, and much more, giving life and personality to your website.

HTML 05: Introduction to CSS and Styling Your Web Page

You've made incredible progress this week, and today, we're going to add a splash of color and style to your web pages. Welcome to the world of CSS (Cascading Style Sheets)!

CSS: The Stylist of the Web

Think of HTML as the skeleton of your web page and CSS as the clothing. CSS is used to style and layout web pages. It lets you add colors, adjust font sizes, position elements, and much more, giving life and personality to your website.

Basic CSS Syntax

A CSS rule consists of a selector and a declaration block:

selector {property: value;}

For example:

p {color: blue;font-size: 16px;}

This CSS rule will change the text color to blue and set the font size of all <p> elements to 16 pixels.

Linking CSS to Your HTML Page

To apply CSS to your HTML page, you can either include it within a <style> tag in the <head> section or link to an external CSS file. For simplicity, let's use the <style> tag.

Today's Mission: Style Your Web Page with CSS

  1. Open your HTML file from the previous days.
  2. In the <head> section, add a <style> tag.
  3. Write some basic CSS to style your headings, paragraphs, links, and images.

Here’s an Example to Get You Started:

<!DOCTYPE html>
<html>
    <head>
        <title>My Styled Web Page</title>
        <style>
            body 
            {font-family: Arial, sans-serif;}
            
            h1 
            {color: navy;}p {color: grey;}
            
            a 
            {color: green;}img {width: 100px;height: auto;}
        </style>
    </head>
    <body>
        <h1>Welcome to My Styled Website</h1>
        <p>This is a paragraph with styled text.</p>
        <a href="https://www.example.com">Visit Example.com</a>
        <img src="image.jpg" alt="A beautiful landscape">
    </body>
</html>

Need Help Styling? If you're having trouble or want to share your stylish new page, head over to our SkillSprints Slack community. We're here to help and excited to see what you create! Join us ​here​.

Final Thought: Today, you've added another dimension to your web development skills by integrating CSS. This is just the beginning of a journey into the visually stunning world of web design. Congratulations on completing this week’s HTML Coding Foundations course – you’ve laid a solid foundation for your future in web development!