Class XII CSS

1.4 Cascading Style Sheets in HTML5

✅ What is CSS?

  • CSS stands for Cascading Style Sheets.

  • CSS is used to style HTML elements – how they look on screen, paper, or other media.

  • It helps to control layout of multiple web pages with just one file.

  • Main advantage: Separates content (HTML) from presentation (CSS).

🧩 CSS Syntax

selector {
  property1: value1;
  property2: value2;
}

  • Selector: The HTML element to style (e.g., h1, p, body)

  • Declaration Block: Contains one or more property: value pairs.

Example:

h1 {
  color: yellow;
  font-size: 11px;
}

  • color and font-size are properties

  • yellow and 11px are their values

📌 Types of CSS

1. Inline CSS

  • Written inside HTML tag using the style attribute.

  • Affects one specific element only.

<p style="color: blue;">Hello CSS</p>

2. Internal (Embedded) CSS

  • Written inside <style> tag in the <head> section of HTML.

  • Affects only that page.

<head>
  <style>
    h1 { color: red; }
  </style>
</head>

3. External CSS

  • Written in a separate .css file.

  • Use <link> tag in <head> to link the CSS.

  • Can style multiple pages at once.

Example:

style.css

h1 {
  color: navy;
  margin-left: 20px;
}

HTML File:

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

🎨 Common CSS Properties

Property Use Example
color Text color h1 { color: maroon; }
background-color Page background color body { background-color: yellow; }
font-weight Boldness of text p { font-weight: 300; }
font-style Italic or oblique text p { font-style: italic; }
text-decoration Underline, strike-through etc. p { text-decoration: underline; }
text-align Align text (left, right, center) h1 { text-align: center; }
font-family Font type p { font-family: arial; }
font-size Font size p { font-size: 10px; }
letter-spacing Space between letters h1 { letter-spacing: 5pt; }
padding Space around content h1 { padding: 30px; }
border Adds a border h1 { border: double; }
background-image Adds background image body { background-image: url('bg.jpg'); }
background-repeat Repeats background image or not background-repeat: no-repeat;
margin-left Left margin space h1 { margin-left: 10px; }

📚 Summary:

  • CSS helps in styling HTML pages easily and efficiently.

  • It has three types: Inline, Internal, and External.

  • External CSS is most efficient for large websites.

  • Use selectors and properties to control design.



📘 CSS Selectors & Properties –

🔹 1. ID Selector

  • Definition: Selects an element by its unique id attribute.

  • Syntax: #idName { CSS rules }

  • Note: ID should be unique in the HTML document.

<p id="para1">Hello Students</p>
<style>
#para1 { text-align: center; color: blue; }
</style>

🔹 2. Class Selector

  • Definition: Selects elements with a specific class attribute.

  • Syntax: .className { CSS rules }

  • Note: Can apply to multiple elements; should not start with a number.

<h1 class="intro">Blue heading</h1>
<p class="intro">Blue paragraph</p>
<style>
.intro { text-align: center; color: blue; }
</style>

✔️ Class for Specific Element

<p class="intro">Only this paragraph is styled</p>
<style>
p.intro { text-align: center; color: blue; }
</style>

🔹 3. Universal Selector

  • Definition: Applies to all HTML elements.

  • Syntax: * { CSS rules }

<style>
* { color: green; font-size: 20px; }
</style>

🔹 4. Group Selector

  • Definition: Applies same CSS to multiple elements.

  • Syntax: h1, h2, p { CSS rules }

<style>
h1, h2, p { text-align: center; color: blue; }
</style>

📘 CSS Positioning

🔹 Syntax:

selector {
  position: value;
  top: value;
  left: value;
  bottom: value;
  right: value;
}

🔹 Types of Positioning:

  1. Static (default): Not affected by top, left, etc.

  2. Fixed: Stays fixed on screen even during scroll.

    <p class="fixed">Fixed Text</p>
<style>
.fixed { position: fixed; top: 50px; right: 5px; color: blue; }
</style>

  3. Relative: Moves relative to its original position.

  4. Absolute: Positioned from top-left of the page/screen.

    <h1 class="first">Heading 1</h1>
<h2>Heading 2</h2>
<style>
.first { position: relative; top: -10px; right: -10px; }
h2 { position: absolute; top: 150px; left: 100px; }
</style>

📘 Float Property

🔹 Values:

  1. float: left;

  2. float: right;

  3. float: none; (default)

<h2 class="float-left">Left</h2>
<h2 class="float-right">Right</h2>
<style>
.float-left { float: left; background-color: gold; }
.float-right { float: right; background-color: gold; }
</style>

📘 Display Property

🔹 Syntax:

selector {
  display: value;
}

🔹 Values:

  1. inline – No line break, flows in line.

  2. block – Starts on new line, takes full width.

  3. inline-block – Like inline, but supports width & height.

  4. none – Hides the element.

<p style="display: inline;">Hello</p>
<a style="display: block;">Visit</a>

📘 Semantic Tags with CSS Example

<header>
  <h1>HTML5 Semantics</h1>
</header>
<nav>
  <a href="#">Home</a>
