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

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 0134 term 2181

Dividing things up 9/25/2017 CS 0134 term 2181

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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

Making navigation bars 9/25/2017 CS 0134 term 2181

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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

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 0134 term 2181

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

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