Introduction to CSS

Introduction to CSS

CSS stands for Cascading Style Sheets. It is a style sheet language used for describing the look and formatting of a document written in HTML. CSS is an essential part of web design as it allows designers to control the appearance of web pages, including layout, colors, fonts, and more.

Fundamentals of CSS

What is CSS?

CSS is a style sheet language that is used to describe the look and formatting of a document written in HTML. It provides a way to separate the content of a web page from its presentation, making it easier to maintain and update.

Why is CSS used?

CSS is used to style web pages and make them visually appealing. It allows designers to control the layout, colors, fonts, and other visual aspects of a web page.

How does CSS work?

CSS works by associating style rules with HTML elements. These style rules define how the elements should be displayed. When a web page is loaded, the browser applies the CSS rules to the HTML elements, resulting in the desired visual appearance.

Benefits of using CSS in web design

There are several benefits of using CSS in web design:

  • Separation of content and presentation
  • Consistent styling across multiple pages
  • Easy maintenance and updates
  • Improved accessibility
  • Faster page loading

Types of CSS

There are three types of CSS:

Inline CSS

Inline CSS is used to apply styles directly to individual HTML elements. It is defined using the style attribute within the HTML tag. Inline CSS has the highest specificity and overrides other styles.

Syntax

<p>This is a paragraph with blue text.</p>

Advantages of Inline CSS

  • Quick and easy to implement
  • Allows for specific styling of individual elements

Disadvantages of Inline CSS

  • Difficult to maintain and update
  • Overrides other styles

Internal CSS

Internal CSS is used to apply styles to a single HTML document. It is defined within the `tags in the<head>` section of the HTML document.

Syntax

&lt;head&gt;
    &lt;style&gt;
        p {
            color: blue;
        }

Advantages of Internal CSS

  • Allows for specific styling of a single HTML document
  • Easier to maintain and update compared to inline CSS

Disadvantages of Internal CSS

  • Styles are not reusable across multiple HTML documents

External CSS

External CSS is used to apply styles to multiple HTML documents. It is defined in a separate CSS file and linked to the HTML documents using the `` tag.

Syntax

Advantages of External CSS

  • Styles are reusable across multiple HTML documents
  • Easier to maintain and update compared to inline and internal CSS

Disadvantages of External CSS

  • Requires an additional HTTP request to load the CSS file

Selectors (Tags)

Selectors are used to select and style specific HTML elements. There are different types of selectors:

Tag selectors

Tag selectors select HTML elements based on their tag name. For example, the following CSS rule selects all <p> elements and sets their color to blue:

p {
    color: blue;
}

Class selectors

Class selectors select HTML elements based on their class attribute. For example, the following CSS rule selects all elements with the class 'highlight' and sets their background color to yellow:

.highlight {
    background-color: yellow;
}

ID selectors

ID selectors select HTML elements based on their ID attribute. For example, the following CSS rule selects the element with the ID 'header' and sets its font size to 24 pixels:

#header {
    font-size: 24px;
}

Universal selectors

Universal selectors select all HTML elements. For example, the following CSS rule selects all elements and sets their margin to 0:

* {
    margin: 0;
}

Attribute selectors

Attribute selectors select HTML elements based on their attribute values. For example, the following CSS rule selects all <a> elements with a 'target' attribute and sets their text color to red:

a[target] {
    color: red;
}

Class and ID with the Selectors

Class and ID selectors are used to select and style specific HTML elements.

Definition and purpose of class and ID

  • Class: A class is a way to group HTML elements and apply the same styles to them. Multiple elements can have the same class.
  • ID: An ID is used to uniquely identify an HTML element. Each element can have only one ID.

Syntax and examples of using class and ID selectors

Class selector

.my-class {
    color: blue;
}

</a></p><p class="my-class"><a>This is a paragraph with blue text.</a></p><a>
<p class="my-class">This is another paragraph with blue text.</p>

ID selector

#my-id {
    font-size: 24px;
}

<p>This is a paragraph with a font size of 24 pixels.</p>

