CSS(CASCADING STYLE SHEET)

 CSS

CSS is the language we use to style a Web page.


What is CSS?

  • CSS stands for Cascading Style Sheets
  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • External stylesheets are stored in CSS files.


  • CSS Selectors


CSS selectors are used to "find" (or select) the HTML elements you want to style.


Basic Selectors

  • Type selector: targets elements by tag name

    css

    p { color: red; }

  • Universal selector: matches any element

    css

    * { margin: 0; }
``` :contentReference[oaicite:5]{index=5}

  • Class selector: targets elements by class

    css

    .myClass { text-decoration: underline; }
``` :contentReference[oaicite:7]{index=7}

  • ID selector: targets a unique element by id

    css

    #myId { font-family: monospace; }
``` :contentReference[oaicite:9]{index=9}

🔗 Combinators (show relationships between selectors)

  • Descendant ( ): matches any nested element

    css

    div p { ... }
``` :contentReference[oaicite:11]{index=11}

  • Child (>): matches direct children

    css

    ul > li { ... }
``` :contentReference[oaicite:13]{index=13}

  • Adjacent sibling (+): next sibling only

    css

    h1 + p { ... }
``` :contentReference[oaicite:15]{index=15}

  • General sibling (~): any sibling after an element



Selector Matches Example
E + F Only the immediate sibling following E h2 + p ➝ styles only the first <p> after <h2>
E ~ F All siblings after E at the same level h2 ~ p ➝ styles every <p> that comes later in the same parent



###

There are three main ways to add CSS styles to an HTML file:

1. ✅ Inline styles

Apply styles directly in the HTML tag using the style attribute:

<p style="color: blue; font-weight: bold;">
  This text is blue and bold.
</p>

  • Best for quick one-off styling.

  • Not recommended for larger projects—you can quickly end up with hard-to-maintain code.

2. 🧩 Internal (or Embedded) CSS

Place your styles inside a <style> tag in the HTML document’s <head> section:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
  <style>
    header {
      background-color: #f0f0f0;
      padding: 20px;
    }
    
    header h1 {
      color: #333;
    }
    
    .highlight {
      font-style: italic;
      color: crimson;
    }
  </style>
</head>
<body>
  <header>
    <h1>Welcome!</h1>
  </header>
  <p class="highlight">This is an emphasized paragraph.</p>
</body>
</html>

  • Good for small to medium-sized projects or temporary tweaks.

  • Keeps HTML and CSS in one file, but can get messy with lots of styles.

3. 🌐 External CSS

Best practice for most projects. Create a separate .css file and link it in your HTML:
styles.css:

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.btn-primary {
  display: inline-block;
  background: #28a745;
  color: white;
  padding: 10px 15px;
  text-decoration: none;
  border-radius: 4px;
}

.btn-primary:hover {
  background: #218838;
}

index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Site</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Hello, World!</h1>
    <a href="#" class="btn-primary">Click Here</a>
  </div>
</body>
</html>

  • Keeps styling separate from content—clean and easy to maintain.

  • Allows reuse of styles across multiple HTML pages (just include the same CSS file).



CSS COLOR PROPERTY

The CSS color property is used to define the foreground color of an element’s text content, including text decorations and currentColor contexts w3docs.com+13w3.org+13w3.org+13. Here’s a detailed breakdown:

🎨 What color Does

  • Sets the color of text, underlines, list markers, and other inline decorations.

  • Inherited by default: if you set it on a parent (e.g., body), all descendants will use that color unless overridden w3schools.com+4w3docs.com+4reddit.com+4.

🎨 Accepted Color Formats

The color property accepts all types of CSS color values :

  1. Named keywords

    css

    color: red;

  2. Hex codes

    css

    color: #00FF00;   /* full */
color: #0F0;      /* shorthand */

  3. RGB / RGBA

    css
    color: rgb(255, 0, 0);
color: rgba(0, 128, 255, 0.5); /* includes transparency */

BACKGROUND COLOR PROPERTY

The CSS background-color property lets you set the background color of an HTML element — this includes its content area, padding, and border (but not the margin)

body {
  background-color: #92a8d1;
}
h1 {
  background-color: rgb(249, 201, 16);
}
div {
  background-color: lightblue;
}


TEXT PROPERTY

Here are the key CSS text properties used to style and control the layout of textual content:

🧠 Main Text Properties

1. color

Sets the text color. Accepts named colors, hex, RGB(A), HSL(A), etc., and is inherited by child elements 

Example:

