Name: How To Apply CSS Styles to HTML
Uploaded: 2023-03-16T14:19:59Z
Duration: 4 min 32 s
Description: HTML specifies the content and structure of a webpage, Cascading Style Sheets (CSS) is the language used to define how HTML elements are styled and displayed. Use this video to learn how to use CSS to style your HTML documents.

Web Design includes any skills used to create and maintain a website. These videos explore the foundational web design skills of adding styling to a website with CSS and HTML, as well as best practices in responsive web design.

Web Design

HTML specifies the content and structure of a webpage, Cascading Style Sheets (CSS) is the language used to define how HTML elements are styled and displayed. Use this video to learn how to use CSS to style your HTML documents.

How To Apply CSS Styles to HTML

In this video, we're going to start our discussion on Cascading Style Sheets. Now, if you're coming here from the HTML course, you know that our, a web page can have several different tags to that page. We can have <div> tags, <h1> tags, <form> tags, buttons and so on. However, the tags that you add to your HTML document will simply add structure to that document.

In order to add some color, some, maybe some formatting and layouts and things like that, you do need another technology called CSS, Cascading Style Sheets. Now what you're looking at on the screen right now are two exact same HTML documents. They simply have a pair of <div> tags with an h tag inside of that, with some textual content in the middle.

So what we have on the left is just HTML, but on the right-hand side, if you notice we have added a style to the pair of <div> tags. [Video description begins] The style reads: "color:blue;". [Video description ends] What this style is going to do is it's going to color all of the content between those <div> tags blue, meaning the textual content will be turned into a blue color. Now, the <h1> tag that you see there does not have a style to it.

So you might be thinking, why does it turn blue if the <div> tag has the style, but not the <h1> tag, because the <h1> tags contain the textual content. So this is where the cascading nature comes in, because what's going to happen is that the <h1>, the pair of <h1> tags inside of our <div> tag, those <h1> tags are considered the child to the parent, which is the <div> tag. [Video description begins] Inside the h tags, it reads: Just some content. [Video description ends]

So in this case, the style would cascade down into the child element, which is the pair of <h1> elements, and there we have our textual content, which will be turned to blue. Let's take a look now at some of the advantages of CSS. Apart from the fact that we can make our page look and feel a lot better, we can also do things like separate the content from our style.

And by separating out our content, what I mean is that we're going to be separating out our HTML documents or HTML files with the tags inside of them that will be separate to the CSS, which could be another file, or it could be inside of the same file as well. But we have the ability to separate out these two different files and therefore increase our productivity and make web development a lot more efficient, a lot more fun.

Also, by being able to separate out our content from our style, we are able to apply the same style to multiple pages. So we can, in a typical website, we can have as many of those individual web pages as we want. And by having one style, we can therefore add that style to all of the pages inside of the website, so we have consistency. Also, we can have different presentation modes.

So for example, if you wanted to have that same web page be printer-friendly, then we can have a specific style for our printer. Then if you wanted it to be mobile-friendly, we can have another style sheet that we can add to the same web page and therefore make the content more accessible to mobile devices, and the same for Braille devices.

Let's take a look now at how we might add CSS to our HTML content. Now what you're looking at here, you've seen before, at least the first item on the top left, we've seen that before, where we added a style to the pair of <div> tags, but also we're able to add styles by adding it in as a separate "stylesheet". [Video description begins] The host highlights: <link rel="stylesheet" href="style.css">. [Video description ends] Usually it will have an extension of .css.

So here in our <head> tags of the HTML document, we are linking a "stylesheet" called "style.css". So in this way, we can add that "style.css" template or, or style to all of the various web pages that we have in our website. Also, if you want it to have styles just specifically for one particular page, well, then you can add that style into the <head> tags of the HTML document. [Video description begins] Under the <title> tag, the host highlights: <style> body { background-color: linen; } </style>. [Video description ends]

As you can see here, we have a pair of <style> tags, and inside of that, we have a style that will affect just the body of this web page. So there are three ways, three main ways, of applying styles to your HTML documents.

Join us for an assortment of livestreams where we cover topics such as interview prep, introductions to programming languages, project walkthroughs  — and so much more!

All Livestreams

There is a lot of excitement around AI, but what is it and how could it be relevant to your career? Watch these videos to learn the basics of AI and Machine Learning.

Artificial Intelligence

Augmented reality is alive and well. Learn how to make your first AR experience using the popular web framework A-Frame — with guidance from our Curriculum Developers.

Augmented Reality

Learn how to build a Web Dev Portfolio with Codecademy.

Building a Web Dev Portfolio

No matter what your coding goals are, the best place to start is by building a strong foundation. In this live series, we learn Computer Science fundamentals that are similar to content you’d see in a first-semester CS101 college course.

CS101

Cloud computing and its related services have unlocked seemingly endless possibilities for organizations with an online presence. These videos give an overview of what cloud computing is and what business considerations are made when adopting cloud tools.

Cloud Computing

Welcome to the Community Club & Study Group Events playlist, which are hosted by our incredible Club Captains. This collection features a series of engaging and informative events hosted by our dedicated Club Captains from around the globe. Whether you're interested in Web Development, Python programming, or simply want to connect with tech enthusiasts from different cities, this playlist has something for everyone.

Explore sessions from vibrant cities like Seoul and New York City, where our Club Captains share their expertise and insights on a variety of topics. Each event is designed to help you expand your knowledge, enhance your skills, and connect with a community of like-minded individuals.

