Bootstrap offers a handful of templates for you to jumpstart your site's creation process. We'll learn how to grab any of these templates we want.
1. Go to Bootstrap's getting started section and grab the Jumbotron template at 0:35
After you click to open the Jumbotron template then right click on the page and select "view page source". Copy the entire HTML document and replace all the code in your "index.html" file currently with the copied code. Save the new index.html file.
2. Edit the CSS path so that it is correct
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
We're creating the link so that it is relative to the current file. In other words, we're telling the browser how to get to (or the path to) the correct CSS document from the index.html file. So "css/bootstrap.min.css" is telling the browser to look for the "css" folder that is in the current folder - which is "first-site" - then go into it and find the "bootstrap.min.css" file.
3. Include our own custom.css file
View page source on the jumbotron template page if you don't still have it open. Then click on the jumbotron.css link. Copy all of the text in the document. Go to sublime and right click on the CSS folder. Click on New File, paste all the text in the document and save it as"custom.css" in the CSS folder. Then change the current "jumbotron.css" CSS link in our index.html file to our newly created "custom.css"file.
CONGRATS! You just created your first CSS file
Extra Lesson Notes
- In this lesson we are linking to the CSS file via a relative path from the file we are currently in (index.html). In a future lesson we'll discuss how to do absolute links like to http://www.google.com.
- Comments in HTML documents (or any coding documents for that matter) are for the human eye only. The code that indicates the beginning and the ending of a comment tells the browser just to skip over that section and not worry about the code in there. Comments begin with
"<!--"and end with
"-->". For example:
<!-- This is where you put the comment -->
- You’ve also seen CSS comments in this video. Check out the first line of your custom.css file where it says:
/* Move down content because we have a fixed... */. Comments in CSS start with “/*” and end with “*/”.
- Make sure to include the custom.css file lower in our "index.html" file. This way the browser reads the custom.css file second after bootstrap's CSS file. Doing it this way makes sure that the CSS rules we include in our "custom.css" file will take precedence over the same ones in bootstraps's "bootstrap.min.css" file. Don't worry if you don't understand this right now. You will see it in action soon and it will soon become second-nature.
- Bonus: a “min” file is a minimized version of a file. So instead of linking to a .css file in this lesson we are linking to a .min.css file. Browsers have to read the entire CSS file to interpret it. What a minimized version of a file does is take out all the unnecessary spaces and line breaks so that the browser can read the file faster and thus your site loads faster. Every extra line and space in a document makes it longer to for the browser to interpret it. Minimized files eliminate these unnecessary wastes.