Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Connecting HTML and CSS | Introduction to CSS
CSS Fundamentals
course content

Course Content

CSS Fundamentals

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

bookConnecting HTML and CSS

Unveiling the Three Paths

When it comes to designing a website, the visual appearance of a webpage is primarily influenced by two technologies - HTML and CSS. These two technologies work together in three distinct ways: inline styles, embedded style sheets, and external style sheets. Let's unravel the artistry behind these methods, exploring their strengths and weaknesses.

Inline Styles

Inline styles introduce CSS directly to an HTML element using the style attribute. These styles are convenient when dynamic changes are needed – a realm where JavaScript often wields its magic. However, the drawback is their limited scope; they can't be easily extended or reused across different elements.

For example, let's apply an inline style to change the text color to blueviolet.

html

index

css

index

js

index

copy

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

css

index

js

index

copy

External Style Sheet

The external style sheet emerges as the grand maestro of CSS management. By employing the <link> tag within the <head> of an HTML document, this technique offers scalability, maintainability, and reusability – qualities coveted in web projects.

But how does it work? We create a file with the css extension and reference it in our HTML document. Below is a glimpse of both files, index.html and index.css.

html

index

css

index

js

index

copy

The rel attribute stands for "relationship". rel="stylesheet" denotes how the index.css is related to the index.html.

Note

Remember that while inline styles cater to a single element, styles from an External Style Sheet or an Embedded Style Sheet can adorn multiple elements, streamlining your design efforts.

What ways of adding styles to the HTML document exist?

What ways of adding styles to the HTML document exist?

Select a few correct answers

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 1. Chapter 2
some-alt