1. Breaking the mold with CSS
CS 0134 (term 2181)
Jarrett Billingsley

2. Class announcements The first exam is in two weeks!
The written part will be closed-book/notes
The practical part will be open-book/notes
Don't worry about turning in lab3 until I send out the lab2 grades.
I kinda dropped the ball there. 
9/25/2017
CS term 2181

3. Dividing things up
9/25/2017
CS term 2181

4. Sectioning things up main header navigation Thing 1 Thing 2 Thing 3
You know about <header> and <main>!
But now your page has a few sections, and you have some links at the top to navigate to them.
This is what that <nav> tag is for.
You can put it in <header> or in <main>.
It's just there to help organize things better.
You can also make sections with <section>.
This will make it easier to style some things.
You could also use <article> on a blog!
Last comes the <footer>.
You don't have to put a footer but it's a nice place to stick your name or whatever.
header
navigation
main
footer
Thing 1
Thing 2
Thing 3
9/25/2017
CS term 2181

5. Putting images in their place
Let's say you want your image to be alongside the text, like in a magazine.
The term for this is floating.
The CSS for this might be:
img {
float: right; }
When we tell something to float, it will stick to that side and other things will "flow" around it.
You have to put the image before the text that you want to flow around it.
Weird Dog #1
Blah blah blah! This is a bunch of words. This thing on the right is a living cotton ball.
It upsets me. What is it? Why is it so small? Is it OK? Does it need help?
This text is going to wrap around the sides of the image, and it'll look great.
Now the text goes all the way to the right side. Nice! And the cool thing is, I didn't have to do anything in the HTML. It's all CSS.
9/25/2017
CS term 2181

6. Uh, that's not right.
When you float something, the layout can start to get weird.
What's missing in our HTML is a way to tell the browser to stop floating things!
This is called clearing.
Right before the thing you want to stop floating at, put:
<div style="clear:both"></div>
This is called a clearfix.
Where would I want to put the clearfix in this example?
Weird Dog #1
Blah blah blah! This is a bunch of words. This thing on the right is a living cotton ball.
It upsets me. What is it? Why is it so small? Is it OK? Does it need help?
Weird Dog #2
Maybe dogs were a mistake.
9/25/2017
CS term 2181

7. We all float down here, within reason
You can float anything!
Tables!
Paragraphs!
Entire sections!
But don't use it for laying out pages (book pages starting at 204)
This is an older technique and it's a giant pain
Next week we'll learn a much easier way of doing this: flexboxes.
9/25/2017
CS term 2181

8. Making navigation bars
9/25/2017
CS term 2181

9. nav > ul > li > a { }
Lists, schmists
With CSS, you can make anything look like anything.
To make this easier, we'll be using a new kind of CSS selector.
nav > ul { }
When we write this, it means "select the ul inside the nav."
You can keep going as long as you want:
nav > ul > li { }
nav > ul > li > a { }
9/25/2017
CS term 2181

10. I'm too flexy for my lists
The basic rules for this are as follows:
nav > ul {
display: flex;
list-style: none; }
nav > ul > li {
flex-grow: 1;
This says "make this list display its stuff left-to-right
and turn off the bullets.
This says "space the list items out evenly."
9/25/2017
CS term 2181

11. Where the heck is this extra space coming from?
This is a great use for the inspector.
Open the inspector, then click the button that looks like this:
Then you can hover over the page and see what things are making the spacing!
It's this stupid <ul>.
9/25/2017
CS term 2181

12. Another kind of display: block
You can turn inline tags into block tags with this CSS property:
display: block;
Now you get the benefits of blocks (padding, margin, border)!
Let's put it on the <a> of the navigation bar.
This also makes it possible to click the whole box around the link, instead of just the text.
9/25/2017
CS term 2181

13. Ow ow those sharp corners
Sometimes a rounding effect is nice.
The border-radius property lets you do this.
Set it to a length like 4px or 1em for a rounded rectangle!
Try one or two percentages (like 50% 100%) for an oval!
9/25/2017
CS term 2181

14. Making things pop with shadows
You can even put shadows behind things.
text-shadow: 0.2em 0.2em 0.2em green;
box-shadow: 0em 0em 1em red;
This is how far left/right it is (negative numbers move left).
This is how far up/down it is (negative numbers move up).
This is how blurry it is. 0 means super sharp!
9/25/2017
CS term 2181

15. Lab: improving your page from last time
9/25/2017
CS term 2181

16. Lab: better CSS!
9/25/2017
CS term 2181