CSS Tutorial


 

CSS Tutorial: Getting Started with Styling Your Web Pages

CSS (Cascading Style Sheets) is a language used to describe how HTML elements should be displayed on the screen, paper, or in other media. It controls the layout of multiple web pages all at once and enhances the look and feel of websites.

Why Use CSS?

  • Separation of content and design: HTML is used for structure, and CSS handles presentation, which makes managing a large site easier.
  • Consistency: CSS allows the same styles to be applied to multiple pages, ensuring consistent design.
  • Improved maintainability: Changes can be made to a single CSS file to update the entire site, rather than editing each HTML file.

Basic CSS Structure

A CSS rule consists of two parts: a selector and a declaration block.

css
selector {
  property: value;
}
  • Selector: The HTML element you want to style.
  • Property: The attribute you want to change, such as color or font-size.
  • Value: The value you want to assign to the property, such as red or 16px.

Example 1: Inline, Internal, and External CSS

  1. Inline CSS: Add styles directly within an HTML element. Example:

    html
    <h1 style="color: blue;">Hello World</h1>

  2. Internal CSS: Place CSS rules inside a <style> tag in the head of the HTML document.

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

  3. External CSS: Link an external CSS file to the HTML document using a <link> tag.

    HTML file:

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

    styles.css file:

    css
    h1 {
    color: blue;
}

Selectors in CSS

1. Element Selector

Targets HTML elements directly by name.

css
p {
  color: green;
  font-size: 18px;
}

2. Class Selector

Used to select elements with a specific class. To select, use a dot (.) followed by the class name.

css
.header {
  background-color: lightblue;
  padding: 10px;
}

HTML:

html
<div class="header">Welcome to my website!</div>

3. ID Selector

An ID is unique to each element and is selected using a hash symbol (#).

css
#intro {
  font-size: 20px;
  color: darkred;
}

HTML:

html
<p id="intro">This is an introduction.</p>

4. Universal Selector

The universal selector (*) applies to all elements.

css
* {
  margin: 0;
  padding: 0;
}

5. Group Selector

Use this to style multiple elements the same way.

css
h1, h2, p {
  font-family: Arial, sans-serif;
  color: #333;
}

Colors in CSS

You can set colors using:

  1. Name: color: red;
  2. Hexadecimal: color: #ff0000;
  3. RGB: color: rgb(255, 0, 0);
  4. RGBA (with transparency): color: rgba(255, 0, 0, 0.5);

Fonts in CSS

To style text, use font properties such as font-family, font-size, font-weight, and font-style.

css
p {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
}

Example 2: Styling Multiple Elements

Let’s create an example with a styled header, paragraph, and button.

HTML:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Tutorial</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1 class="main-title">Welcome to My Website</h1>
    <p id="intro">This is an example paragraph to demonstrate CSS styling.</p>
    <button class="btn primary-btn">Click Me!</button>
</body>
</html>

CSS (style.css):

css
/* Style the main title */
.main-title {
  font-size: 36px;
  color: #2c3e50;
  text-align: center;
}

/* Style the paragraph using ID */
#intro {
  font-size: 18px;
  color: #7f8c8d;
  padding: 10px;
  line-height: 1.6;
}

/* Style buttons */
.btn {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  border: none;
}

/* Style the primary button */
.primary-btn {
  background-color: #3498db;
  color: white;
}

.primary-btn:hover {
  background-color: #2980b9;
}

CSS Box Model

The box model consists of margins, borders, padding, and the content area. Every element in CSS is treated as a rectangular box.

css
div {
  margin: 10px;
  border: 5px solid black;
  padding: 10px;
  width: 200px;
}
  • Margin: Space outside the border.
  • Border: A line around the padding and content.
  • Padding: Space between the border and the content.
  • Width/Height: The size of the content area.

CSS Layouts: Flexbox and Grid

Flexbox Layout

Flexbox makes it easier to align items along a single axis (horizontal or vertical).

css
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Grid Layout

CSS Grid is a two-dimensional layout system that allows items to be placed in rows and columns.

css
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.item {
  background-color: #ecf0f1;
  padding: 20px;
}

Media Queries for Responsive Design

Media queries are used to apply styles based on screen size or device type.

css
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

 

Conclusion

CSS is fundamental in web design and development. By understanding selectors, properties, and layout techniques like Flexbox and Grid, you can create visually stunning and responsive websites that provide a great user experience. The key to mastering CSS is practice—try applying different styles, experiment with layouts, and build projects to see CSS in action.