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;
}

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 <h1> elements to blue.

HTML:

<h1>Hello, World!</h1>

CSS:

h1 {
  color: blue;
}

This simple rule will turn the text in all <h1> 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>

Internal CSS: Within a <style> tag in the <head> section of your HTML document.

   <head>
     <style>
       h1 {
         color: blue;
       }
     </style>
   </head>

External CSS: Linking to an external CSS file from your HTML document.

   <head>
     <link rel="stylesheet" href="styles.css">
   </head>

styles.css:

   h1 {
     color: blue;
   }

Practice Exercise

Create an HTML file with a few different elements like <h1>, <p>, and <div>.
Apply different colors, font sizes, and background colors to these elements using all three methods: inline, internal, and external CSS.
Experiment with different properties to see how they affect the appearance of your elements.

Next Up: In the next lecture, we’ll dive into Selectors and Properties and learn how to target and style different elements on your webpage. Stay tuned!

This first lecture introduces the basics of CSS, explaining what it is, why it's important, and how to write simple CSS rules. The example provided is easy to follow, and the exercise encourages students to practice and explore on their own.

follow me on LinkedIn

Ridoy Hasan