Join us and get access to thousands of tutorials and a community of expert Pythonistas.
This lesson is for members only. Join us and get access to thousands of tutorials and a community of expert Pythonistas.
Leveraging CSS Frameworks
00:00 A CSS framework provides you with ready-made CSS code. In order to use a CSS framework, you may need to adjust your HTML code to comply with its rule set, but once you’ve gotten used to a CSS framework, it can save you the work of explicitly styling HTML elements.
00:16 You can use the CSS framework and your own local style sheet. If you’ve referenced more than one style sheet on your website, the order matters.
00:26 One of the most popular CSS frameworks is Bootstrap. You’ll also encounter Simple.css or Bulma. You can jump back into the code to see how this all works.
00:37
You can add external non-local style sheets, just like your local style sheet with the <link> element. First, go ahead and add another style sheet link to your HTML pages. So within your <head> element and just below the <title> element type <link>, rel="stylesheet" href= "https://cdn .simple css.org/simple.css".
01:12
Now copy and paste this to your other HTML file. Copying line eight, opening gallery.html. Inside the <head> element and just below the <title> element, I’m going to paste that. As the C in CSS implies, You can also add cascade style sheets.
01:31
Open your index.html file in your browser to see how the style has changed.
01:37
You combine the style rules of your local style.css and the external simple.css. The most notable difference is the spacing. It’s now more centered on the page.
01:47
You may also notice that visited links, such as Gallery, now have a blue styling. This makes it a bit hard to see, but don’t worry you’ll address this soon.
01:57 First, head back over to your code and try changing the order of the style sheets.
02:03
You can now move your local style sheet to come before the external simple.css, so highlight line nine where you have your local style sheet, copy, and then remove, and then go above the simple.css link and just below the <title> element, drop down to new line and paste it.
02:24 Take a look at how this changes your style in the browser.
02:28 Notice how the order made a difference? Similar to overriding variables in Python, CSS properties overwrite each other. Generally speaking, the last value that is applied to the element wins.
02:40 Before moving on to the next section, go ahead and move the order back to how it was before for your style sheets.
02:47 In the next section, you will learn how to style elements with the use of CSS classes.
Become a Member to join the conversation.