notes-shivam

1-What is Css

3 min read

CSS – Cascading Style Sheets

1. Introduction to CSS

  1. CSS (Cascading Style Sheets) is used to style and format HTML elements.
  2. It separates the presentation layer from the structure layer (HTML).
  3. CSS controls layout, fonts, colors, spacing, borders, positioning, and more.
  4. It enhances reusability, consistency, and design flexibility across webpages.

2. Types of Style Sheets

1. Inline CSS

  • Style is written directly within an HTML element using the style attribute.
  • Affects only that specific element.

Syntax:

<p style="color: blue; font-size: 16px;">This is a paragraph.</p>

2. Internal/embedded CSS

  • Written within the <style> tag inside the <head> section of the HTML document.
  • Affects all matching elements in the same HTML page.

Syntax:

<head>
  <style>
    h1 {
      color: red;
      text-align: center;
    }
  </style>
</head>

3. External CSS

  • CSS code is written in a separate .css file.
  • Linked using the <link> tag in the HTML <head>.
  • Used for site-wide consistency and reusability.

Syntax (HTML):

<link rel="stylesheet" href="style.css">

Syntax (style.css):

body {
  background-color: #f0f0f0;
}

3. CSS Selectors

  1. Universal Selector (*) – Targets all elements.

    * {
  margin: 0;
  padding: 0;
}

  2. Element Selector – Targets specific elements.

    p {
  color: green;
}

  3. Class Selector (.) – Targets elements with a specific class.

    .highlight {
  background-color: yellow;
}

  4. ID Selector (#) – Targets a specific element with an ID.

    #header {
  font-size: 24px;
}

  5. Group Selector – Targets multiple elements.

    h1, h2, p {
  font-family: Arial;
}

  6. Descendant Selector – Targets nested elements.

    div p {
  color: blue;
}

4. Using Class and Span Tag

Using class Attribute:

<p class="highlight">This is a highlighted paragraph.</p>
.highlight {
  background-color: yellow;
}

Using span Tag:

  • Used for inline styling or formatting part of a text.
<p>This is a <span style="color: red;">red</span> word.</p>

5. Text Properties in CSS

PropertyDescription
colorSets the text color
text-alignAligns text (left, center, right)
font-sizeSets size of text
font-familySets font style
font-weightBoldness of text
text-decorationUnderline, overline, etc.
letter-spacingSpace between letters

Example:

p {
  font-size: 18px;
  text-align: justify;
  font-weight: bold;
}

6. Color and Background Properties

PropertyDescription
colorText color
background-colorBackground color
background-imageSets image as background
background-repeatRepeats image (repeat, no-repeat)
background-positionSets position of background image

Example:

body {
  background-color: lightblue;
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

7. Border and Shading

PropertyDescription
borderSets border around elements
border-styleSolid, dotted, dashed, etc.
border-widthThickness of the border
border-colorColor of the border

Example:

div {
  border: 2px solid black;
  padding: 10px;
}

8. Box and Block Properties

  1. Box Model consists of: margin, border, padding, and content.

  2. Block-level elements take the full width.

  3. Important properties:

    • width

    • height

    • margin

    • padding

    • display

    • overflow

Example:

.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  margin: 20px;
  border: 1px solid gray;
}

9. Positioning with CSS

Position ValueDescription
staticDefault (no special positioning)
relativePositioned relative to its normal position
absolutePositioned relative to nearest positioned parent
fixedFixed to the viewport (e.g., sticky headers)
stickyActs like relative until a scroll threshold

Example:

.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white;
}

10. Summary of Style Sheet Types

TypeApplied ToScopeReusability
InlineSingle elementVery limitedNo
EmbeddedSingle HTML fileOne page onlyNo
ExternalLinked HTML filesSite-wideYes

Let me know if you’d like a sample webpage using all these CSS features together or a practice exercise to reinforce these topics.

Graph View

Backlinks