Part 4 | CSS: Cascade Style Sheet | Web Designing Malayalam Tutorial
Table of Contents
Introduction
This tutorial is designed to guide you through the basics of CSS (Cascading Style Sheets) as part of a comprehensive web design series. CSS is essential for styling web pages and enhancing their visual appeal, making it a crucial skill for anyone looking to develop static websites. In this tutorial, we will cover fundamental concepts and practical steps you can take to effectively use CSS in your web projects.
Step 1: Understanding CSS Basics
-
What is CSS?
CSS stands for Cascading Style Sheets and is used to control the layout and appearance of HTML elements on a webpage. -
Syntax Overview:
A CSS rule consists of a selector and a declaration block, which includes properties and their values.Example:
h1 { color: blue; font-size: 20px; }
Step 2: Applying CSS to HTML
-
Inline CSS:
You can add CSS directly within an HTML element using thestyle
attribute.Example:
<h1 style="color: red;">Hello World</h1>
-
Internal CSS:
This method involves placing CSS within a<style>
tag in the<head>
section of your HTML document.Example:
<head> <style> body { background-color: lightgray; } </style> </head>
-
External CSS:
The best practice is to create an external stylesheet and link it to your HTML file.Example:
<link rel="stylesheet" type="text/css" href="styles.css">
Step 3: CSS Selectors and Properties
-
Types of Selectors:
- Element Selector: Targets HTML elements directly (e.g.,
p
,h1
). - Class Selector: Targets elements with a specific class (e.g.,
.classname
). - ID Selector: Targets a unique element with a specific ID (e.g.,
#idname
).
- Element Selector: Targets HTML elements directly (e.g.,
-
Common CSS Properties:
- Color and Background: Use properties like
color
andbackground-color
. - Font Styles: Control font properties using
font-family
,font-size
, andfont-weight
. - Margins and Padding: Adjust spacing with
margin
andpadding
.
- Color and Background: Use properties like
Step 4: The CSS Box Model
-
Understanding the Box Model:
Every HTML element can be considered as a box, which consists of:- Content: The actual content of the box (text, images).
- Padding: The space between the content and the border.
- Border: The outline around the padding and content.
- Margin: The space outside the border.
-
Example of Box Model CSS:
div { width: 300px; padding: 10px; border: 5px solid black; margin: 20px; }
Step 5: CSS Layout Techniques
-
Flexbox:
A layout model that allows items in a container to be laid out in a flexible manner.Example:
.container { display: flex; justify-content: space-between; }
-
Grid:
A powerful layout system that enables the creation of complex responsive layouts.Example:
.grid-container { display: grid; grid-template-columns: auto auto auto; }
Conclusion
In this tutorial, we explored the fundamentals of CSS, including how to apply it to HTML documents, use various selectors, and understand the CSS box model. These concepts are foundational for creating visually appealing and well-structured websites.
Next steps could involve practicing with real-world projects, exploring advanced CSS properties, or learning about responsive design techniques. Happy coding!