Introduction to CSS Part I

Introduction to CSS Part I

0%

1. Basic Introduction

This section will cover the basics of CSS. You will learn the language's syntax, the most common CSS properties, and how to add CSS styles to your web page.

Including CSS: Internal Styles

Including CSS: External Styles

Including CSS: Inline Styles

Basic Syntax of CSS

Basic Selection in CSS

Commonly Used Basic CSS Properties

2. Selectors and Cascade

Selecting the elements you need becomes more challenging as your HTML code's complexity grows. This section will cover more advanced techniques of the selection.

ID Selectors

Class Selectors

Other Selectors

Manipulate Cascade, Specificity and Inheritance

3. Box Model

This section will cover the general styling used for layout and text formatting to create a visually appealing and user-friendly design for your webpage. Part I.

Box Model Properties

Sizing Elements

Positioning Elements

Course Content

Introduction to CSS Part I

Introduction to CSS Part I

1. Basic Introduction

CSS Including CSS: Internal Styles Including CSS: External Styles Including CSS: Inline Styles Basic Syntax of CSS Basic Selection in CSS Commonly Used Basic CSS Properties Challenge

2. Selectors and Cascade

ID Selectors Class Selectors Other Selectors Cascade in CSS Inheritance Specificity Manipulate Cascade, Specificity and Inheritance Challenge

3. Box Model

Box Model Properties Sizing Elements Positioning Elements

ID Selectors

We have learned that in CSS, selectors select elements from DOM and then apply style rules as specified for them. These selectors can be of various types, and one of them is an id selector that is used to select and style a single element on a web page. It is identified by the # symbol followed by the unique id attribute of the element. Here is an example of using an id selector in CSS:

index

index

index

In this example, the <div> element has an id attribute of the "header", so it will be styled according to the rules defined in the #header selector in the CSS.

You can also use the id selector in combination with other selectors to create more specific rules. For example:

index

index

index

In this example, the #header h1 selector selects all h1 elements that are descendants of an element with the id attribute of "header". This allows you to apply styles specifically to the h1 elements within the "header" element.

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 1

some-alt