Introduction
CSS (Cascading Style Sheets) is a stylesheet language used to style and design web pages written in HTML. It allows you to control the layout, color, font, spacing, responsiveness, and visual effects of elements on a web page.
What is CSS ?
- CSS stands for Cascading Style Sheets.
- It is used to apply styles (fonts, colors, spacing, layout, animations, etc.) to your HTML content.
- CSS enhances the appearance and usability of a website.
- It separates the content (HTML) from the design (CSS), making code cleaner and reusable.
Why Learn CSS ?
Example: Change Background Color
Create a .css file (e.g., style.css) and add the following code:
Output:
This will make the background color of the entire web page red.
Linking CSS to HTML
In you HTML file (e.g., index.html), link the CSS file like this inside the <head> section:
- Here are the key benefits of learning CSS: Helps build beautiful, professional, and responsive websites.
- Enhances User Experience (UX) by improving design and readability.
- Makes your websites more SEO-friendly.
- CSS is widely used in frontend development and a must-know skill for web designers and developers.
- Reduces development time by separating content from style.
Installing VS Code for HTML & CSS
Visual Studio Code (VS Code) is one of the best editors for writing CSS and HTML.
Download Link: https://code.visualstudio.com/Download
Steps:
1. Visit the above link and download the appropriate version for your OS.
2. Install VS Code.
3. Open VS Code - Create a new project folder - Add HTML and CSS files.
4. You are all set to begin coding!
Syntax:
Visual Studio Code (VS Code) is one of the best editors for writing CSS and HTML.
Download Link: https://code.visualstudio.com/Download
Steps:
1. Visit the above link and download the appropriate version for your OS.
2. Install VS Code.
3. Open VS Code - Create a new project folder - Add HTML and CSS files.
4. You are all set to begin coding!
Syntax:
selector { property: value;}Example: Change Background Color
Create a .css file (e.g., style.css) and add the following code:
body { background-color: red;}Output:
This will make the background color of the entire web page red.
Linking CSS to HTML
In you HTML file (e.g., index.html), link the CSS file like this inside the <head> section:
<head> <link rel="stylesheet" href="style.css"></head>CSS turns a dull, basic HTML page into a beautiful, engaging, and functional website. Mastering CSS allows you to control every pixel of your page’s design and layout.