Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprende Linking CSS to an HTML Document | Getting Started with CSS
CSS Fundamentals
course content

Contenido del Curso

CSS Fundamentals

CSS Fundamentals

1. Getting Started with CSS
What is CSS and Why is it Important?Linking CSS to an HTML DocumentMastering CSS Selectors for Styling HTML ElementsChallenge: Apply Your First CSS StylesChallenge: Style with Class SelectorsEnhancing Styles with User Action Pseudo-ClassesChallenge: Apply User Action Pseudo-ClassesChanging Text Colors in CSSOptimizing Workflow for Efficient CSS CodingChallenge: Use Variables for Better CSS Management
2. Styling Text in CSS
Mastering Text Styling in CSSText Formatting Techniques for ReadabilityChallenge: Format Text with CSSAdding Custom Fonts to a Web PageUnderstanding and Using Font PropertiesChallenge: Explore Font Properties
3. The CSS Box Model & Spacing Elements
What is the CSS Box Model?Understanding Box Sizing in CSSAdding Space with Margins and PaddingChallenge: Apply Box Sizing to ElementsUsing Structural and Functional Pseudo-ClassesChallenge: Practice Structural Pseudo-ClassesUnderstanding Block, Inline, and Inline-Block ElementsWorking with Block-Level ElementsWorking with Inline ElementsChallenge: Predict Page Layout with Different Element Types
4. Mastering Flexbox for Layouts
What is Flexbox and Why Use It?Setting the Flex Direction for LayoutsJustifying Content Horizontally in FlexboxAligning Items Vertically in FlexboxUnderstanding Flex Item PropertiesChallenge: Apply Flexbox ConceptsChallenge: Build a Layout with Flexbox
5. Adding Decorative Effects with CSS
Using Background Colors for DesignApplying Background Images to ElementsWorking with Images in CSSCreating Effects with Decorative Pseudo-ElementsAdding Shadows for Depth and StyleChallenge: Implement Decorative Effects in CSSFurther Steps

book
Linking CSS to an HTML Document

Unveiling the Three Paths of CSS

The visual appearance of a webpage relies on the synergy between HTML and CSS. These technologies work in three distinct ways to style content: inline styles, embedded style sheets, and external style sheets. Let's explore each approach, highlighting their strengths and limitations.

Inline Styles

Inline styles allow applying CSS directly to an HTML element using the style attribute. This method is simple and useful for quick, dynamic changes. However, the drawback is their limited scope; they can't be easily extended or reused across different elements.

html

index.html

copy

In this example, the color: blueviolet style is applied directly to the <p> element, making the text appear in blueviolet. This style affects only this specific <p> tag.

Embedded Style Sheet

The embedded style sheet resides within an HTML document's <head>, encapsulated within <style> tags. This method allows us to tailor styles specifically to a single page. However, it lacks the versatility needed to be shared across multiple pages.

html

index.html

copy

Here, the <style> tag in the <head> section defines styles for all <p> elements. The text color is set to blueviolet, and the font size is increased to 36px. These styles are applied consistently across all document's <p> elements.

External Style Sheet

The external style sheet is the gold standard for CSS management in larger projects. It involves linking an external .css file to your HTML document using the <link> tag in the <head>. This method promotes scalability, maintainability, and reusability, making it ideal for multi-page projects.

html

index.html

css

styles.css

copy

The external .css file contains reusable styles for the entire project. Here, all <p> elements in the HTML document are styled using the rules defined in the index.css file. The rel="stylesheet" attribute in the <link> tag specifies the relationship between the HTML and the CSS file.

Note

  • Inline styles are suitable for single-element styling but lack reusability;
  • Embedded style sheet is great for styling a single page;
  • External style sheet excels in managing styles across multiple pages, streamlining your design process.
question mark

What ways of adding styles to the HTML document exist?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 1. Capítulo 2
Lamentamos que algo salió mal. ¿Qué pasó?
some-alt