Join us as we dive into the world of technology, learn from industry experts, and get inspired by the innovative projects and discussions led by our passionate Club Captains. Don't forget to subscribe and hit the notification bell to stay updated on the latest events and content!

Happy learning and coding!

Community Club & Study Group Events

A playlist of Quick Tip videos for Codecademy Chapter Leaders.

Community: Chapter Leader Quick Tips

Join our Chapters for live conversations on various topics — including NFT art and how to break into a technical field.

Community: Chapters

We think that connecting with other learners is the best way to learn. Explore some of our past community-led events here!

Community: Events

Hackathons are a great way to test your knowledge and flex your skills. Check out our hackathon presentations here.

Community: Hackathon

Explore the world of creative coding with p5.js, an open-source JavaScript library. We'll create drawings, animations, and video sculptures in this beginner-friendly series.

Creative Coding with p5.js

Strong cybersecurity practices are essential to every organization, be it a school, hospital, or company. These videos review common cybersecurity strategies, as well as common threats and how to identify them.

Cybersecurity

Companies can collect vast amounts of data and struggle to properly use it. Data Analytics is used to interpret and communicate relevant patterns of data for a business. These videos explore how companies utilize data analytics, and current popular tools.

Data Analytics

Data Science is used in a variety of ways to help businesses make decisions. In these videos we explore data science best practices, considerations for what tools to use, and the basics of machine learning.

Data Science

How data is presented can be as important as how it is collected. These videos explore foundational strategies and best practices to ensure that your data visualizations are meaningful and accurate.

Data Visualization

There are a lot of terms and acronyms in the world of programming. Explore the definitions of common terms used in popular languages and frameworks.

Definitions

DevOps is a series of practices that fosters a culture of collaboration between the Development and Operations team in software development. This playlist explores the benefits of DevOps, and how it is practiced in organizations.

DevOps

An understanding of Github and Git commands is essential for anyone looking to work in a collaborative software development space. These videos explore the features of Git, as well as branching and merging, two of the most important skills for collaborating on Github.

Developer Tools

HTML and CSS lie at the heart of web development. We explore some of their uses with these tutorials and explainers.

HTML & CSS

Preparing for a career in a technical field? Check out these interview tips — including advice on building a portfolio and showcasing your skills.

Interview Prep

Emojicode is a real programming language with a playful emoji syntax in place of traditional programming keywords. Learning it can bring some smiles and fun to your programming journey. Join us for an introduction to this silly language.

Intro to Emojicode

TypeScript builds on your JavaScript foundation so you can develop higher-quality, less error-prone code faster. Learn more about this in-demand language as Codecademy Curriculum Developers guide us through an introduction.

Intro to TypeScript

JavaScript has many functionalities, from web development to gaming applications. We break down the programming language and explain how it works with these tutorials.

JavaScript

From Product Manager to Data Scientist, we take a look at different careers in tech and what these roles entail.

Jobs in Coding

Experience a full day of learning to code with interactive instruction and guided discussions by the Curriculum team at Codecademy.

Learn From Home Day

Learn UI/UX

See how people around the world are reshaping their lives by learning to code.

Learner Stories

Linear regression is a fundamental machine learning algorithm used for predictive modeling and data analysis. Learn more about it as Codecademy Curriculum Developers guide you through our course: Linear Regression in Python

Linear Regression with Python

Machine learning is one of the fastest expanding fields in tech, with applications in all parts of life. Watch these videos to learn the basics of Machine Learning.

Machine Learning

Almost everything we do creates data, and knowing how to investigate and communicate it is key. Our Curriculum Developers show us how to summarize data and run hypothesis tests following our Skill Path: Master Statistics with Python.

Master Stats with Python

Mobile development is a massive field with a variety of unique tools. These videos explore two essential tools for mobile developers, the Android operating system and Flutter software development kit.

Mobile Development

Official Codecademy Events

Whether you’re solving for skill gaps, building a more innovative and resourceful team, or aiming to onboard quickly, Codecademy Teams helps your whole company build the right tech and professional skills to quickly adapt to industry shifts and meet changing business needs.

Product Demos

Since its release in 1994, Python stands tall as many developers’ favorite programming language. Explore its many capabilities with these livestreams and tutorials.

Python

The R language is a popular tool for Data Analysts. Learn more about this free, open-source programming language with these livestreams.

We asked recruiters in our community to share advice for people navigating the job-hunting process — from tips for optimizing your resume to advice on acing the technical interview.

Recruiter Advice

We show you how to get started on your coding projects — from setting up developer tools to pushing your code to GitHub.

Setting Up

Just starting out on your coding journey? We’ve gathered tips for helping you start — including advice on how to choose your first programming language and how to remember everything you’re learning.

Tips

Our Curriculum Developers will lead you on a journey as you go from complete beginner to proficiency with data visualization, using Python. This is a weekly series that will lead you through our entire Visualize Data with Python Skill Path.

Visualize Data with Python

Join the millions learning to code with Codecademy.

Welcome to Codecademy

You know all of those app ideas you’ve been wanting to create? Swift and SwiftUI can help you bring them to life for iOS. Learn how to build your very own iPhone app from start to finish in this live series.

How To Apply CSS Styles to HTML

More videos

Learn more on Codecademy

Learn HTML

Learn CSS

Resources

Support

Resources

Support

Plans

Community

Subjects

Languages

Career building

Mobile

Mobile