How do external, internal, and inline CSS differ in an HTML5 page?

External CSS is stored in a separate stylesheet, internal CSS appears in a block, and inline CSS is placed directly on an element. Inline styles generally take precedence over page and external styles.

How can I place text over an image using CSS?

Place the image and text inside a positioned container, then use relative positioning on the container and absolute positioning on the text overlay.

What does position: sticky do in CSS?

It keeps an element in its normal layout until a scroll threshold is reached, then holds it in place within its scrolling container.

Free online course CSS and HTML5

Duration of the online course: 5 hours and 40 minutes

New

Build and style modern web pages with a free HTML5 & CSS course. Learn layouts, hover effects, animations, and responsive-ready design with certificate.

In this free course, learn about

CSS’s role with HTML: separating content structure from presentation and styling
Basic CSS syntax: selectors, properties, values, and rule blocks
How to apply CSS: external, internal, and inline; and how overrides/cascade work
Using CSS classes: reusable styling across multiple elements; tag-based class targeting
Using IDs: uniquely identify elements and apply specific styles with higher specificity
Styling divs and borders, including rounded corners via border-radius
Formatting HTML tables, including border-collapse behavior and spacing control
Using :nth-of-type to style repeating patterns (e.g., zebra striping rows/items)
Hover effects with :hover to improve interactivity and user feedback on elements/links
Creating attention-grabbing alert animations with CSS (keyframes + noticeable cues)
Overlaying text on images using positioning (relative/absolute) and stacking context
Controlling element transparency with opacity for text/images and layered effects
Creating shapes (e.g., circles/rounded shapes) using border-radius and related properties
Building CSS animations and setting key parameters like animation-duration
Using position: sticky to keep elements fixed after scrolling past a threshold

About the free online course

Turn plain HTML into polished, professional-looking web pages by learning how HTML5 structure and CSS styling work together. This free online course helps you build a strong foundation in front-end development, moving from the core idea of separating content from presentation to the practical skills you need to design interfaces that look consistent, readable, and engaging across screens.

You will start with the essentials of CSS syntax and understand how styles are applied and prioritized. From there, you will practice the most common ways to connect CSS to HTML and learn when each approach makes sense. As your confidence grows, you will use classes and IDs effectively to target elements with precision, a key skill for maintaining clean, scalable code on real projects.

Beyond basic styling, the course guides you through creating visually clear sections using divs, borders, and rounded corners, and it shows how to improve data presentation with table formatting. You will also explore selector techniques such as nth-of-type to style repeating elements without cluttering your markup, making your pages easier to maintain and update.

To make interfaces feel interactive, you will apply hover formatting and refine hyperlink styles to improve navigation cues and usability. You will also learn how to create attention-grabbing effects with simple CSS animations, which are especially useful for alerts and status messages where visibility matters. Visual design skills continue with techniques for overlaying text on images, working with positioning, and using opacity to balance readability with aesthetics.

By the end, you will be able to produce pages that look intentional and modern, including small UI flourishes like shapes made with CSS and practical layout behavior such as sticky positioning for headers or menus. The result is a solid starter toolkit for anyone aiming to enter web development, enhance a portfolio, or collaborate more effectively with designers and developers.

Course content

Video class: CSS and HTML 5 - CSS and HTML 5 Introduction 23m
Exercise: Which of the following statements best explains the role of CSS in web development?
Video class: CSS and HTML 5 - Basic CSS Syntax 17m
Exercise: What is the primary purpose of CSS when used with HTML?
Video class: CSS and HTML 5 - Adding CSS to HTML (External, Internal, Inline) 25m
Exercise: Which method of including CSS in an HTML document allows you to overwrite any CSS specified at higher levels?

Video class: CSS and HTML 5 - Classes in CSS 14m
Exercise: What is the primary function of using classes in CSS?
Video class: CSS and HTML 5 - ID in CSS 15m
Exercise: What is the purpose of using IDs in HTML documents?
Video class: CSS and HTML 5 - DIV Tags and Borders 13m
Exercise: In CSS, what property would you use to create rounded edges on a border of a 'div' element?

Video class: CSS and HTML 5 - Table Formatting 15m
Exercise: What is the purpose of using the 'border-collapse' property in CSS when styling HTML tables?
Video class: CSS and HTML 5 - nth-of-type Formatting 20m
Exercise: What is one way to use the CSS 'nth-of-type' selector when formatting HTML documents?
Video class: CSS and HTML 5 - Tag Based Class Attributes 11m
Exercise: What is one of the main uses of a CSS class in HTML documents?

Video class: CSS and HTML 5 - Hover Formatting 18m
Exercise: Which of the following describes how CSS hover effects can enhance user experience on a webpage?
Video class: CSS and HTML 5 - Basic Animation for Alerts 26m
Exercise: What is one of the best ways to ensure that users notice a critical temperature alert in a CSS-based web monitoring application?
Video class: CSS and HTML 5 - Text Overlay on Images 23m
Exercise: When overlaying text on an image using CSS and HTML, what is the primary technique being utilized?
Exercise: In CSS, when positioning text over an image within a webpage, what is the most accurate way to describe the process?

Video class: CSS and HTML 5 - Opacity for Text and Images 15m
Exercise: What CSS property allows you to adjust the transparency of an HTML element?
Video class: CSS and HTML 5 - Making Shapes 20m
Exercise: Which of the following shapes can be created using CSS border-radius property on a square?
Video class: CSS and HTML 5 - Format Hyperlinks 10m
Exercise: Which CSS pseudo-class can be used to change the style of a hyperlink when the mouse pointer is hovering over it?
Exercise: Which of the following describes what happens when you hover over a hyperlink formatted with CSS?

Video class: CSS and HTML 5 - Animations 21m
Exercise: What component is essential for setting the duration of a CSS animation when creating a class for an animation?
Video class: CSS and HTML 5 - Sticky Position 09m
Exercise: What is the main functionality of the CSS 'sticky' position in a web document?

This free course includes:

5 hours and 40 minutes of online video course

Digital certificate of course completion (Free)

Exercises to train your knowledge

100% free, from content to certificate

External CSS is stored in a separate stylesheet, internal CSS appears in a