When you start learning about web development, some of the first terms you’ll come across are HTML and CSS. What’s the difference between them and how do they play a role in building websites?
We’ll dive deeper into these two languages later on, but here are the basics: HTML is a markup language for creating the structure of a web page, and CSS is a style sheet language for designing the look and feel of a web page. You’ll typically use the two languages together to build websites.
In this post, we’ll cover the key difference between HTML and CSS. We’ll also discuss how both languages work together to form the content and presentation layers of a website or web application.
What is HTML?
Hyper-text markup language (HTML) is a markup language that’s used to describe the structure and content of a website or web application. A single HTML file contains many different elements, such as headers, paragraphs, tables, lists, and more. Each element has an opening and closing tag, and elements can contain different attributes and properties.
HTML documents consist of a tree structure: the root <html> tag branches out into child tags like the header <head>, body <body>, and footer <footer> of the page. Then these elements can have individual headings (<h1>, <h2>, etc), paragraphs (<p>), and so on. Hyperlinks (the anchor <a> tag) can also be used to link web pages or HTML documents to each other, forming the larger structure of a website.
There are over 100 different HTML tags that browsers can parse to display a web page. That said, you don’t need to memorize all of them to become a front-end web developer. As you continue working with HTML to build more websites and web apps you’ll start to learn the most commonly used tags.
For more information about working with different HTML elements, see the Treehouse course library related to HTML.
Features of HTML
- HTML offers over 100 tags to define the basic elements of a web page
- The markup language is supported by all major web browsers running on any OS
- HTML uses a tree structure to organize the content of a web page
- An important aspect of HTML is using links to connect multiple pages into a website
- Most front-end developers find HTML easy to learn and understand
What is CSS?
The cascading style sheet (CSS) language is another front-end development tool that’s used to define the look and feel of a website. A CSS file (or inline CSS embedded into an HTML file) contains individual style attributes, such as font sizes, colors, layout, and more. These are applied to different HTML elements based on CSS selectors and declarations.
CSS code can start to get complicated once you start applying different styles for various devices, screen sizes, resolutions, and more. In addition, one of the greatest challenges with CSS is that it is not uniformly supported by different web browsers like Firefox, Safari, and Chrome. That means a web page with the same stylesheet might not look the same on different devices or web browsers.
For more information about using CSS to design web pages, see the Treehouse course library related to CSS.
Features of CSS
- CSS offers a range of different declarations and properties for styling pages
- The primary advantage of CSS is separating the design from the content of a web page
- CSS can be linked to HTML through multiple methods: inline, internal, or external.
- Selectors enable you to target any element or group of elements in an HTML file
- CSS declarations use a key-value pair format to define different style properties
HTML vs CSS
| HTML | CSS |
| Defines the structure and content of a web page | Defines the look and feel of each HTML element |
| Includes tags for headings, paragraphs, tables, lists, and other structural elements | Includes selectors and declarations for colors, fonts, layouts, and other design elements |
| Enables web developers to create the hierarchy of a website using hyperlinks | Enables web developers to adapt the website to different types of devices |
| HTML only allows you to add static content to web pages like text and images | CSS allows you to add animations and transitions to improve the UI of a web page |
| HTML files are saved with the .html extension | CSS files are saved with the .css extension |
Key Differences Between HTML & CSS
| Difference | Explanation / Significance |
| Language Type | HTML is a markup language. CSS is a style sheet language. |
| Requirements | You need HTML to create a basic webpage, but using CSS is optional. However, the page will effectively be plaintext. |
| Dependency | You can embed CSS code directly into HTML markup, but you cannot embed HTML into CSS code. |
| Architecture | HTML uses enclosing tags to define individual web page elements whereas CSS uses block syntax for selectors and declarations. |
| Compatibility | HTML is standardized across web browsers, while CSS has slightly different interpretations within Firefox, Chrome, Internet Explorer, and other browsers |
| Learning Curve | HTML is much easier to learn because CSS has many different quirks to deal with across different browsers. |
Link CSS To HTML
As you can see, CSS and HTML each serve a very different purpose when building a webpage or website. HTML is used to create the content or structural layer, while CSS is used to create the presentation layer. By keeping these two layers separate, it’s much easier to build and maintain a website.
That said, there are multiple ways that CSS can be linked to CSS:
- Inline: By using a style attribute within any HTML tag, we can add CSS code directly to an element. This is useful for very specific style changes to only one element, but this can get messy if used often throughout a large website.
- Internal: By using the <style> tag in the page head section, we can add CSS code to a web page. The advantage of using this method is that all of the CSS code for the page is grouped together in one location for easier reference.
- External: Instead of putting the CSS code directly in the page head section, we can also add a link to an external CSS file. This allows us to reference the same stylesheet from multiple web pages to leverage the CSS code across a large website.
A Basic Example of CSS and HTML
Here’s a couple quick code snippet to show you the basics of HTML and CSS and how they interact with each other:
<p class=”class-example”>This is a paragraph</p>
In this example, you can see that we’ve used HTML to define a paragraph element with the <p> tag. Our paragraph also has a class attribute with a value of “class-example” so that all the relevant style declarations from that class are applied to it.
Here’s what the CSS for a style declaration for that class could look like:
p.class-example { color: blue; }
This CSS code uses a selector to identify any paragraph element with a class attribute containing my “class-example” and sets its text color to blue. The curly braces can include any number of properties to define how “class-example” paragraphs should look.
The advantage of separating the style from the structure is that the same CSS declaration could be used across multiple web pages or even an entire website. This not only reduces the amount of code a website requires, but also makes it easier to maintain consistency as the site grows.
Where Does JavaScript Fit In?
A third aspect of modern front-end development we haven’t covered in this article is turning a static HTML-based website into a dynamic web app. This behavior layer is built with JavaScript because HTML and CSS aren’t full programming languages, but rather markup and style sheet languages.
JavaScript brings new functionality to a website or web app by making it more dynamic. This includes navigation, buttons, search bars, forms, and other interactive elements that improve the user experience. HTML, CSS, and JavaScript are all critical languages for building a modern web app.
Learn Coding Fundamentals With Treehouse
We’ve covered a lot in this post, but the most important thing to remember is that HTML and CSS play different roles in building a modern web page. HTML defines the structure of the page, while CSS defines its look and feel. Both languages — as well as JavaScript — are crucial for creating a great user experience for a website or web app.
When you get started with front-end web development, you’ll most likely want to learn all three languages at the same time because they complement each other. This may sound intimidating, but most coding students find HTML and CSS very easy and straightforward to pick up. And with the right front-end development courses, you’ll have the resources you need to set yourself up for success.
As part of our Front End Web Development Track, you’ll learn the ins and outs of HTML, CSS, and JavaScript. This guided curriculum starts with the basics of HTML and CSS before moving on to JavaScript and responsive, mobile-first web design. You can also learn about more advanced topics like web accessibility and performance optimization.
If you want to take this a step further, our Front End Web development Techdegree is an online certification program that gives you the real-world experience you need to land a front end development job.