Index

Introduction to CSS

What is CSS?

CSS (Cascading Style Sheets) is a language used to describe the presentation of a document written in HTML or XML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. It’s one of the cornerstone technologies of the World Wide Web, alongside HTML and JavaScript.

CSS enables you to control the layout of multiple web pages all at once. It allows you to specify the style of text, color of backgrounds, spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, variations in display for different devices and screen sizes, and much more.

How to Add CSS to HTML

There are three ways to apply CSS to HTML: Inline, Internal, and External.

Inline CSS involves adding the style directly within an HTML tag using the ‘style’ attribute. It affects only the element it is applied to. Example:

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

Internal CSS uses a <style> tag in the <head> section of the HTML file. It applies styles to elements on that specific page. Example:

   <head>
     <style>
       p {
         color: red;
       }
     </style>
   </head>
   <body>
     <p>This text is red.</p>
   </body>

External CSS involves linking an external .css file to your HTML document. This is the most efficient method when styling large websites. Example:

CSS file (styles.css):

p {
  color: green;
}

HTML file:

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>This text is green.</p>
</body>

Example with Result Output

Let’s demonstrate a simple example using Internal CSS.

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: lightblue;
    }

    h1 {
      color: navy;
      margin-left: 20px;
    }
  </style>
</head>
<body>

<h1>Welcome to Our Website!</h1>
<p>This is a paragraph.</p>

</body>
</html>

Conclusion

CSS is essential for creating visually appealing websites that provide a better user experience. By separating the content (HTML) from the presentation (CSS), it makes website maintenance easier. As you progress in CSS, you’ll learn more about its capabilities and how to use it to create complex layouts and responsive designs.

Next, we will delve into CSS Syntax and Selectors, where you’ll learn the basics of writing CSS and selecting elements to style.

Your Cart

Index