Day 1: Introduction to CSS: The Basics of happy life

Welcome to Day 1 of our 100-day journey to mastering CSS! Together, we’ll explore the ins and outs of CSS, starting with the basics. By the end of today’s article, we’ll have a solid understanding of what CSS is, how it works, and we’ll even get to style our first web page together. Ready? Let’s dive in!

What is CSS?

CSS stands for Cascading Style Sheets. It’s the language that controls how HTML elements are displayed on the screen. Think of HTML as the structure of our web page and CSS as the paint that makes it look beautiful.

How CSS Works

CSS works by associating rules with HTML elements. These rules tell the browser how to display the content. A CSS rule consists of a selector and a declaration block.

Selector: Specifies the HTML element(s) to which the rule applies.
Declaration Block: Contains one or more declarations, each consisting of a property and a value, enclosed in curly braces {}.

Here’s an example of a CSS rule:

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

In this example, p is the selector that targets all <p> elements. The declarations within the curly braces {} specify that the text color should be blue and the font size should be 16 pixels.

Adding CSS to Your Web Page

There are three ways we can add CSS to our HTML document:

Inline CSS: Using the style attribute inside HTML elements.

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

Internal CSS: Using a <style> tag within the <head> section of our HTML document.

   <html>
   <head>
     <style>
       p {
         color: blue;
       }
     </style>
   </head>
   <body>
     <p>This is a blue paragraph.</p>
   </body>
   </html>

External CSS: Linking to an external CSS file from our HTML document using the <link> tag.

   <html>
   <head>
     <link rel="stylesheet" href="styles.css">
   </head>
   <body>
     <p>This is a blue paragraph.</p>
   </body>
   </html>

And the content of styles.css would be:

   p {
     color: blue;
   }

Basic CSS Selectors

CSS selectors are patterns used to select the elements we want to style. Here are some basic selectors:

Type Selector: Selects all elements of a given type. Example: p selects all <p> elements.
Class Selector: Selects all elements with a given class. Example: .className selects all elements with class="className".
ID Selector: Selects the element with a given ID. Example: #idName selects the element with id="idName".
Universal Selector: Selects all elements. Example: * selects all elements on the page.

Our First CSS Project

Let’s create a simple HTML page and apply some CSS to it. We’ll do this step by step together.

Create an HTML file (index.html):

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Our First CSS Page</title>
     <link rel="stylesheet" href="styles.css">
   </head>
   <body>
     <h1>Welcome to Our Website</h1>
     <p>This is our first styled web page.</p>
   </body>
   </html>

Create a CSS file (styles.css):

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

   h1 {
     color: #333;
     text-align: center;
   }

   p {
     color: #666;
     font-size: 18px;
     text-align: center;
   }

Open index.html in your web browser to see the styled page.

Conclusion

Congratulations on completing Day 1! We now have a basic understanding of what CSS is and how to use it to style HTML elements. Tomorrow, our day 2 we’ll dive deeper into the CSS box model, which is fundamental to understanding how elements are laid out on the page.

Stay tuned, and happy coding!

Feel free to share your progress and ask questions in the comments. Let’s learn and grow together!

109

What is CSS?

How CSS Works

Adding CSS to Your Web Page

Basic CSS Selectors

Our First CSS Project

Conclusion

Related Posts

Leave a Comment Cancel Reply