Adding Styling

00:00 In this lesson, you will add some styling to your code image generator. Commonly, you save your style sheets in a static folder. So go on and create this folder first.

00:12 Inside your project’s root directory, create a folder named static and inside static create a file named styles.css.

00:24 Once you have created the styles.css file, you need to connect your base template with this CSS file. So in the head of your base.html file, create a link tag underneath title with the rel attribute stylesheet.

00:42 The type attribute is text/css and href is a template variable. Calling the url_for() function and passing in the string static.

00:57 And then as a second argument, filename= styles.css,

01:05 and then you close the link tag with a slash greater than sign. So with this link tag, your base HTML file will look for a styles.css file in a static folder and add any styles that you have in the styles.css file to your website.

01:21 Currently, there are no styles. So one thing to quickly check if the style sheet was correctly loaded is making the background color yellow.

01:34 And once you save the style sheet and you are reloading and your code image generator is bright yellow, you see that the style sheet was correctly loaded. Similarly to the base HTML file, I won’t go into detail with the CSS I’m adding to the code image generator.

01:51 You can download the full CSS file in the supporting materials. I will paste the content and then give you a broad overview about the styling.

02:01 Alright, I just pasted the CSS and on the right side, you see the browser already reloaded. If you are not so interested in the CSS itself, you can already skip to the next lesson.

02:11 If you are curious what the CSS code does, let me give you a broad overview. So one important detail of the CSS is that you’re adding the sans serif font type to the font of your website.

02:24 That means we don’t have the Times New Roman font anymore, but the sans serif font of your operating system. The font size is 16, so it’s a bit bigger than before.

02:34 There is some display: flex;. This part is to make the whole content centered. And then going on to the h1 headline, the font size is set to 1em so it’s also 16 pixels and not bigger.

02:49 And then there is the code for the mycode element, which has a font-family: monospace;. So it’s shown in a monospace font. And then some adjustments to make the code box look nicer.

03:02 Later, there will be more adjustments because the syntax highlighting that Pygments will do, will affect the code inside of this box. But if you want to play around with the look of the box that you make a screenshot from, this is the part of the CSS code that you need to work with.

03:17 So feel free to play around with it and see how the website changes.

03:22 Again, you can download this CSS file from the supporting materials right below this video, adjust it to your liking, and then hop over to the next section where we actually work with Pygments and add some syntax highlighting to this box.