p { color: #333; }
a { color: rgb(0, 102, 204); }

2. font-family

Defines one or more font families and generic fallbacks (e.g., serif, sans-serif). Browsers use the first available font in the list 

body { font-family: "Open Sans", Arial, sans-serif; }

3. font-size, font-weight, font-style

font-size

Example:

h1 { font-size: 2em; font-weight: 700; }
em { font-style: italic; }

4. line-height

Controls spacing between text lines. Can be unitless, length, or percentage. Inherited 

Example:

p { line-height: 1.5; }

5. text-align

left

Example:

h2 { text-align: center; }

6. text-decoration

Adds or removes decorations (underline, overline, line-through). Non-inherited 

Example:

a { text-decoration: none; }
del { text-decoration: line-through; }

7. text-transform

none

Example:

h1 { text-transform: uppercase; }

8. text-indent

Indents the first line of a block. Accepts length or percentage values. Inherited 

Example:

p { text-indent: 2em; }

9. letter-spacing, word-spacing

letter-spacing

Example:

h1 { letter-spacing: 0.05em; }
p { word-spacing: 0.2em; }

10. text-shadow

Adds a shadow behind text. Values: offset‑x, offset‑y, blur radius, and color 

Example:

h2 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

11. white-space, text-overflow, text-justify

white-space

Example:

p.no-wrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

📋 Summary Table

Property Purpose
color Text color
font-* (family, size, weight, style) Font properties
line-height Vertical spacing between lines
text-align Horizontal alignment
text-decoration Underline/overline/strike-through
text-transform Change letter casing
text-indent First-line indentation in blocks
letter-spacing Character spacing
word-spacing Word spacing
text-shadow Add shadows to text
white-space Manage wrapping, breaks, and spaces
text-overflow Handle overflowed text with ellipsis
text-justify Justification method for justified text



TEXT ALIGN

<div style="width:300px; border:1px solid #ccc; padding:10px;">
  <p style="text-align: left;">Left aligned text</p>
  <p style="text-align: center;">Centered text</p>
  <p style="text-align: right;">Right aligned text</p>
  <p style="text-align: justify;">
    This is justified text, which expands the spacing between words so that both sides of the text block line up neatly.
  </p>
</div>


FONT WEIGHT

/* <font-weight-absolute> keyword values */
font-weight: normal;
font-weight: bold;

/* <font-weight-absolute> numeric values [1,1000] */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /* normal */
font-weight: 500;
font-weight: 600;
font-weight: 700; /* bold */
font-weight: 800;
font-weight: 900;

/* Keyword values relative to the parent */
font-weight: lighter;
font-weight: bolder;

/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: revert;
font-weight: revert-layer;
font-weight: unset;



text decoration


/* Shorthand combining all components */
selector {
  text-decoration: underline wavy red 2px;
}

/* Longhand equivalents */
selector {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
  text-decoration-thickness: 2px;
}


Component Usage Example
text-decoration-line underline / overline / line-through / combos
text-decoration-style solid, dotted, dashed, double, wavy
text-decoration-color Any CSS color (e.g., red, #f00, rgba(…))
text-decoration-thickness 2px, 0.1em, etc.
Shorthand usage text-decoration: underline wavy red 2px;




line height & letter spacing



PSEUDO CLASS

/* Any button over which the user's pointer is hovering */
button:hover {
  color: blue;
}


/* Checkbox element, when checked */
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 3px hotpink;
/* Active paragraphs */
p:active {
  background: #eee;
}
PSEUDO ELEMENT
CSS pseudo-elements are powerful tools that let you style or insert parts of elements that aren’t explicitly present in the HTML. They use a double-colon syntax (::) and target sub-elements like the first letter, line, markers, or generated content


Comments

Post a Comment

Popular posts from this blog

html

 HTML HTML  (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation ( CSS ) or functionality/behavior ( JavaScript ).                                                                        "Hypertext" refe      rs to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web. https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet <!DOCTYPE html> <html> <head>   ...
Read more

daily notes as sikh

date:-03 nov. 25   abhi vah samay hai ,jha sir neeche karke mehnat krni chahiye. kyu ki yah samay agar beet jayega , regret rhega , today i am heard a story ,in which a man reach at the top and near see an old man  stay .the old man is happy and satisfied........  https://youtube.com/shorts/k-tZW-vvKkk?si=U0XWEXwDWZVAo4k5  
Read more

AI/ML

AI (Artificial Intelligence) का मतलब है कृत्रिम बुद्धिमत्ता । यह ऐसी तकनीक है जिसमें कंप्यूटर या मशीन को इंसानों की तरह सोचने, सीखने और निर्णय लेने की क्षमता दी जाती है । 🤖 AI क्या करता है? AI सिस्टम डेटा से सीखते हैं और उसी के आधार पर काम करते हैं, जैसे: समस्या हल करना पैटर्न पहचानना निर्णय लेना भाषा समझना आसान उदाहरण Voice Assistant – जैसे Google Assistant , Siri आपकी आवाज़ समझकर जवाब देते हैं। Recommendation System – जैसे YouTube या Netflix आपकी पसंद के अनुसार वीडियो या मूवी सुझाते हैं। Self-Driving Cars – जैसे Tesla की कारें सड़क, ट्रैफिक और सिग्नल को पहचानकर खुद ड्राइव कर सकती हैं। AI के मुख्य प्रकार Narrow AI – एक ही काम में एक्सपर्ट (जैसे face recognition) General AI – इंसान की तरह हर काम करने वाली AI (अभी पूरी तरह विकसित नहीं) AI किन तकनीकों से बनता है Machine Learning Deep Learning Natural Language Processing Computer Vision AI कहाँ-कहाँ उपयोग होता है शिक्षा 📚 हेल्थकेयर 🏥 बैंकिंग 💰 खेती 🌾 रोबोटिक्स 🤖 साइबर सिक्योरिटी 🔐 ✅ सरल शब्दों में: AI = ऐसी मशीनें जो इंसा...
Read more