</nav>
<aside>
  <h1>Sidebar</h1>
</aside>
<section>
  <p>Main content</p>
</section>
<article>
  <p>Blog post</p>
</article>
<footer>
  <p>Footer content</p>
</footer>

<style>
header { background: pink; height: 20%; }
nav { background: skyblue; height: 20%; }
aside { background: grey; float: right; width: 40%; }
section { background: lightyellow; float: left; width: 60%; }
article { background: violet; width: 60%; }
footer { background: orange; height: 10%; }
</style>

✅ Summary Chart:

Selector / Property Symbol / Use
ID Selector #idName (Unique element)
Class Selector .className (Multiple elements)
Universal Selector * (All elements)
Grouping Selector h1, p, h2
Positioning static, fixed, relative, absolute
Float left, right, none
Display inline, block, none, inline-block

📘 1.5 Ordered List or Numbered List

  • The <ol> tag is used to create an ordered (numbered or lettered) list.

  • Each item in the list is defined using the <li> tag.

✅ Syntax:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>

📌 Attributes of <ol> Tag

Attribute Values Description
type "1" (default), "a", "A", "i", "I" Sets numbering format (number, lowercase/uppercase letters, Roman numerals)
start Number Starts the list from a specific number
reversed reversed Displays the list in reverse order

💡 Example 1 – Simple Ordered List

<ol>
  <li>Basics of IT</li>
  <li>HTML 5</li>
  <li>PostgreSQL</li>
</ol>

💡 Example 2 – Start from 50

<ol start="50">
  <li>Basics of IT</li>
  <li>HTML 5</li>
  <li>PostgreSQL</li>
</ol>

💡 Example 3 – Reversed Order

<ol reversed>
  <li>Basics of IT</li>
  <li>HTML 5</li>
  <li>PostgreSQL</li>
</ol>

📘 1.6 Unordered List or Bulleted List

  • The <ul> tag is used to create an unordered (bulleted) list.

  • Each item in the list is defined using the <li> tag.

✅ Syntax:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

📌 Styling List Markers with CSS

CSS Style Output Marker
list-style-type: disc; ● (default)
list-style-type: circle; ◯
list-style-type: square; ■
list-style-type: none; No marker

⚠️ Note: In HTML5, use CSS style instead of the type attribute.

💡 Example – Unordered List with Different Markers

<ul style="list-style-type:circle;">
  <li>Basics of IT</li>
  <li>HTML 5</li>
  <li>PostgreSQL</li>
</ul>

📘 1.7 Definition List

  • The <dl> tag is used to define a definition list.

  • <dt> defines the term.

  • <dd> defines the definition.

✅ Syntax:

<dl>
  <dt>HTML</dt>
  <dd>A markup language for creating web pages.</dd>
</dl>

💡 Example:

<dl>
  <dt><b>Web</b></dt>
  <dd>The part of the Internet that contains websites and web pages</dd>

  <dt><b>HTML</b></dt>
  <dd>A markup language for creating web pages</dd>

  <dt><b>CSS</b></dt>
  <dd>A technology to make HTML look better</dd>
</dl>

📘 1.8 Multi-level (Nested) Lists

  • A nested list is a list within another list.

  • Can be a combination of <ol> and <ul>.

💡 Example – Nested Ordered + Unordered List

<ol>
  <li>Introduction to IT</li>
  <li>Introduction to DBMS</li>
  <ul style="list-style-type:circle;">
    <li>Definition of DBMS</li>
    <li>Applications of DBMS</li>
    <li>Advantages of DBMS</li>
  </ul>
  <li>PostgreSQL</li>
</ol>

💡 Example – Multi-level List

<ul>
  <li>Daily computing</li>
  <li>Web design</li>
  <ol>
    <li>HTML 5</li>
    <li>Hyperlink</li>
    <li>Inserting Images</li>
  </ol>
  <li>JavaScript</li>
  <ul style="list-style-type:circle;">
    <li>Conditional structure</li>
    <ul style="list-style-type:square;">
      <li>If statement</li>
      <li>If else statement</li>
      <li>Case statement</li>
    </ul>
    <li>Loop statement</li>
  </ul>
</ul>

✅ Summary

List Type Tag Used Description
Ordered List <ol> Numbered or lettered list
Unordered List <ul> Bulleted list
Definition List <dl> Term-definition pair
Nested List Combined Lists inside another list


Comments

Post a Comment

Popular posts from this blog

XII Science Journal XII Commerce Journal Mental Ability Grade 8 Foundation Batch XI Ch 3 Notes Class XII CSS Notes Introduction to Client-Side Scripting XI Internal Assessment 2024-25 Class XI IT Notes HTML MCQ Test Basic Computer MCQ Test Final Commerce SOP Allotment Chapter: E-Commerce and E-Governance MCQ Test XII Science Textbook E-Commerce and E-Governance (Que and Ans) Introduction to SEO (Que and Ans) XII Ch.5 Server-Side Scripting (PHP) Click here for Notes Click here for PHP Programs Chapter 1: Basics of Information Technology (Class XI) Chapter 2: Introduction to DBMS IT DEMO EXAM  Python Libraries
Read more