HTML
JAVASCRIPT
CSS
PYTHON

CSS Basics

CSS Basics

CSS (Cascading Style Sheets) is a language used to style the appearance of HTML elements on a webpage. The three core components of CSS are selectors, properties, and values. Each plays a specific role in defining how elements are styled.

1. Selector

A CSS selector is used to target the HTML element or group of elements you want to style. It defines which element(s) the CSS rules should apply to.

Types of Selectors:

  • Element Selector: Targets HTML elements by their tag name.
  • Class Selector: Targets elements using the class attribute.
  • ID Selector: Targets a single element using the id attribute.
  • Group Selector: Combines multiple selectors to apply the same styles to different elements.

Example:

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <style>
          /* Element selector */
          p {
              color: blue;
          }

          /* Class selector */
          .highlight {
              background-color: yellow;
          }

          /* ID selector */
          #main-title {
              font-size: 24px;
              text-align: center;
          }

          /* Group selector */
          h1, h2 {
              font-family: Arial, sans-serif;
          }
      </style>
  </head>
  <body>
      <h1 id="main-title">Welcome to My Page</h1>
      <h2>About Us</h2>
      <p>This is a simple paragraph.</p>
      <p class="highlight">This paragraph has a yellow background.</p>
  </body>
  </html>

2. Property

A CSS property represents an aspect or characteristic of an HTML element that can be styled. Examples of CSS properties include:

  • color for text color.
  • font-size for text size.
  • margin for spacing outside an element.

Properties are defined in CSS rules to specify what aspect of the element should be styled.

Example:

  p {
    color: green; /* Changes the text color of paragraphs to green */
    font-size: 16px; /* Sets the font size of paragraphs to 16 pixels */
    margin: 10px; /* Adds a margin of 10 pixels around the paragraphs */
  }

3. Value

A CSS value is assigned to a property to define the specific style. Values can be keywords, units, or other predefined options depending on the property.

Example Values:

  • For the color property: red, blue, #ff5733, rgb(255, 87, 51).
  • For the font-size property: 12px, 1em, 150%.
  • For the margin property: 10px, auto, 5%.

Example:

  p {
    color: rgb(34, 139, 34); /* Text color is a shade of green */
    font-size: 18px; /* Font size is 18 pixels */
    margin: auto; /* Automatically centers the paragraph */
  }

Full Example Combining Selector, Property, and Value

  <!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* Applying styles to different elements */
        body {
            background-color: #f0f0f0; /* Light gray background */
            font-family: 'Verdana', sans-serif; /* Font for the entire page */
        }

        h1 {
            color: navy; /* Heading color */
            font-size: 32px; /* Font size for main heading */
            margin-bottom: 20px; /* Space below the heading */
        }

        p {
            color: #333; /* Text color */
            line-height: 1.6; /* Line spacing */
            margin: 10px 0; /* Vertical margin */
        }

        .highlight {
            background-color: yellow; /* Highlighted text background */
        }

        #footer {
            text-align: center; /* Center-aligns text */
            font-size: 14px; /* Small font size */
            color: gray; /* Gray text color */
        }
    </style>
</head>
<body>
    <h1>Learn CSS Basics</h1>
    <p>This is a regular paragraph.</p>
    <p class="highlight">This paragraph has a highlighted background.</p>
    <p id="footer">© 2024 CSS Tutorials</p>
</body>
</html>

Key Points

  • Selector defines the target element(s).
  • Property specifies the aspect of the element to style.
  • Value assigns a specific style to the property.

By combining these components effectively, you can create visually appealing and well-structured webpages.

Previous Next