What Is the Difference Between HTML and CSS?
The main difference between HTML and CSS is that while HTML defines the structure of web pages, CSS is used to style those pages with a variety of different features. If we think of HTML code as the skeleton of a web page, CSS would be its skin.
Other differences between HTML and CSS include:
- HTML consists of text contained within HTML tags, while CSS is made up of declaration blocks and selectors
- Where HTML gives a web browser display information of various tags, CSS enhances that information to the browser by adding styling to those HTML tags
- CSS can be used inside an HTML document, but HTML cannot be used inside a CSS sheet
- CSS is used for presentation and visual effect — to manipulate colors, fonts, and backgrounds, add visual style to sites, prepare images, specify margins and borders, and much more — while HTML is not
There are three ways to link or add CSS to an HTML page: inline style, internal style, and external style.
The easiest method for adding CSS to an HTML file, an inline style is applied to HTML documents through the style attribute. Inline styles can apply unique styles to HTML elements or a single HTML element. Any CSS property can be contained within the style attribute. It should be noted that because inline styles mix presentation and content, this method shouldn’t be used too frequently.
This is a centered paragraph with blue text.</p>
If a single HTML page has a unique style, you can use an internal style sheet, which will be defined within the head section of an HTML page within the style element.
As you write HTML, you can place as many CSS styles as you want between the opening and closing style tags, before the body. Here is an example of internal CSS.
<title>Embedded Style Sample</title>
An external style sheet is a text file containing only CSS style formats that will have the .css extension. External style sheets allow you to alter a website’s look by swapping out only one file.
External style sheets and HTML files are separate. External styles will be defined in the head section of HTML pages within the link element. External CSS files should not contain any HTML tags. You should also save your HTML file in the same folder as your .css file.
<link rel="stylesheet" href="styles.css">
Learn HTML & CSS Today
Get hands-on experience writing real code while you learn with interactive tutorials in our free online learning platform – no downloads or complicated setup required.
- Free and fun
- Designed for beginners
- No download or setup required