Introduction to CSS

Welcome to the CSS tutorial! CSS (Cascading Style Sheets) is the design language of the web. In this tutorial, you’ll learn how to style websites and make them look modern, colorful, and user-friendly.

What is CSS?

CSS stands for Cascading Style Sheets. It is used to describe how HTML elements should look on a web page. With CSS, you can control colors, fonts, layouts, backgrounds, and even animations. Without CSS, all websites would look very plain and boring.


Types of CSS

There are some more ways to add the style tag , if you don't know about the style . So style tag means like if you want to add some beauti in you website , that you can't do with your HTML , but if you want the beauti so you can use CSS but , you don't know how to use the CSS , so there was a tag that name style tag. You can use style , but there was some more ways to use the style tag in HTML :


First way :

the first way is like you can use your style tag in your html , lik you want to style h1 , {so wirte a style tag and write the property that you wnat to style like i want to style a div so after this select a css property like [color] , [border] , [background-color]}
so this is the first way to write (CSS) .

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First CSS Page</title>
<style> <--- CSS part :
h1 { color: blue; font-family: Arial, sans-serif; }
p { color: green; }
</style> <--- CSS part :
</head>
<body>
<h1>Hello, CSS!</h1>
<p>This is my first styled paragraph.</p>
</body>
</html>

Second way :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First CSS Page</title>
</head>
<body>

             -> now without any tag :
             |
             |
<h1 style = "color:red">Hello, CSS!</h1>
<p>This is my first styled paragraph.</p>
</body>
</html>

Why Learn CSS?

    Makes websites visually attractive
  • Controls layout and design
  • Works with all devices (responsive design)
  • Separates structure (HTML) from style (CSS)
  • Essential for web development careers

Your First CSS Code

Let’s

  • start with a simple CSS example. In this practice, you’ll create a file named index.html and write your first CSS code inside a <style> tag:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First CSS Page</title>
    <style> <--- CSS part :
    h1 { color: blue; font-family: Arial, sans-serif; }
    p { color: green; }
    </style> <--- CSS part :
    </head>
    <body>
    <h1>Hello, CSS!</h1>
    <p>This is my first styled paragraph.</p>
    </body>
    </html>

    Key Points to Remember

    • CSS works with selectors (like h1, p, div)
    • Each rule has a property and a value (color: blue;)
    • CSS can be written inline, internal, or external
    • Internal CSS uses the <style> tag inside <head>
    • External CSS is written in a separate .css file

    Practice Exercise

    Try creating your own HTML file with CSS styling inside the <style> tag. Save it as stylepractice.html and open it in your web browser!

    Hint!

    You can use the symbol ! in VS Code to auto-generate the boilerplate HTML structure. Just type ! and hit Enter.