In this section, we will learn how we can mix CSS in HTML.
What is CSS?
CSS stands for Cascading Style Sheet and it’s a language that we use to style the elements of an HTML document.
For example, using CSS, we can change the font size, background color, the border color and size of a text content.
Or we can make the elements in an HTML document to move around and create an animation out of it.
There are so many things you can do with CSS but the bottom line is that using CSS you can style HTML elements and as a result create a beautiful document.
Note: if you’re interested in learning CSS in great details, please check the CSS tutorial section.
How to Use CSS in HTML
In short, there are three ways to include CSS into an HTML document:
- inline CSS
- Internal CSS
- External CSS
HTML Inline Style
The inline styling comes along when we use the `style` attribute and assign CSS properties as the value of this attribute.
This type of styling is used when we want to specifically style one HTML element!
For example, you have one element within a group of elements of the same type and want to specifically style that one element, but don’t care about the rest of elements of the group. This is where you can use the inline style.
Note that we usually don’t use this type of styling! This is because if we want to apply a style to a group of elements of the same category, then we have to copy and paste the same style for every element! There are better ways of course, but before that, let’s first see how to practically use the inline styling in HTML.
Example: inline styling in HTML
See the Pen inline styling in HTML by Omid Dehghan (@odchan1) on CodePen.
In this example, we have two paragraphs and using the style attribute, we’ve used the CSS `color` property to change the color of the first paragraph into red and the second paragraph into blue.
Internal Style Sheet: Include CSS in HTML
The second method of invoking CSS into an HTML source code is by using the HTML <style> element.
Here’s the syntax of this element:
<style type="text/css"> </style>
Note that this element has an attribute called `type` with the value “text/css”. This attribute helps browsers to realize the type of content we’ve put within the body of the element! Basically, the value “text/css” tells the browsers that the type of content inside the body of this element is CSS and so the body must be used to style the elements of the document.
Now, within the body of the <style> element, we put CSS codes to style the elements of the document.
Example: CSS style within HTML
See the Pen CSS style within HTML by Omid Dehghan (@odchan1) on CodePen.
Note: please check the CSS tutorial section if you’re not familiar with CSS.
Link CSS to HTML: External CSS
The third method of bringing CSS source code into an HTML document is by linking that source code using the <link> element to an HTML document.
Using this method, we first write the entire CSS source code in a separate file (independent from the file that holds the HTML source code) and then within the body of the target document we call the <link> element and pass the address of that external CSS file as the value for the `href` attribute of this <link> element.
Now when browsers see the <link> element, they check the `href` attribute to get the address of the external CSS file and download and bring its content to the document for styling the content.
Example: linking a CSS stylesheet to HTML
See the Pen linking a CSS stylesheet to HTML by Omid Dehghan (@odchan1) on CodePen.
You can see that we’ve invoked the `<link>` element within the body of the <head> element. One reason to put this element in the body of the <head> element is to make sure browsers get the CSS style as soon as possible (before reaching to the actual elements of the document which is in the body of the <body> element).
Now, the actual CSS source code is in a file called `main.css` that is in the same directory as the HTML file itself. (Check the HTML file path section if you’re not familiar with the way directories work in HTML). So browsers now can get this file and style the document based on the code we’ve written in this source file.
Note: the attribute `rel` in the <link> element helps browsers to realize what type of content is in the target file! Although browsers can figure out the actual type based on the extension of that file (.css in this case), it’s better to put the value “stylesheet” as the value of this attribute to explicitly mention the type of content in the file.
