Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Challenge: Add The Styles using the Class Name | Introduction to CSS
course content

Conteúdo do Curso

CSS Fundamentals

1. Introduction to CSS

What is CSS?Connecting HTML and CSSSelectors for Styling HTML ElementsChallenge: Add Your First StylesChallenge: Add The Styles using the Class NameUser Action Pseudo-ClassesChallenge: User Action Pseudo-ClassesText ColorsEffective Work with CSSChallenge: Variables in CSS

2. Text Styles

Text StylingText FormattingChallenge: Text FormattingAdding Custom Fonts to the Web PageFont PropertiesChallenge: Fonts

3. Box Model and Element Spacing

Box ModelBox SizingAdding Space to ElementsChallenge: Box-SizingStructural and Functional Pseudo-ClassesChallenge: Structural Pseudo-ClassesElement TypesWorking with Block-Level ElementsWorking with Inline ElementsChallenge: Predict the Page Layout

4. Flexbox

What is the Flexbox? Flex DirectionJustifying Content HorizontallyAligning Items VerticallyFlex Item PropertiesChallenge: FlexboxChallenge: Work with Flexbox

5. Decorative Effects

Background ColorBackground ImageWorking with ImagesDecorative Pseudo-ElementsShadowsChallenge: Decorative EffectsFurther Steps

CSS Fundamentals

Challenge: Add The Styles using the Class NameChallenge: Add The Styles using the Class Name

Task

The website provides brief information about the planets. The task is:

  • Select all elements with the text class name and apply the color property with the value brown.
  • Select all elements with the sub-text class name and apply the color property with the value grey.
html

index.html

css

index.css

js

index.js

Use . and its class name (e.g., .text) to select an element by its class name.

html

index.html

css

index.css

js

index.js

Tudo estava claro?

Seção 1. Capítulo 5
course content

Conteúdo do Curso

CSS Fundamentals

1. Introduction to CSS

What is CSS?Connecting HTML and CSSSelectors for Styling HTML ElementsChallenge: Add Your First StylesChallenge: Add The Styles using the Class NameUser Action Pseudo-ClassesChallenge: User Action Pseudo-ClassesText ColorsEffective Work with CSSChallenge: Variables in CSS

2. Text Styles

Text StylingText FormattingChallenge: Text FormattingAdding Custom Fonts to the Web PageFont PropertiesChallenge: Fonts

3. Box Model and Element Spacing

Box ModelBox SizingAdding Space to ElementsChallenge: Box-SizingStructural and Functional Pseudo-ClassesChallenge: Structural Pseudo-ClassesElement TypesWorking with Block-Level ElementsWorking with Inline ElementsChallenge: Predict the Page Layout

4. Flexbox

What is the Flexbox? Flex DirectionJustifying Content HorizontallyAligning Items VerticallyFlex Item PropertiesChallenge: FlexboxChallenge: Work with Flexbox

5. Decorative Effects

Background ColorBackground ImageWorking with ImagesDecorative Pseudo-ElementsShadowsChallenge: Decorative EffectsFurther Steps

CSS Fundamentals

Challenge: Add The Styles using the Class NameChallenge: Add The Styles using the Class Name

Task

The website provides brief information about the planets. The task is:

  • Select all elements with the text class name and apply the color property with the value brown.
  • Select all elements with the sub-text class name and apply the color property with the value grey.
html

index.html

css

index.css

js

index.js

Use . and its class name (e.g., .text) to select an element by its class name.

html

index.html

css

index.css

js

index.js

Tudo estava claro?

Seção 1. Capítulo 5
some-alt