Using CSS to Pretify your Website
Now that we know how to make a basic website using html, let's dive in on how to style it! A common way to style websites is using CSS (which stands for Cascading Style Sheets), and you have actually already seen an example of it in the navbar! But if you inspect this page, you see that the navbar is just made of an unordered list (ul) of links (a)...what's going on here?
You may have noticed how I have used the <b> tag in order to bold some of my HTML. While we do have access to limited text styling such as bolding, underlining, and italicizing through HTML tags, CSS gives us much more flexibility with the appearance of our website!
CSS is a way to style your websites. We link it to our HTML using a <link> tag, and we use the class and id attributes to apply styles to specific elements depending on the situation.
Using CSS
you can use in-line css with the style tag, or if it gets complicated, you can create a seperate CSS file. See below for an in-line example (make sure to inspect!)
Linking a CSS file
Sometimes, our CSS gets too complicated to keep in our HTML file. When this happens, we can create a separate CSS file and link it to our HTMl using a <link> tag. This tag goes in the <head> of our HTML file.
Challenge #1: Inspect this webpage and try to find the link tag. Once you have found it, copy it into the chat. Then, write beneath it the names of its attributes (remember that these are the other things between the < and > of the tag, other than the tag name, in this case link)
Challenge #2: Try to find the CSS file in your inspect menu. It won't be where you're used to seeing the HTML, so you may have to look around a bit!
CSS Attributes: id and class
You may have noticed two different selectors in the code on this website. The id attribute is used for a single element and can only be used on one element, once. The class attribute can be used on multiple elements, and can be used like a styling template.
The id attribute is also often used for Javascript code, which we will go over next class!
Challenge #3: Try to spot a class attribute on this webpage, and match it to the same name in styles.css. Copy the lines which style these elements and send them in the chat!
Challenge #4: Now do the same for an id! Try to spot an id attribute on this webpage, and match it to the same name in styles.css. Copy the lines which style this element and send them in the chat!
Now, what did you notice about the differences between the two selectors in styles.css?
One is called an id selector, which uses a # before the name, and the other is called a class selector, which uses a . You may also have noticed some element selectors which just have the name of an html tag not preceded by a # or ., which will apply that style to all instances of that tag. * what is interesting about the navbar code? why does it have two elements listed?
Challenge #5 (final challenge for today!): go to codechef's online compiler and write some HTML code for a simple page with a header and some body text. Include an image if you want to! Then, style it in styles.css. Try changing the margins, color (which changes font color), font-size, etc., and see what you can come up with (feel free to google cool css properties you can fiddle with)! Then, send a screenshot of your result window and send it in chat. If you are open to sharing yours, please send a message with it which says that you are open to sharing so that we can look at everyones together and learn from each other!