CSS


 

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation of web pages, including layout, colors, fonts, and spacing. CSS allows you to separate content (HTML) from its visual design, making it easier to maintain and apply consistent styling across multiple pages.

Basic Syntax of CSS:

CSS uses selectors to select HTML elements and apply styles to them. The basic syntax is as follows:

css
selector {
  property: value;
}
  • Selector: This defines which HTML element(s) the rule applies to.
  • Property: This is the aspect of the element you want to change (e.g., color, font-size).
  • Value: This is the specific style or effect you want to apply (e.g., red, 16px).

Example of CSS in Action

Let's start with a simple example of styling HTML elements with CSS.

HTML:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 class="main-title">Welcome to My Website</h1>
    <p id="intro">This is an example of how to use CSS to style your website.</p>
    <button class="btn primary-btn">Click Me</button>
</body>
</html>

CSS (styles.css):

css
/* Styling the main title */
.main-title {
  font-size: 36px;
  color: navy;
  text-align: center;
}

/* Styling the paragraph with an ID selector */
#intro {
  font-size: 18px;
  color: darkgray;
  padding: 10px;
}

/* Styling buttons using a class */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

/* Styling a specific type of button */
.primary-btn {
  background-color: #007bff;
  color: white;
}

.primary-btn:hover {
  background-color: #0056b3;
}

Explanation:

  1. Class Selector (.class-name): In this example, .main-title and .btn are class selectors. These styles are applied to any HTML element with the class="main-title" or class="btn" attribute.

    Example:

    html
    <h1 class="main-title">Welcome to My Website</h1>
<button class="btn">Click Me</button>

  2. ID Selector (#id-name): The #intro selector targets a specific element with the ID attribute of "intro". IDs should be unique on a page.

    Example:

    html
    <p id="intro">This is an example of how to use CSS to style your website.</p>

  3. Pseudo-class (:hover): This targets an element in a specific state. For example, .primary-btn:hover changes the background color of the button when the user hovers over it.

More Examples of CSS:

  1. Styling Lists:

    css
    ul {
  list-style-type: square;
  padding-left: 20px;
}

li {
  font-size: 14px;
  color: green;
}

    HTML:

    html
    <ul>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ul>

  2. CSS for a Grid Layout:

    css
    .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.box {
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

    HTML:

    html
    <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
</div>

CSS for Responsiveness:

You can also use CSS to make your website responsive using media queries:

css
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

This will make the grid layout adapt to smaller screen sizes by showing one column instead of two when the screen width is less than 768 pixels.