Adding CSS to Your Projects
Adding CSS to your projects
There are three ways to load CSS into a web page:
- Using a
Let’s take a closer look at each method:
One of the most effective ways to use CSS is to use a
link tag. This is because our CSS file is connected to all our web pages, so when we make changes to the CSS file, they’re reflected on all of the website’s pages.
We add a
link tag with the
href attribute pointing to the CSS file we want to include.
This line of code should be added inside the
headtag of the site (and not inside the
bodytag) as follows:
<link rel="stylesheet" type="text/css" href="styles.css">
type attributes are required because they tell the browser which kind of file we’re linking. An explanation of these attributes is given below:
relattribute identifies the relation between the current document and the linked document.
typeattribute specifies the media type.
hrefattribute provides the location of the document.
We’re free to link up as many CSS files as we’d like. However, for smaller websites, a single CSS file is desirable because our page will load faster when it only needs to find one style sheet file.
We can use CSS directly inside a
style tag, like so:
This way, we don’t have to create a separate CSS file.
The point of CSS is to separate our presentation from our document structure - so the
style tag is not the best practice. However, it can be an excellent way to test some CSS before working with a separate file quickly.
Using inline style
Another way to add CSS to a web page is to use inline style. We can add a
style attribute to an HTML tag and put our CSS in double quotes:
Let’s alter the
background-color of the
<div> element to orange using the inline style technique
Let’s set the font-size to
32 32px on our
<h1> tag and change the background and font colors.
Note: The unit px stands for pixels , we’ll review at CSS units in more detail later in the course.