Alejandra has learned CSS and created the desired visual rules to make her website look sleek and polished.
Navigate to the style.css file to take a look at the CSS code that she’s written.
In this file, you will recognize many of the HTML tags that you have been working with — and maybe a few that you haven’t seen yet! CSS contains selectors that specify the HTML elements to which the style should be applied as well as visual rules that specify how that content should be displayed.
Now it’s time to use the HTML link element to apply the CSS file to her existing website. This is done with an HTML link tag. An HTML link tag is often used to create a connection between an HTML file and the CSS file and tells the browser to apply the CSS styles to the HTML.
On line 6 of index.html, copy and paste the code below to apply the CSS file to the existing HTML.
Use your knowledge of HTML attributes to figure out what this code specifies, and check out extra information in the hint if you want to learn more.
<link rel="stylesheet" href="style.css">
Awesome! Alejandra’s site is looking good! Just a little CSS can make the difference between a website that looks like a skeleton and portfolio-ready site.
Now let’s tweak the CSS just a little bit, to see how the visual rules specified in CSS can change the way that a website is displayed.
Navigate to the style.css and scroll down to line 37 where you will see the
h1 selector. This section defines the styles for the
h1 element on the page, which is the most prominent heading.
Just for practice, change the
color property from
black and press Run to see what changes!
Good job changing the color of the
If you look at the rendered browser, you’ll notice that the heading text is no longer readable in-front of the image.
Let’s change the color property within the
h1 selector back to white.