Class 2: Basics of CSS: Selectors, box model, colors, typography.

Welcome to the second class of your web development journey! In this class, we will dive into the basics of CSS (Cascading Style Sheets), which is used to style and layout web pages. By the end of this session, you’ll understand how to use CSS to make your web pages visually appealing.

1. What is CSS?

CSS stands for Cascading Style Sheets. It is used to control the appearance of HTML elements, such as colors, layouts, fonts, and spacing. CSS works by applying styles to HTML elements using selectors.

2. CSS Syntax

CSS is written in the following format:

selector {
property: value;
}

Selector: Targets the HTML element(s) you want to style.

Property: The style you want to apply (e.g., color, font-size).

Value: The value for the property (e.g., red, 16px).

Example:

h1 {
color: blue;
font-size: 24px;
}

3. Types of CSS

There are three ways to apply CSS to your HTML:

1. Inline CSS: Written directly inside an HTML element using the style attribute.

<h1 style="color: red;">This is a heading</h1>
2. Internal CSS: Written inside a <style> tag in the <head> section of the HTML document.
<style>
p {
color: green;
font-size: 18px;
}
</style>

3. External CSS: Written in a separate .css file and linked to the HTML using a <link> tag.

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

4. CSS Selectors

CSS selectors are used to target HTML elements. Here are the most common selectors:

1. Universal Selector (*): Targets all elements.
* {  
  margin: 0;  
  padding: 0;  
}
2. Type Selector: Targets specific HTML tags.
h1 {  
  color: blue;  
}
3. Class Selector (.classname): Targets elements with a specific class.
.highlight {  
  background-color: yellow;  
}
4. ID Selector (#idname): Targets an element with a specific ID.
#main-title {  
  font-size: 32px;  
}
5. Group Selector: Targets multiple elements.
h1, h2, p {  
  font-family: Arial, sans-serif;  
}
6. Descendant Selector: Targets elements inside a specific parent.
div p {  
  color: gray;  
}
7. Attribute Selectors: Targets an element with a specific attribute.

1. [attribute]

Selects elements that have a specific attribute, regardless of its value.

Example:

[title] {
  color: blue;
}

HTML:

<p title="tooltip">This paragraph has a title attribute.</p>
<p>This paragraph does not have a title attribute.</p>

2. [attribute=”value”]

Selects elements with a specific attribute and an exact value.

Example:

[type="text"] {
  border: 2px solid green;
}

HTML:

<input type="text" placeholder="Enter text">
<input type="password" placeholder="Enter password">

3. [attribute~=”value”]

Selects elements where the attribute value contains a specific word (separated by spaces).

Example:

[class~="highlight"] {
  background-color: yellow;
}

HTML:

<p class="highlight important">This paragraph is highlighted.</p>
<p class="important">This paragraph is not highlighted.</p>

4. [attribute^=”value”]

Selects elements where the attribute value starts with a specific value.

Example:

[href^="https"] {
  color: green;
}

HTML:

<a href="https://example.com">Secure Link</a>
<a href="http://example.com">Non-Secure Link</a>

5. [attribute$=”value”]

Selects elements where the attribute value ends with a specific value.

Example:

[src$=".jpg"] {
  border: 2px solid red;
}

HTML:

<img src="image.jpg" alt="Image">
<img src="image.png" alt="Image">

6. [attribute=”value”]*

Selects elements where the attribute value contains a specific substring.

Example:

[href*="example"] {
  text-decoration: underline;
}

HTML:

<a href="https://example.com">Example Link</a>
<a href="https://test.com">Test Link</a>

5. The Box Model

The CSS Box Model is the foundation of layout design. Every HTML element is treated as a box with the following layers:

  1. Content: The actual content inside the element.
  2. Padding: Space between the content and the border.
  3. Border: The edge around the padding.
  4. Margin: Space outside the border.Example:
div {
width: 200px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}

6. Colors in CSS

CSS allows you to set colors using different methods:

1. Named Colors: Predefined color names.

h1 {
color: red;
}

2. Hexadecimal Colors: #RRGGBB format.

p {
color: #ff5733;
}

3. RGB Colors: rgb(red, green, blue) format.

div {
background-color: rgb(255, 0, 0);
}

4. RGBA Colors: Adds transparency to RGB (a = alpha).

span {
background-color: rgba(0, 0, 0, 0.5);
}

7. Typography

Typography refers to styling text on your web page.

1. Font Family: Specifies the font.

body {
    font-family: Arial, sans-serif;
}

2. Font Size: Specifies the size of the text.

h1 {
    font-size: 24px;
}

3. Font Weight: Specifies the thickness of the text.

p {
    font-weight: bold;
}

4. Text Alignment: Aligns text (left, center, right, justify).

h2 {
    text-align: center;
}

5. Text Decoration: Adds effects like underline or line-through.

a {
    text-decoration: none;
}

6. Line Height: Adjusts the spacing between lines of text.

p {
line-height: 1.5;
}

8. Commonly Used CSS Properties

Here are some of the most important CSS properties with examples:

1. Background

body {
    background-color: lightblue;
    background-image: url('background.jpg');
    background-size: cover;
}

2. Width and Height

div {
    width: 300px;
    height: 200px;
}

3. Border

img {
    border: 2px solid black;
    border-radius: 10px;
}

4. Margin and Padding

p {
    margin: 20px;
    padding: 10px;
}

5. Display

div {
    display: flex;
}

6. Position

div {
    position: absolute;
    top: 50px;
    left: 100px;
}

7. Hover Effects

button:hover {
    background-color: green;
    color: white;
}

Complete Examples

Here’s a complete example combining everything we’ve learned:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Basics</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="highlight">Welcome to CSS Basics</h1>
<p id="intro">CSS makes web pages beautiful!</p>
<div>
<p>This is a styled box.</p>
</div>
<button>Click Me</button>
</body>
</html>

CSS (styles.css):

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
h1 { color: blue; text-align: center; } #intro { color: gray; font-size: 18px; } .highlight { background-color: yellow; padding: 10px; } div { width: 300px; padding: 20px; border: 2px solid black; margin: 20px auto; background-color: white; } button { display: block; margin: 20px auto; padding: 10px 20px; background-color: blue; color: white; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: green; }

Homework

  1. Create a simple webpage with a styled heading, paragraph, and button.
  2. Experiment with different CSS properties like margin, padding, border, and background-color.
  3. Try using different selectors (class, ID, descendant).

This concludes Class 2: Basics of CSS. In the next class, we’ll explore Responsive Web Design with media queries, flexbox, and grid layouts! You can also check the previous class Class 1: Introduction to HTML: Tags, structure, forms, tables.