CSS (Cascading Style Sheets)
Introduction to CSS
CSS stands for Cascading Style Sheets. It is a style sheet language used to control
the appearance and layout of web pages. CSS works together with HTML to make
websites visually attractive and user-friendly. While HTML provides the structure of
a webpage, CSS controls colors, fonts, spacing, positioning, animations, and
overall design.
CSS was introduced in 1996 by the World Wide Web Consortium to separate
webpage content from presentation. This separation makes websites easier to
design, maintain, and update.
Modern websites rely heavily on CSS to create responsive layouts that work across
desktops, tablets, and mobile devices.
Importance of CSS
Without CSS, webpages would appear as plain text and basic elements. CSS helps
developers:
• Improve website appearance.
• Create responsive designs.
• Enhance user experience.
• Maintain consistency across webpages.
• Reduce code duplication.
• Improve website loading efficiency.
Types of CSS
There are three ways to apply CSS.
1. Inline CSS
Inline CSS is applied directly inside an HTML element using the style attribute.
<p style="color: blue;">Welcome to CSS</p>
Advantages
• Quick styling for a single element.
Disadvantages
• Difficult to maintain for large websites.
2. Internal CSS
Internal CSS is written inside the <style> tag within the HTML document.
<head>
<style>
p{
color: blue;
</style>
</head>
Advantages
• Useful for styling a single webpage.
Disadvantages
• Cannot be reused across multiple pages.
3. External CSS
External CSS is stored in a separate .css file and linked to HTML.
<link rel="stylesheet" href="[Link]">
[Link]
p{
color: blue;
Advantages
• Easy maintenance.
• Reusable across multiple webpages.
• Recommended for large projects.
CSS Syntax
A CSS rule consists of a selector and declaration block.
h1 {
color: blue;
font-size: 30px;
Components
• Selector: Specifies the HTML element.
• Property: Defines what to style.
• Value: Specifies the style setting.
Selectors in CSS
Selectors are used to target HTML elements.
Element Selector
p{
color: red;
Targets all paragraph elements.
Class Selector
.note {
color: green;
HTML:
<p class="note">Important Note</p>
ID Selector
#header {
background-color: yellow;
}
HTML:
<div id="header">Welcome</div>
Colors in CSS
CSS allows different ways to specify colors.
h1 {
color: blue;
p{
color: #FF0000;
div {
color: rgb(255, 0, 0);
Common color formats:
• Color Names
• Hexadecimal Values
• RGB Values
• RGBA Values
Fonts and Text Styling
CSS provides various properties for text formatting.
p{
font-size: 18px;
font-family: Arial;
font-weight: bold;
text-align: center;
Common text properties:
• font-size
• font-family
• font-weight
• text-align
• text-decoration
Box Model
The CSS Box Model describes how elements are displayed.
div {
width: 200px;
padding: 20px;
border: 2px solid black;
margin: 10px;
Components of Box Model
1. Content
2. Padding
3. Border
4. Margin
Understanding the box model is essential for creating proper layouts.
Background Properties
CSS can style backgrounds using colors and images.
body {
background-color: lightblue;
body {
background-image: url("[Link]");
Other background properties:
• background-size
• background-repeat
• background-position
CSS Layout Techniques
Flexbox
Flexbox helps align and distribute elements efficiently.
.container {
display: flex;
justify-content: center;
align-items: center;
Benefits:
• Easy alignment.
• Responsive layouts.
• Flexible spacing.
Grid Layout
CSS Grid creates complex webpage layouts.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Benefits:
• Better control over rows and columns.
• Suitable for modern website designs.
Responsive Web Design
Responsive design allows websites to adapt to different screen sizes.
Media Query
@media screen and (max-width: 768px) {
body {
background-color: lightgray;
Benefits:
• Mobile-friendly websites.
• Better user experience.
• Improved accessibility.
CSS Animations
CSS can create animations without JavaScript.
div {
animation: move 2s infinite;
@keyframes move {
from {
margin-left: 0px;
to {
margin-left: 200px;
Applications:
• Interactive effects.
• Smooth transitions.
• Enhanced user experience.
Advantages of CSS
1. Improves website appearance.
2. Separates design from content.
3. Reduces code repetition.
4. Supports responsive design.
5. Faster website maintenance.
6. Provides animations and visual effects.
7. Works on all modern browsers.
8. Enhances user experience.
Applications of CSS
CSS is used in:
1. Website Design
2. Responsive Web Development
3. Mobile-Friendly Interfaces
4. E-Commerce Websites
5. Web Applications
6. Portfolio Websites
7. Blogs and News Portals
8. Educational Platforms
Conclusion
CSS is an essential technology for web development that controls the appearance
and layout of webpages. It works alongside HTML to create visually appealing,
responsive, and user-friendly websites. Through selectors, colors, fonts, layouts,
animations, and responsive design techniques, CSS enables developers to build
modern web interfaces. Learning CSS is a crucial step for anyone interested in web
development, as it transforms simple HTML pages into attractive and professional
websites. CSS continues to evolve with features such as Flexbox, Grid, and
animations, making it a powerful tool for designing modern web applications.
