Education
E-Learning
CSS Basics: The Art of Styling and Designing Web Pages
by sabari on | 2025-01-14 21:14:26 Last Updated by sabari on | 2025-01-16 18:50:44
Share: Facebook |
Twitter |
Whatsapp |
Linkedin Visits: 18
1. Introduction to CSS: Styling the Web
CSS (Cascading Style Sheets) is a
language used to style and design the layout of web pages. It works alongside
HTML to make websites visually appealing. While HTML provides the structure,
CSS defines the style, such as colors, fonts, and layouts.
Why CSS is Important in Web
Development
- CSS improves the look and feel of web pages.
- It ensures responsive designs that adapt to different
devices.
- CSS enables reusability, as one stylesheet can style
multiple pages.
Example of CSS in Action
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>This is a styled webpage.</p>
</body>
</html>
2. Understanding CSS Selectors
CSS selectors target specific HTML
elements to apply styles. Types of selectors include:
- Element Selector:
Targets all elements of a type.
- Class Selector:
Targets elements with a class.
.highlight {
background-color: yellow;
}
- ID Selector:
Targets an element with a unique ID.
#header {
font-size: 24px;
}
- Group Selector:
Combines multiple selectors.
h1, h2, p {
margin: 10px;
}
- Pseudo-Selector:
Targets specific states.
a:hover {
color: green;
}
3. CSS Syntax Explained
A CSS rule consists of:
- Selector:
The element to style.
- Property:
The aspect of the element to style.
- Value:
The setting for the property.
Example
p {
color: blue; /* Sets text color */
font-size: 16px; /* Sets text size */
}
4. The Box Model in CSS
The CSS box model consists of:
- Content:
The actual content.
- Padding:
Space between content and the border.
- Border:
The edge around the padding.
- Margin:
Space outside the border.
Example
div {
width: 200px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}
5. Inline, Internal, and External
CSS
- Inline CSS:
Styles written within an element.
<p style="color: red;">Styled paragraph.</p>
- Internal CSS:
Styles written inside a <style> tag.
<style>
h1 {
color: green;
}
</style>
- External CSS:
Styles in a separate .css file.
<link rel="stylesheet" href="styles.css">
Example of External CSS
body {
background-color: #e0e0e0;
}
<link rel="stylesheet" href="styles.css">
Disclaimer
The information provided is for
educational purposes only. While every effort is made to ensure accuracy,
readers are encouraged to practice and verify concepts independently.