- Link an external CSS file
- Write CSS rules to style HTML
In this lab, we will be adding style to our index.html page by linking an
external CSS file. If you open index.html in the browser (by either opening
the file with Google Chrome or running httpserver on the Learn IDE), you will
see basic HTML that has been provided. The website emulates a basic Real Estate
website (the links on it have been disabled, we will be working with only the
basic index.html landing page).
As you can see, our basic page is rather lackluster. This is where you come in!
You will be adding CSS, using selectors, to jazz the page up. All of our CSS
should be written in style.css.
As usual, we need to make sure our HTML is loading our style sheet.
We have two options:
- Write CSS rules inside of a
<style>tag ("internal CSS"), which tells HTML "Hey, I want to define some CSS styling here - Write CSS rules in an external file that is specified with the
<link>tag ("external CSS").
In our case, we want to provide a link to our style sheet, instead of writing
all of our CSS code directly in the <style> tag. This allows us to only have
to write styles for the entire site once, instead of repeating every <style>
element on every page. A common workflow is to see developers work on CSS
inside of the <style> tag until their styling is done. At that point, they
move it to their external file and remove the <style> element from the HTML
page. Feel free to try it out!
In index.html, provide a <link> tag which correctly sources the CSS file
located in this directory. The <link> tag will link to our file with an
href attribute, like so:
<link rel="stylesheet" href="relative path to CSS file">Links to style sheets should go at the end of the <head> section! Make sure
you provide a relative path to the style sheet.
Now, what is a relative path? You could write href="style.css" and the
content of style.css would change your index.html file. But we want to
teach you to require external resources (like CSS or JavaScript) by using
relative paths. Relative paths make it crystal clear which file is being
used. Relative paths start with ./ which means "from the directory I am
currently in." So, when we use link to associate with a style sheet and we
write href="./style.css" we're saying: "From the directory in which I, the
index.html file live, look for a file called style.css and use it. This
pattern will help you and other developers remove any possible confusion.
Hint: Try adding the following temporarily to your style.css file to test if
your linked CSS is working:
h1 {
color: red;
}If you see your <h1> change to red, you've linked your style sheet correctly!
Don't forget to delete it once you have your link working.
For this exercise, we are going to be transforming our base HTML into a more exciting version using CSS.
It is important to note that there are many ways to go about transforming the
HTML with CSS to match the end product. For this lesson, we will provide you
with general guidance in one way of getting to the desired view by adding to
the style.css. Ultimately, the goal is to have your website look like the
finished product whatever way works the best for you.
Note: If you are having trouble finding the specific CSS property you need to get a specific visual outcome, use your Google-Fu with queries such as: "CSS center text within div".
In following the guidelines, you should be referencing the index.html to find
the appropriate tags/IDs that we will use as selectors in our style.css file.
Don't forget: you can use the Chrome Inspector Tool (cmd + shift + C on Mac)
to inspect specific elements of the DOM (and make trial changes to their CSS) in
the browser.
-
Update the header: the text is a little wonky being aligned on the left like that. Provide a property that aligns it in the center instead
-
Center our image: We only have one image on the page and we would like it centered!
-
Jazz up our navigation links: Let's center all of our nav links as well. Give all of the
<a>tags within our navbar padding of 10px on their left and right sides. In addition, change their background color to something of your choosing. We chose grey! -
Our image caption needs work: Let's shrink that font size down and make sure it is centered.
-
Update the text block: Wouldn't it look nicer if our text was centered as well? Our image is about 900px wide, so let's give all our
<p>within#featured-propertya hard width of 800px and center the text in there. -
Make our
#detailssection horizontal: The details section could go nicely as a footer to the page, instead of a vertical list. Change itsdisplayvalue to block and make sure each of the<div>s isfloating to theleft. -
As a finishing touch: Let's clean up the
<div>s at the bottom of the page. All of them should have the same background color, centered text, and occupy 25% of thewidthof the bottom row (since we have 4 divs).
CSS allows many avenues to the same goal. The important takeaway is to experiment and become familiar with the commonly used rules. This will enable you to identify what properties will get you to which end result the quickest.
You will find that even years into your career as a front end developer, you will be referencing basic CSS documentation. This is to be expected!. To be comfortable quickly finding the property/value you are looking for online is the most important skill set you can develop right now. Memorization is for machines, adaptation is for humans!
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent