DEV Community

Cover image for Day 7: Introduction to CSS
Dipak Ahirav
Dipak Ahirav

Posted on • Updated on

Day 7: Introduction to CSS

#html #css #webdev #learning

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:

  1. Inline CSS: Using the style attribute within HTML tags.
  2. Internal CSS: Using the <style> tag within the <head> section of the HTML document.
  3. 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

3.External CSS:

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

   p {
       color: blue;
       font-size: 16px;
   }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

For example:

p {
    color: blue;
    font-size: 16px;
}
Enter fullscreen mode Exit fullscreen mode

Basic CSS Selectors

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

   p {
       color: blue;
   }
Enter fullscreen mode Exit fullscreen mode

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

   .highlight {
       background-color: yellow;
   }
Enter fullscreen mode Exit fullscreen mode 
   <p class="highlight">This is a highlighted paragraph.</p>
Enter fullscreen mode Exit fullscreen mode

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

   #unique {
       font-weight: bold;
   }
Enter fullscreen mode Exit fullscreen mode 
   <p id="unique">This is a uniquely styled paragraph.</p>
Enter fullscreen mode Exit fullscreen mode

Styling Text with CSS

Here are some common text styling properties:

1.Color: Sets the text color.

   p {
       color: red;
   }
Enter fullscreen mode Exit fullscreen mode

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

   p {
       font-family: Arial, sans-serif;
   }
Enter fullscreen mode Exit fullscreen mode

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

   p {
       font-size: 18px;
   }
Enter fullscreen mode Exit fullscreen mode

4.Text Alignment: Aligns the text.

   p {
       text-align: center;
   }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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:

Top comments (0)

Read next

nikhilxd profile image

Spring Boot Caching Simplified: How to Use JetCache Effectively

Nikhil Soman Sahu -

code42cate profile image

How to Dockerize and Deploy Fastify APIs

Jonas Scholz -

biostate profile image

How to Minify and Cache CSS & JS Files in Laravel

Süleyman Özgür Özarpacı -

afiqiqmal profile image

Preventing Duplicate Requests in Laravel: The AtomicLockMiddleware

Hafiq Iqmal -