CSS
What is CSS?
CSS stands for Cascading Style Sheets. It is used to control the presentation, layout, and design of HTML elements on a webpage. While HTML structures the content, CSS makes it visually appealing.
With CSS, you can control:
- Colors
- Fonts
- Spacing
- Layouts
- Animations
- Responsiveness of web pages
CSS plays a major role in modern web development, making websites attractive and user-friendly.
Why Learn CSS?
CSS is essential for every web developer because:
- It improves website design and user experience
- It helps in creating responsive websites
- It reduces repetition in HTML code
- It allows separation of content and design
- It supports animations and modern UI effects
Without CSS, websites would look plain and unprofessional.
CSS Syntax
CSS is written using a simple syntax:
selector {
property: value;
}
Example:
h1 {
color: blue;
font-size: 30px;
}
- Selector → HTML element (h1, p, div)
- Property → style attribute (color, margin, padding)
- Value → assigned setting (blue, 20px)
Types of CSS
1. Inline CSS
Applied directly inside HTML elements.
<p style="color: red;">This is a paragraph.</p>2. Internal CSS
Written inside <style> tag in HTML file.
}
3. External CSS
Written in a separate .css file.
<link rel="stylesheet" href="style.css">CSS Selectors
Selectors are used to target HTML elements.
1. Universal Selector
* { margin: 0;
}p { color: blue;
}.box { background-color: yellow;
}#header { font-size: 20px;
}h1, h2, p { color: black;
}CSS Colors
CSS supports multiple color formats:
Named Colors
color: red;
HEX Colors
color: #ff0000;
RGB Colors
color: rgb(255, 0, 0);
RGBA Colors
color: rgba(255, 0, 0, 0.5);
CSS Fonts
p {
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: bold;
}(255, 0, 0, 0.5);