Differences between class and ID selectors

  • Class selectors can be applied to multiple elements, while ID selectors can be applied to only one element.
  • Class selectors have lower specificity than ID selectors.

CSS Background & Color

CSS provides several ways to set the background color and background images of HTML elements.

Setting background color

There are three ways to set the background color:

Using color names

Color names can be used to set the background color. For example:

body {
    background-color: red;
}

Using hexadecimal values

Hexadecimal values can be used to set the background color. For example:

body {
    background-color: #ff0000;
}

Using RGB values

RGB values can be used to set the background color. For example:

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

Setting background images

Background images can be set using the background-image property. The image URL is specified as the value of the property. For example:

body {
    background-image: url('image.jpg');
}

Positioning and repeating background images

The background-position property is used to specify the position of the background image. The background-repeat property is used to specify whether the background image should be repeated or not.

CSS Text

CSS provides several properties to style text.

Changing font family

The font-family property is used to specify the font family of text. Multiple font families can be specified as fallback options in case the desired font is not available.

Changing font size

The font-size property is used to specify the size of text. It can be specified in pixels, percentages, or other units.

Changing font weight

The font-weight property is used to specify the weight (boldness) of text. It can be set to 'normal' or 'bold'.

Changing font style

The font-style property is used to specify the style (italic or normal) of text.

Changing text color

The color property is used to specify the color of text. It can be specified using color names, hexadecimal values, or RGB values.

Text alignment

The text-align property is used to specify the alignment of text. It can be set to 'left', 'right', 'center', or 'justify'.

Text decoration

The text-decoration property is used to add decorations to text, such as underline, overline, line-through, or none.

CSS Font

CSS provides various options for styling fonts.

Using web-safe fonts

Web-safe fonts are fonts that are commonly available on most operating systems and web browsers. They are a safe choice for web design as they are more likely to be displayed correctly on different devices.

Using custom fonts

Custom fonts can be used in web design by importing the font files and specifying the font family in CSS.

Font properties

There are several font properties that can be used to style fonts:

  • Font weight: Specifies the weight (boldness) of the font.
  • Font style: Specifies the style (italic or normal) of the font.
  • Font size: Specifies the size of the font.
  • Line height: Specifies the height of each line of text.

CSS Border

CSS allows you to add borders to HTML elements.

Adding borders to elements

The border property is used to add borders to elements. It can be used to specify the border width, style, and color.

Border properties

There are three border properties:

  • Border width: Specifies the width of the border.
  • Border style: Specifies the style of the border (solid, dashed, dotted, etc.).
  • Border color: Specifies the color of the border.

CSS Padding

CSS allows you to add padding to HTML elements.

Adding padding to elements

The padding property is used to add padding to elements. It can be used to specify the padding on all sides or individually.

Padding properties

There are four padding properties:

  • Padding top: Specifies the padding on the top side.
  • Padding right: Specifies the padding on the right side.
  • Padding bottom: Specifies the padding on the bottom side.
  • Padding left: Specifies the padding on the left side.

Summary

CSS is a style sheet language used for describing the look and formatting of a document written in HTML. It allows designers to control the appearance of web pages, including layout, colors, fonts, and more. There are three types of CSS: inline, internal, and external. Selectors are used to select and style specific HTML elements. Class and ID selectors are used to select and style specific HTML elements. CSS provides various ways to set the background color and background images of HTML elements. CSS provides properties to style text, fonts, borders, and padding.

Analogy

CSS is like a painter's palette. Just as a painter uses different colors, brushes, and techniques to create a masterpiece, a web designer uses CSS to style and design web pages.

Quizzes
Flashcards
Viva Question and Answers

Quizzes

What is the purpose of CSS?
  • To describe the look and formatting of a document written in HTML.
  • To perform calculations and data analysis.
  • To create interactive web pages.
  • To store and retrieve data.

Possible Exam Questions

  • Explain the purpose and benefits of using CSS in web design.

  • Compare and contrast the three types of CSS.

  • Describe the different types of selectors in CSS and provide examples of each.

  • What is the difference between class and ID selectors? When would you use one over the other?

  • How can you set the background color and background image of an HTML element using CSS? Provide examples.