Introduction to CSS
What is CSS?
CSS, which stands for Cascading Style Sheets, is a language used to style and design web pages created with HTML. While HTML provides the basic structure of your page like a skeleton, CSS adds the finishing touches, such as colors, fonts, and layout, to make your website look attractive and professional.
Web page only using HTML Web page using HTML and CSS
Why Use CSS?
1. Separation of Content and Style: CSS separates the content of a webpage (HTML) from its design, making it easier to manage and update the appearance without altering the content.
2. Consistency: CSS ensures a uniform look across multiple pages of a website, which helps in maintaining a consistent design.
3. Efficiency: CSS can be applied to multiple pages using a single stylesheet, reducing the amount of code and improving loading times.
4. Improved User Experience: CSS makes websites easier to read, more accessible, and more visually appealing.
Basic CSS Syntax
A CSS rule consists of two main parts: the selector and the declaration block.
1. Selector: The selector points to the HTML element you want to style.
2. Declaration Block: The declaration block contains one or more declarations, separated by semicolons.
Each declaration includes:
- Property: The CSS property name (like color).
- Value: The value for the property (like red).
These declarations are enclosed in curly braces {}. Multiple declarations are separated by semicolons ;.This structure tells the browser how to style the selected HTML elements.
Example:
Output:
In this example:
- The h1 selector targets all <h1> elements.
- The declaration block set the text color to red.
Ways to Add CSS to HTML
There are three main ways to apply CSS to an HTML document:
1. Inline CSS: Styles are added directly to HTML elements using the style attribute.
2. Internal CSS: Styles are added within the <style> tag inside the <head> section of the HTML document.
3. External CSS: Styles are placed in a separate CSS file, which is then linked to the HTML document using the <link> tag.
Note : We will discuss this in detail later
Understanding CSS Features
1. Selectors: CSS selectors target HTML elements to apply styles based on their tag name, class, ID, or other attributes.
2. Cascading: CSS allows multiple styles to be applied to the same element. The most specific style or the last one in the order usually takes precedence.
3. Styling Properties: CSS offers a wide range of styling options, such as colors, fonts, margins, padding, borders, and backgrounds.
4. Browser Support: CSS is supported by all modern web browsers, making it a reliable and widely used technology for web development.
Advantages of CSS
• Rich Attributes: CSS provides more styling options than HTML.
• Efficient Code: CSS uses less code compared to inline HTML styling.
• Layout Control: CSS offers better control over website layout and design.
Disadvantages of CSS
• Selector Limitations: Sometimes, CSS selectors might not target elements as expected.
• Inline CSS Challenges: Inline styles can be difficult to edit and maintain.
Course Video
YouTube Reference :
Introduction – CSS3 tutorial in hindi – urdu – Class – 01
