Web Development (Session 05)

Shape Image One

INTRODUCTION
TO CSS - SYNTAX
AND USAGE

Introduction

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML. CSS enhances the appearance of web pages by allowing you to control layout, color, fonts, and other design elements. This section covers the basics of CSS, its syntax, and how to use it to style HTML documents.

What is CSS?

Definition:

CSS stands for Cascading Style Sheets. It is used to style and layout web pages, including the design, colors, and fonts.

Why Use CSS?

  • Separation of Content and Design: Keeps the HTML code clean and separates design elements.
  • Reusability: Apply the same styles across multiple web pages.
  • Consistency: Ensure a consistent look and feel across your website.
  • Efficiency: Change the look of an entire website by modifying just one file.

CSS Syntax

CSS rules are made up of selectors and declaration blocks.

1. CSS Rule Structure:

selector {

    property: value;

    property: value;

}

2. Example:

body {

    background-color: lightblue;

    font-family: Arial, sans-serif;

}

CSS Selectors

1. Element Selector:

Selects HTML elements based on the element name.

p {

    color: blue;

}

2. Class Selector:

Selects elements with a specific class attribute.

.intro {

    font-size: 20px;

}



<p class=”intro”>This is an introduction paragraph.</p>

3. ID Selector:

Selects an element with a specific id attribute.

#header {

    background-color: grey;

}

<div id=”header”>This is the header.</div>

4. Universal Selector:

Selects all elements on the page.

* {

    margin: 0;

    padding: 0;

}

5. Grouping Selector:

Applies the same style to multiple elements.

h1, h2, h3 {

    color: green;

}

CSS Properties

1. Color:

Text Color: Sets the color of the text.

h1 {

    color: red;

}

Background Color: Sets the background color of an element.

div {

    background-color: yellow;

}

2. Font:

Font Family: Sets the font of the text.

p {

    font-family: ‘Arial’, sans-serif;

}

Font Size: Sets the size of the text.

h1 {

    font-size: 24px;

}

3. Text:

Text Alignment: Aligns the text inside an element.

p {

    text-align: center;

}

Text Decoration: Adds decoration to the text (underline, overline, etc.).

a {

    text-decoration: none;

}

4. Box Model:

Margin: Sets the outside space of an element.


div {

    margin: 10px;

}

Padding: Sets the inside space of an element.

div {

    padding: 20px;

}

Border: Sets the border around an element.

div {

    border: 1px solid black;

}

Adding CSS to HTML

1. Inline CSS:

Styles are added directly within an HTML element.

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

 

2. Internal CSS:

Styles added within the <style> tag in the <head> section.

<head>

    <style>

        p {

            color: red;

        }

    </style>

</head>

3. External CSS:

Styles added in an external file linked to the HTML document.

<head>

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

</head>



/* styles.css */

body {

    background-color: lightgrey;

}

Additional Resources

Articles:
Videos:

Conclusion

CSS is a powerful tool that allows you to create visually appealing web pages by controlling layout, color, fonts, and more. Practice using different CSS properties and selectors to enhance your web development skills.

Optimized by Optimole
WhatsApp whatsapp
Messenger messenger
Instagram instagram
Call Us phone
chat