Posted on November 21, 2024

CSS (Cascading Style Sheets)

CSS, or Cascading Style Sheets, is a stylesheet language used to define the look and layout of a webpage. It is a cornerstone technology of the web, alongside HTML and JavaScript, and allows you to control how HTML elements are displayed on a screen, paper, or in other media.

Key Features of CSS:

  1. Styling:
    • CSS applies styles like colors, fonts, margins, borders, padding, and more to HTML elements.
    • It can transform a plain HTML structure into a visually appealing design.
  2. Separation of Content and Design:
    • HTML is used for content structure, while CSS handles the presentation. This separation simplifies web design and maintenance.
  3. Responsive Design:
    • CSS enables responsive layouts using techniques like media queries, which adapt web pages to various screen sizes and devices.
  4. Selectors:
    • CSS uses selectors to target HTML elements. Common types include:
      • Element selector: p (targets all <p> tags)
      • Class selector: .classname (targets elements with a specific class)
      • ID selector: #idname (targets elements with a specific ID)
      • Universal selector: * (targets all elements)
  5. Box Model:
    • CSS treats each HTML element as a rectangular box consisting of four areas: content, padding, border, and margin.
  6. Cascade and Specificity:
    • Styles can “cascade” from multiple sources (e.g., external stylesheets, internal <style> tags, inline styles).
    • Specificity determines which styles are applied if there’s a conflict.

Types of CSS:

  1. Inline CSS: Defined directly within an HTML element using the style attribute.
    html
    <p style="color: blue;">This text is blue.</p>
  2. Internal CSS: Written within a <style> tag in the <head> section of an HTML document.
    html
    <style>
    p {
    color: blue;
    }
    </style>
  3. External CSS: Saved in a .css file and linked to an HTML file.
    html
    <link rel="stylesheet" href="styles.css">

Example:

HTML:

html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to CSS!</h1>
<p class="intro">CSS is awesome.</p>
</body>
</html>

CSS (styles.css):

css
h1 {
color: purple;
text-align: center;
}.intro {
font-size: 18px;
color: darkblue;
}

Advanced Features:

  • Animations: With @keyframes and animation properties.
  • Flexbox and Grid: Modern layout techniques for complex designs.
  • Custom Properties (Variables): Reusable values defined with --variable-name.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Posts

What is LARAVEL?

Nisa

November 21, 2024

Introduction to JavaScript

Nisa

November 21, 2024

CSS (Cascading Style Sheets)

Nisa

November 21, 2024

Categories: