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.

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

Contenido del Curso

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

Box Model Properties

The box model in CSS specifies the layout and design of elements on a webpage. It is based on the concept of a box surrounding each element, which consists of the following properties:

Width and height. These properties specify the element's dimensions. They can be set using absolute units (such as pixels) or relative units (such as percentages or ems);
Margin: The margin is the space outside the element's border. It can add space around the element and separate it from other elements on the page. Margins can be set using any of the units mentioned above;
Border. The border is a line that surrounds the element and separates it from the margin. It can have a specific width, style (such as solid, dotted, or dashed), and color.
Padding. The padding is the space inside the element's border. It can add space around the element's content, such as text or images. Padding can be set using any of the units mentioned above.

A very simplistic representation is given below, which shows how the block-level elements behave when box-model properties are applied to them and how their size gets influenced by these.

¿Todo estuvo claro?

Sección 3. Capítulo 1

some-alt