- Lab
-
Libraries: If you want this lab, consider one of these libraries.
- Core Tech
Guided: Styling Your First Web Page with CSS
Go from plain HTML to a polished web page! In this hands-on lab, you’ll learn the fundamentals of Cascading Style Sheets (CSS) by styling a simple profile page. You’ll discover how to add colors, adjust fonts, and structure your content with spacing and borders. By the end, you’ll have transformed a basic document into a visually appealing design and gained the foundational skills to style any web project.
Lab Info
Table of Contents
-
Challenge
Getting Started with Internal CSS
Welcome to the CSS fundamentals code lab! You'll start with a plain HTML file and bring it to life with CSS. The first method you'll learn is using an internal stylesheet. This involves placing CSS rules directly inside your HTML file using a
<style>tag, which is a quick way to apply styles to a single page. With the<style>tag in place, you can now add your first CSS rule. A CSS rule consists of a selector and a declaration block.- The selector targets the HTML element you want to style. For this next task, you'll use an element selector, which targets an element by its tag name (like
body). - The declaration block contains one or more declarations, each consisting of a property and a value. info> This lab experience was developed by the Pluralsight team using Forge, an internally developed AI tool utilizing Gemini technology. All sections were verified by human experts for accuracy prior to publication. For issue reporting, please contact us.
- The selector targets the HTML element you want to style. For this next task, you'll use an element selector, which targets an element by its tag name (like
-
Challenge
Styling Text
Styling text is one of the most common tasks in CSS. You can control size, color, font, and line spacing. In this step, you'll use element selectors (
h1,p) to apply styles to the heading and paragraph text. Properties such asfont-familyandline-heightare crucial for good typography, it can help improve the readability for longer blocks of text. -
Challenge
Using an External Stylesheet
Placing CSS in an internal
<style>block is fine for small examples, but for real-world projects, it's best practice to use an external stylesheet. This approach separates your CSS into its own.cssfile, keeping your code cleaner, more reusable, and easier to maintain. To make your HTML page aware of the new CSS file, you must link to it using the<link>tag within the<head>section. The final step in this refactor is to move the styles you've already written fromindex.htmlinto your newstyles.cssfile. -
Challenge
Class and ID Selectors
Sometimes, you don't want to style every element of a particular type. Class selectors let you apply a style to any element you choose by adding a
classattribute to it in HTML. A class can be used on multiple elements. In CSS, you target a class with a period (.) followed by the class name. ID selectors are even more specific. They are used to target a single, unique element on the page. In HTML, you use theidattribute, and in CSS, you target it with a hash (#) followed by the ID name. -
Challenge
The CSS Box Model
Every element on a web page can be thought of as a rectangular box. The CSS Box Model describes how this box is constructed. It consists of four parts, from the inside out: the content, padding, border, and margin.
- Content: The area where the actual element content (text, images) is placed.
- Padding: The space between the content and the border.
- Border: A line that goes around the padding and content.
- Margin: The space outside the border, separating the element from other elements.
In this step, you'll manipulate these properties to control spacing and layout. Next, you'll add a border to visually enclose the main content area. As a final touch, you'll use the
border-radiusproperty to create rounded corners, giving your design a softer, more modern look.
Real skill practice before real-world application
Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.
Learn by doing
Engage hands-on with the tools and technologies you’re learning. You pick the skill, we provide the credentials and environment.
Follow your guide
All labs have detailed instructions and objectives, guiding you through the learning process and ensuring you understand every step.
Turn time into mastery
On average, you retain 75% more of your learning if you take time to practice. Hands-on labs set you up for success to make those skills stick.