Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Challenge: Text Formatting | Text Styles
course content

Contenido del 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: Text FormattingChallenge: Text Formatting

Task

To enhance the visual presentation of the h1 element, apply the following styles:

  • Add an underline.
  • Convert all letters to uppercase.
  • Horizontally recenter the text.
  • Set the line height to 2.
  • Adjust the letter spacing to 2px.
  • Increase the space between words to 5px.
  • Apply a text shadow with the values 2px 2px #000000.
html

index.html

css

index.css

js

index.js

  • text-decoration: Underlines the text.
  • text-transform: Converts the text to uppercase.
  • text-align: Centers the text horizontally.
  • line-height: Sets the height of the text.
  • letter-spacing: Increases the space between letters.
  • word-spacing: Increases the space between words.
  • text-shadow: Adds a shadow.
html

index.html

css

index.css

js

index.js

¿Todo estuvo claro?

Sección 2. Capítulo 3
course content

Contenido del 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: Text FormattingChallenge: Text Formatting

Task

To enhance the visual presentation of the h1 element, apply the following styles:

  • Add an underline.
  • Convert all letters to uppercase.
  • Horizontally recenter the text.
  • Set the line height to 2.
  • Adjust the letter spacing to 2px.
  • Increase the space between words to 5px.
  • Apply a text shadow with the values 2px 2px #000000.
html

index.html

css

index.css

js

index.js

  • text-decoration: Underlines the text.
  • text-transform: Converts the text to uppercase.
  • text-align: Centers the text horizontally.
  • line-height: Sets the height of the text.
  • letter-spacing: Increases the space between letters.
  • word-spacing: Increases the space between words.
  • text-shadow: Adds a shadow.
html

index.html

css

index.css

js

index.js

¿Todo estuvo claro?

Sección 2. Capítulo 3
some-alt