Scribd
Upload
4 views

Complete CSS Detailed Notes

Uploaded by

tejta1111
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Complete CSS Detailed Notes

Uploaded by

tejta1111
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

CSS (Cascading Style Sheets) - Detailed Notes

1. What is CSS?

CSS stands for Cascading Style Sheets. It is used to control the layout and presentation of HTML

elements.

Advantages:

- Saves time with reusable styles

- Makes site maintenance easier

- Offers consistent design

- Reduces file size and load time

2. Types of CSS

Type Description Where to Use Example


Inline Written inside an HTML tag Use `style` attribute inside the<p
tag
style='color:red;'>Hello</p>

Internal Inside <style> in <head> For a single HTML document<style>p {color:blue;}</style>

External Separate .css file Linked with <link> tag <link rel='stylesheet' href='style.css'>

3. CSS Syntax

selector {
property: value;
}

h1 {
color: green;
font-size: 30px;
}

4. CSS Selectors

Selector Syntax Description Effect


Universal * All elements Applies to all HTML tags

Element p Specific tag All <p> tags


CSS (Cascading Style Sheets) - Detailed Notes

Class .class Class selector Elements with class

ID #id ID selector One element with that ID

Group h1, h2 Multiple elements Styles both h1 and h2

Descendant div p Nested elements <p> inside <div>

Child ul > li Direct child Immediate <li> in <ul>

Pseudo-Class a:hover On user action Hover effect

Pseudo-Element p::first-line Part of element First line styled

5. Common CSS Properties

Property Example Description Effect


color color: red; Text color Red text

background-color background-color: yellow; Background Yellow bg

font-size font-size: 18px; Text size Larger/smaller text

font-family font-family: Arial; Font type Different look

text-align text-align: center; Text alignment Center text

border border: 1px solid black; Border style Box border

padding padding: 10px; Inside space Space inside element

margin margin: 15px; Outside space Space around element

width/height width: 100px; Size Fix element size

display display: none; Visibility Hide element

position position: relative; Placement Position control

box-shadow box-shadow: 0 0 5px gray; Box shadow 3D effect

text-decoration text-decoration: underline; Text line Underline text

6. CSS Box Model

The Box Model: Content -> Padding -> Border -> Margin

div {
margin: 10px;
padding: 20px;
border: 2px solid black;
CSS (Cascading Style Sheets) - Detailed Notes

7. Linking External CSS File

<head>
<link rel='stylesheet' href='style.css'>
</head>

/* style.css */
body {
background-color: lightblue;
font-family: Verdana;
}

8. CSS Example with Result

<p class='highlight'>Hello CSS!</p>

.highlight {
color: white;
background-color: green;
padding: 10px;
border-radius: 8px;
}

Result: A white text on green background with padding and rounded corners.

You might also like