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.
Linking an External Stylesheet
00:00 In this lesson, you’ll learn about Separation of Concerns. In your Python code, you can import modules to prevent repeating yourself. HTML offers a similar functionality to load external resources into your HTML code.
00:14 This allows you to load an external CSS file and refer to this style sheet from your HTML files. You can jump over to your editor to create your style sheet.
00:25
Create a new file named style.css. So New File, style.css, enter. Make sure your new style.css file is in the same parent directory as your index.html file.
00:43
Now cut the style content out of your index.html file. So open an index.html if it’s not already open, and highlight from your opening style tag down to your closing style tag and cut that content.
00:59
Now head back over to style.css and paste it here.
01:06 From here you can remove the <style> tag. In a CSS file, you only need the CSS declarations. So on line one, remove the opening <style> tag and line 11, remove the closing <style/> tag.
01:19 You may have noticed the copy/paste left you with some odd indentation. If this happens, just select all the content you pasted from before and then use the keyboard shortcut shift plus tab and it moves it back one space.
01:31
So shift plus tab again and it moves it all the way back to the beginning. Add a comment at the top of your file by writing /* style.css and then */. Notice how the comment is a forward slash followed by an asterisk.
01:50
You can distribute a CSS comment across multiple lines. With the style that CSS file set up, you’ll need to reference this file from your index.html file, so open index.html and within this file inside of your <head> element, add a <link> element.
02:08
So just below <title> add <link> rel="stylesheet" href=" style.css". The rel attribute specifies the relationship between the current document and the linked resource.
02:27
In this case, the linked resource is a style sheet. Just like the anchor tag, the <link> element contains an href attribute that defines the link.
02:35
Unlike an anchor tag, the <link> element is an empty element or void element. It contains attributes only and won’t render a clickable hyperlink. Next, add the link to your style sheet within the <head> of your gallery.html file.
02:50
So open gallery.html and inside of the <head> element and just below the title, drop down and add link rel="stylesheet" space href="..
03:13
Remember, the style.css is one directory above gallery.html. So instead of just linking style.css, you must link to ../style.css to move up one directory.
03:26 Great. Now that you’ve updated the CSS references, have a look at your pages in the browser.
03:32
You can see the styling from before. Head over to your gallery.html page. All your pages now share the same styling. If you make a change to your CSS file, you’ll see it reflect on all of your pages.
03:46 Now that you know how to link external CSS files, it is a great time to get a bit of an introduction to CSS frameworks.
Become a Member to join the conversation.