Scribd
Upload
1 views6 pages

Css Intro

CSS (Cascading Style Sheets) is essential for styling web pages, controlling aspects like colors, fonts, and layout. It separates design from structure, allowing for attractive and consistent styling while saving time through style reuse. CSS can be applied in three ways: inline, internal, and external, with external CSS being the best practice for real websites.

Uploaded by

zem091415
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
1 views6 pages

Css Intro

CSS (Cascading Style Sheets) is essential for styling web pages, controlling aspects like colors, fonts, and layout. It separates design from structure, allowing for attractive and consistent styling while saving time through style reuse. CSS can be applied in three ways: inline, internal, and external, with external CSS being the best practice for real websites.

Uploaded by

zem091415
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

Introduction to CSS – Student Notes

1. What is CSS?
CSS (Cascading Style Sheets) is used to style and design web pages.
While HTML creates the structure, CSS controls:
✔ Colors
✔ Fonts
✔ Layout
✔ Spacing
✔ Visual appearance

2. Why Do We Use CSS?


CSS helps to:
• Make websites attractive
• Separate design from structure
• Maintain consistent styling
• Save time by reusing styles

3. How CSS Works


CSS applies styles using rules.
Example:
h1 {

color: blue;

Explanation:
• h1 → Selector

• color → Property

• blue → Value

This is called a CSS Rule.


4. CSS Rule Structure
Every CSS rule has:
selector {

property: value;

Example:
p {

font-size: 18px;

5. Types of CSS

1️⃣ Inline CSS


Written inside an HTML tag.
Example:

✅
<h1 style="color:red;">Hello</h1>

❌ Used for quick styling


Not recommended for large projects

2️⃣ Internal CSS


Written inside <style> tag in HTML.
Example:
<style>

h1 {

color: blue;

✅
</style>

Good for single-page styling

3️⃣ External CSS ✅ (Most Important)


Written in a separate .css file.
Example:
HTML File
<link rel="stylesheet" href="[Link]">

CSS File ([Link])


h1 {

color: green;

✅
}

✅ Best practice
Used in real websites

6. Common CSS Properties

Text Color
color: red;

Background Color
background-color: yellow;

Font Size
font-size: 20px;

Text Alignment
text-align: center;

Border
border: 2px solid black;

7. Selectors in CSS
Selectors choose elements to style.

Element Selector
p {

color: blue;
}

Styles all paragraphs.

Class Selector
HTML:
<p class="text">Hello</p>

CSS:
.text {

color: red;

ID Selector
HTML:
<p id="title">Hello</p>

CSS:
#title {

color: green;

8. Important CSS Concepts


✔ CSS controls design
✔ Uses selectors & properties
✔ External CSS is best practice
✔ Classes & IDs help target elements

Basic Example
HTML
<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="[Link]">

</head>
<body>

<h1>Welcome</h1>

<p>This is CSS example.</p>

</body>

</html>

CSS ([Link])
h1 {

color: blue;

text-align: center;

p {

color: black;

font-size: 18px;

Practice Exercises
Exercise 1
Create a page with:
✔ Heading
✔ Paragraph
✔ Apply text color

Exercise 2
Apply:
✔ Background color
✔ Font size
Exercise 3
Use:
✔ Class selector
✔ ID selector

You might also like