Lecture 1: Introduction to CSS
Welcome to the first lecture of "Basic to Brilliance" - your journey to mastering CSS starts here!
What is CSS?
CSS, or Cascading Style Sheets, is the language used to describe the presentation of a web page. While HTML provides the structure and content, CSS is what makes the web pages look attractive and user-friendly. It controls the layout, colors, fonts, spacing, and much more.
Why is CSS Important?
-
Separation of Concerns: CSS allows you to separate content (HTML) from presentation (CSS), making your code cleaner and easier to maintain.
-
Consistency: You can apply consistent styling across multiple web pages by linking a single CSS file.
-
Responsive Design: CSS is essential for creating websites that look good on all devices, from desktops to smartphones.
Basic CSS Syntax
CSS is made up of rules that target HTML elements. Each rule consists of a selector and a declaration block.
selector {
property: value;
}
Copy after login
-
Selector: Targets the HTML element you want to style.
-
Property: The aspect of the element you want to change (e.g., color, font-size).
-
Value: The specific value you want to apply to the property.
Example:
Let’s say you want to change the color of all
elements to blue.
HTML:
<h1>Hello, World!</h1>
Copy after login
CSS:
h1 {
color: blue;
}
Copy after login
This simple rule will turn the text in all
elements to blue.
Adding CSS to HTML
There are three main ways to add CSS to your HTML document:
-
Inline CSS: Directly in the HTML element.
<h1 style="color: blue;">Hello, World!</h1>
Copy after login
-
Internal CSS: Within a