Introduction to CSS

CSS (Cascading Style Sheets) is used to style and layout web pages. With CSS, you can control the color, fonts, spacing, and layout of HTML elements.

Inline CSS

CSS can be added directly to an HTML element using the style attribute.


<p style="color:blue;">This is a blue paragraph.</p>

Internal CSS

You can include CSS rules in the <style> tag inside the <head> section of an HTML document.


<style>
  p {
    color: blue;
  }
</style>

External CSS

The most common way to add CSS is by linking to an external stylesheet. You can do this by using the <link> tag in the <head> section of your HTML file.


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

CSS Selectors

CSS selectors are patterns used to select elements on the web page that you want to style.

Element Selector: Targets all elements of a specific type.


p {
  color: red;
}

ID Selector: Targets an element with a specific ID. Use the # symbol.


#myElement {
  font-size: 20px;
}

Class Selector: Targets elements with a specific class. Use the . symbol.


.myClass {
  background-color: yellow;
}

CSS Selectors and Properties

Selectors and properties are the foundation of CSS. Selectors target HTML elements, while properties define how those elements are styled.

CSS Selectors

Common selectors include:

Element Selector: Targets all elements of a specific type, like p for all paragraphs.
Class Selector: Targets elements with a specific class, using a dot ..
ID Selector: Targets an element with a specific ID, using a hash #.

Example: CSS Selectors


    p { color: blue; } /* Element selector */
    .my-class { font-size: 18px; } /* Class selector */
    #my-id { background-color: yellow; } /* ID selector */

CSS Properties

Properties define the appearance of elements. Common properties include:

color: Text color
background-color: Background color
font-size: Text size
margin: Space outside an element
padding: Space inside an element

Example: CSS Properties


    p {
        color: red;
        font-size: 20px;
        padding: 10px;
    }

Exercise

Create a webpage using CSS selectors and properties to style the headings, paragraphs, and other elements. Use a mix of class and ID selectors to practice.

Previous Lesson: Lists in HTML Next Lesson: Advanced CSS