Day 7: Introduction to CSS

Welcome to Day 7 of your journey to mastering HTML and CSS! Today, we will introduce CSS (Cascading Style Sheets), the language used to style HTML content. By the end of this post, you'll understand the basics of CSS and how to apply styles to your web pages.

please subscribe to my YouTube channel to support my channel and get more web development tutorials.

What is CSS?

CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe the presentation of a document written in HTML. CSS controls the layout, colors, fonts, and overall appearance of a web page.

How to Include CSS in HTML

There are three ways to include CSS in your HTML document:

Inline CSS: Using the style attribute within HTML tags.
Internal CSS: Using the <style> tag within the <head> section of the HTML document.
External CSS: Linking to an external CSS file using the <link> tag.

Let's explore each method.

1.Inline CSS:

   <p style="color: blue; font-size: 16px;">This is an inline-styled paragraph.</p>

2.Internal CSS:

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Internal CSS Example</title>
       <style>
           p {
               color: blue;
               font-size: 16px;
           }
       </style>
   </head>
   <body>
       <p>This is an internally-styled paragraph.</p>
   </body>
   </html>

3.External CSS:

Create a file named styles.css with the following content:

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

Link the external CSS file in your HTML document:

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>External CSS Example</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <p>This is an externally-styled paragraph.</p>
   </body>
   </html>

CSS Syntax

CSS consists of selectors and declarations. A selector targets the HTML element you want to style, and a declaration defines the style properties and values.

selector {
    property: value;
}

For example:

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

Basic CSS Selectors

1.Element Selector: Targets all elements of a specific type.

   p {
       color: blue;
   }

2.Class Selector: Targets elements with a specific class attribute. Use a dot (.) followed by the class name.

   .highlight {
       background-color: yellow;
   }

   <p class="highlight">This is a highlighted paragraph.</p>

3.ID Selector: Targets a single element with a specific ID attribute. Use a hash (#) followed by the ID name.

   #unique {
       font-weight: bold;
   }

   <p id="unique">This is a uniquely styled paragraph.</p>

Styling Text with CSS

Here are some common text styling properties:

1.Color: Sets the text color.

   p {
       color: red;
   }

2.Font Family: Sets the font of the text.

   p {
       font-family: Arial, sans-serif;
   }

3.Font Size: Sets the size of the text.

   p {
       font-size: 18px;
   }

4.Text Alignment: Aligns the text.

   p {
       text-align: center;
   }

Creating a Styled HTML Document

Let's create an HTML document with CSS styling:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Styling Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        h1 {
            color: navy;
            text-align: center;
        }
        p {
            color: gray;
            font-size: 16px;
        }
        .highlight {
            background-color: yellow;
        }
        #unique {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Welcome to CSS Styling</h1>
    <p>This is a paragraph styled with internal CSS.</p>
    <p class="highlight">This is a highlighted paragraph.</p>
    <p id="unique">This is a uniquely styled paragraph.</p>
</body>
</html>

Summary

In this blog post, we introduced CSS and how to apply it to HTML content. We covered the three methods of including CSS in HTML, the basic syntax of CSS, common selectors, and some basic text styling properties.

Series Index

Part	Title	Link
1	Day 1: Getting Started with HTML	Read Part 1
2	Day 2: Text Formatting and Links in HTML	Read Part 2
3	Day 3: Lists and Images in HTML	Read Part 3
4	Day 4: Creating Tables in HTML	Read Part 4
5	Day 5: Creating Forms in HTML	Read Part 5
6	Day 6: Introduction to Semantic HTML	Read Part 6
7	Day 7: Introduction to CSS	Read Part 7

Stay tuned for Day 8, where we will dive deeper into the box model and layout properties in CSS. Happy coding!

Follow me for more tutorials and tips on web development. Feel free to leave comments or questions below!

Follow and Subscribe:

Website: Dipak Ahirav
Email: dipaksahirav@gmail.com
YouTube: devDive with Dipak
LinkedIn: Dipak Ahirav

Blog