CSS Tutorial



CSS INTRODUCTION


Introduction to CSS

CSS, or Cascading Style Sheets, is a stylesheet language used to control the presentation of a web page, such as layout, colors, fonts, and spacing. It enhances the visual presentation of HTML by allowing you to apply different styles to various elements on the page.

Why is CSS Important?

CSS plays a vital role in making websites more visually appealing and user-friendly. Without CSS, web pages would look plain and unorganized, often displaying just text without any structure. CSS allows developers to apply styles like fonts, colors, borders, and positioning, making the user experience much better.

How CSS Works

CSS works by selecting HTML elements and applying styles to them. It uses selectors to target elements, and declarations to apply styles.

  • Selectors: These are used to select the HTML elements you want to style.
  • Properties: These define the aspect of the element that you want to style (e.g., color, font-size, margin).
  • Values: The value defines how the property should be applied (e.g., red for color, 16px for font-size).

Basic CSS Syntax

CSS syntax consists of a selector, followed by a set of curly braces {}. Inside the braces, you define properties and values as pairs, separated by a colon :.

    selector {
      property: value;
    }

Example of CSS Code

Here’s an example of how CSS can be used to style a heading:

    h1 {
      color: #007BFF; /* Blue color for the heading */
      font-size: 32px; /* Size of the font */
      text-align: center; /* Center-align the text */
    }

Types of CSS

There are three ways to apply CSS to a web page:

  • Inline CSS: Styles are applied directly to an HTML element using the style attribute.
  • Internal CSS: Styles are defined within the <style> tag in the <head> section of an HTML document.
  • External CSS: Styles are defined in an external .css file and linked to the HTML document using the <link> tag.

Example: Internal CSS

Here’s an example of how you can include internal CSS within an HTML document:

    <html>
      <head>
        <style>
          body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
          }
        </style>
      </head>
      <body>
        
Welcome to CSS!

        
This page is styled using internal CSS.

      </body>
    </html>

Conclusion

CSS is an essential part of web design, allowing developers to control the presentation of content on a web page. With CSS, you can change colors, fonts, layouts, and much more to create visually engaging websites. Understanding the basic syntax and structure of CSS is the first step toward mastering web design.

Quick Tip:

Start experimenting with CSS by changing the styles of simple HTML elements on your page. This will give you a hands-on understanding of how CSS affects the visual appearance of your content!


🌟 Enjoyed Learning with Us?

Help others discover Technorank Learning by sharing your honest experience.
Your support inspires us to keep building!

Leave a Google Review