When learning Python, you will work with different types of data, such as numbers, text, decimal values, and Boolean values. Python provides several built-in functions to help you work with these data types. One of the most useful functions is the type() function . The type() function tells you the data type of a value or variable. It helps you understand what kind of data Python is working with and can make debugging your programs easier. For example, consider these variables: age = 20 price = 99.50 name = "Rahul" is_student = True Although all four variables store data, their data types are different. Python allows us to check these types using type() . Let's understand how it works with simple examples. 1. What Is the type() Function in Python? The type() function is a built-in Python function that returns information about the type of an object. In beginner-level programming, you can use it to check whether a value is an integer, a floating-point number, a string,...
Until now, we have learned how HTML creates the structure of a webpage. However, HTML alone cannot make webpages attractive. A webpage made only with HTML looks plain and simple.
To improve appearance, colors, fonts, layouts, spacing, and responsiveness, we use CSS (Cascading Style Sheets).
HTML creates the structure, while CSS provides the design.
In this article, we will learn:
What CSS is
Why CSS is needed
Advantages of CSS
Types of CSS
CSS syntax
CSS selectors
Colors and backgrounds
Fonts and text styling
Borders and margins
Practical examples
What is CSS?
CSS stands for Cascading Style Sheets.
It is a stylesheet language used to describe the appearance of HTML elements.
CSS controls:
Colors
Fonts
Layouts
Backgrounds
Borders
Spacing
Animations
HTML Without CSS
Example:
<!DOCTYPE html>
<html>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple webpage.</p>
</body>
</html>
Output:
Welcome to My Website
This is a simple webpage.
The webpage appears plain.
HTML With CSS
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">
Welcome to My Website
</h1>
</body>
</html>
Now the heading appears in blue.
Why CSS is Needed
Without CSS:
Webpages look boring
Difficult to maintain
Poor user experience
With CSS:
Attractive design
Better readability
Responsive layouts
Professional appearance
Advantages of CSS
1. Separation of Content and Design
HTML handles content.
CSS handles appearance.
2. Faster Development
One CSS file can style hundreds of webpages.
3. Better User Experience
Professional styling improves navigation and readability.
4. Easy Maintenance
Changes can be made in one place.
CSS Syntax
Basic syntax:
selector {
property: value;
}
Example:
h1 {
color: blue;
}
Components of CSS
h1 {
color: blue;
}
| Part | Meaning |
|---|---|
| h1 | Selector |
| color | Property |
| blue | Value |
Types of CSS
There are three methods to apply CSS.
Inline CSS
Internal CSS
External CSS
1. Inline CSS
CSS written directly inside HTML elements.
Example:
<h1 style="color:red;">
Welcome
</h1>
Advantages
Quick styling
Easy for small changes
Disadvantages
Difficult to manage large websites
2. Internal CSS
CSS written inside the <style> tag.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Advantages
Better organization
Suitable for single-page websites
3. External CSS
CSS stored in a separate file.
Example CSS file:
h1 {
color: green;
}
File name:
style.css
Linking External CSS
<head>
<link rel="stylesheet"
href="style.css">
</head>
Advantages of External CSS
Professional approach
Reusable
Easy maintenance
CSS Selectors
Selectors choose which HTML elements to style.
Element Selector
Example:
p {
color: red;
}
All paragraphs become red.
HTML Example
<p>Hello</p>
<p>Welcome</p>
ID Selector
Uses #.
HTML:
<h1 id="title">
Welcome
</h1>
CSS:
#title {
color: blue;
}
Class Selector
Uses .
HTML:
<p class="important">
Important Text
</p>
CSS:
.important {
color: red;
}
Colors in CSS
CSS supports multiple color formats.
Color Names
h1 {
color: blue;
}
Hexadecimal Colors
h1 {
color: #FF0000;
}
Red color.
RGB Colors
h1 {
color: rgb(0,0,255);
}
Blue color.
Background Colors
Example:
body {
background-color: lightyellow;
}
Complete Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: darkblue;
}
</style>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>
Font Styling
Font Size
p {
font-size: 20px;
}
Font Family
p {
font-family: Arial;
}
Font Weight
p {
font-weight: bold;
}
Complete Example
p {
font-family: Arial;
font-size: 18px;
font-weight: bold;
}
Text Alignment
Center Alignment
h1 {
text-align: center;
}
Left Alignment
p {
text-align: left;
}
Right Alignment
p {
text-align: right;
}
Text Decoration
Underline:
h1 {
text-decoration: underline;
}
Remove Link Underline
a {
text-decoration: none;
}
Borders in CSS
Example:
p {
border: 2px solid black;
}
Border Styles
| Style | Meaning |
|---|---|
| solid | Solid line |
| dashed | Dashed line |
| dotted | Dotted line |
| double | Double line |
Example
h1 {
border: 3px dashed blue;
}
Margin
Margin creates space outside an element.
Example:
h1 {
margin: 20px;
}
Padding
Padding creates space inside an element.
Example:
h1 {
padding: 20px;
}
Margin vs Padding
| Property | Space Location |
|---|---|
| Margin | Outside |
| Padding | Inside |
Complete Styling Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
}
h1 {
color: blue;
text-align: center;
}
p {
font-size: 18px;
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h1>My Website</h1>
<p>
Learning HTML and CSS is fun.
</p>
</body>
</html>
Output Features
Gray background
Blue heading
Center alignment
Bordered paragraph
Proper spacing
CSS Best Practices
Use External CSS
Preferred for large websites.
Use Meaningful Class Names
Good:
.student-card
Bad:
.box1
Keep CSS Organized
Group related styles together.
Common Mistakes Beginners Make
Missing Semicolon
Wrong:
color: red
font-size: 20px;
Correct:
color: red;
font-size: 20px;
Wrong Selector
HTML:
<p class="text">
CSS:
.text {
color: blue;
}
Using #text would not work.
Forgetting CSS File Link
Wrong:
No CSS link included.
Correct:
<link rel="stylesheet"
href="style.css">
Real-Life Uses of CSS
CSS is used in:
Business websites
Blogs
E-commerce stores
Social media platforms
Educational websites
Companies like Google, Microsoft, and Amazon use advanced CSS techniques to create modern user interfaces.
HTML vs CSS
| HTML | CSS |
|---|---|
| Structure | Design |
| Content | Appearance |
| Elements | Styles |
| Webpage Skeleton | Webpage Beauty |
Conclusion
CSS is the technology that transforms plain HTML pages into attractive, professional websites. HTML provides structure, while CSS controls appearance and layout.
After mastering CSS integration, the next important topic is:
Comments
Post a Comment