Lessons

Lesson Info

Creating Display Properties for Links

We want to style these anchor links down here where we have these images, that are part of these links. And so this is gonna require that we create some CSS rules that are really specific. We're gonna use something called a class. So we'll take a look at that. And, we're also going to use something fun called a CSS filter, where we can actually change the way the pixels look with CSS, which is very fun. And all the most modern browsers are supporting some of this. So the first thing I'm gonna do, let's jump back to the HTML because I want to take a look at... The structure, this was some of the content that we just pasted in, so I wanna come back here and just explore this a little bit more. So we pasted in all of these anchor tags here, and all these link out to different websites, we have our titles, we have our targets, and we have our images inside. What I wanna do is I wanna add some additional information here so we can target these with CSS. There's nothing about each one of the...

se links that's unique, except for the URL they link to. They each link to a different spice up on Wikipedia. So, HTML gives us the ability to name our elements and we can give them names, that are in the form of a class, or a name that's in the form of an ID. IDs are names that we give to something where we are only going to use that name one time. And we're gonna use that in our more complex class where we will use that for things like menu systems. Classes allows us to use the same name, multiple times. So if you think about it from traditional design software, classes are sort of the same idea as a character style. Something that you can reuse multiple times, or even object styles. IDs are something that we just use one time. So I want to use a name for every one of these anchor tags, so we can target them and style them. So on the first one, I'm gonna come in here and type in the word class, equals two quotes, and we'll just give this a class name of thumbnail. Let's copy that. Since we can reuse classes, we will paste this in two times. Two more times. And now every one of our HTML elements has a specific class. So now we can target anchor tags that have a particular class. This way, if we create a style that's just an anchor tag, we don't change all of them, we can get really specific about the ones we're gonna change. That make sense so far? Okay, good. So, let's go back to our... CSS file. Let's come in here and now let's target those individual links. So we're gonna start by, typing A, and into target a class with a CSS selector, we're gonna type a dot, thumbnail, put in our brackets, and now we're gonna target only the anchor tags that have a class of thumbnail. The first thing we're gonna do is set a display type. Now we haven't seen display types yet, but display types relate specifically to the box model that we talked about earlier. Most items in HTML have a display type of something called a block, which means they take up the full width of the area. That figure element had a display type of block, so it took up the entire width of the browser. Even though it was only 35% of the width, it still took up the entire area, so items couldn't float around it unless we set a float with CSS. There are two other types of display types, there's an inline, which basically means that the item can be any width, it will change its' width, and then an inline block, which is what images do. So images will float along with the content, but they're only as wide as they need to be based on their file size. So those are the three basics, there's a ton here and some of this can get pretty involved. But we basically have block, inline, and inline block. So images behave like inline blocks, and our images, down here, are inside of an anchor tag. So anchor tags have an inline style, so they can be whatever width and they can move around, so we're basically gonna come in here and just set the display type of the anchor tags to be an inline block. That will allow these two sort of line up next to each other. We're gonna come in and set a text align, we're gonna set this to center. And if I scroll down in my preview here, we can see some of this happening but we're gonna need to, change this a little bit before we can see all of it. And let's come in here and set a margin bottom to 30 pixels. So now we've created some styles for the anchor tag that's around the image and our text. Now let's target the image that's inside of the anchor tag. So we got a.thumbnail, space, image, now we're targeting the images inside. Now we're gonna set a display type of block. So now if I scroll down, we'll see the images now showing up in the top. So let me comment this out, just so we can see what's happening here. If I take off the display of block, notice that chili powder is next to the image, and this png file goes down to about right here. So basically, it's the image and then the text is next to it, they're aligned up with each other, because the display type of an image is a block, I'm sorry, an inline block. But if I come in here and set this to a block, I'm basically saying, okay, images are allowed to take up their full width. And it's taking up the full width of the thumbnail that it's inside of, and it forces the text to be on the next line. And then let's come in here and let's set a width property. And we're gonna set the width to 120 pixels. So, it's just these two properties that are wrangling those giant images inside of giant hyperlinks with the typing here, to being... To aligning inline block, to being the width of 120 pixels and just allowing them to sort of line up next to each other. And then we'll come in here and let's add a fun property, on the hover state. So anchor tags again have a hover state, and you can actually apply a hover state to any element in your HTML, but they are built-in by default to anchor tags. So what we're gonna do is we're going to target the anchor tag, dot, thumbnail, colon, hover, then a space, and then image. So now we're being really specific, we're saying we would like to target images if they're inside of an anchor tag with a class of thumbnail, and you're hovering over this. So that's a lot of sort of criteria, that we're putting into here, to make sure that we can create a rule when you're hovering over these individual images. And so with that we're going to come in here and use a CSS property called filter. Put in our parentheses, then a semicolon, and then inside, the way this works, is we're going to use a property called brightness. So actually, it's filter, colon, space, then brightness, then put in our parentheses. And then we're gonna put 1.2, so we're gonna make this 20% brighter, when somebody hovers over these items. So that might be a little much since the backgrounds are white, but now if I hover over these, in real time, the browser is creating a 20% lighter version of these images. So that's a little bright, so let's make this 1.1, do that. So that's pretty cool, it's almost like having our own sketch or Photoshop in here, in the browser, just highlighting and changing this. Or we can do darken, we can do hue saturation, we can spin the hue spectrum dial with CSS. CSS is becoming more and more powerful every year as more and more browsers are supporting the different things we can start to do inside of CSS. Okay, so let's pretend, that this is the design that we're putting together, in Photoshop. So one of the things I wanted to bring your attention to was the fact that a lot of these graphic tools have some built-in properties that will allow us to come in and, basically, sort of query different artwork inside of our document. So first inside of Photoshop, so in Photoshop here, we can take any layer in Photoshop, right-click on the layer, and at the very top of our contextual menu, we have two options here, copy CSS and copy SVG. With Photoshop, if the layer has native Photoshop vector artwork, you can copy SVG directly from a layer in Photoshop, you don't have to export, you don't have to create any slices, you just right-click and hit copy, switch over to a text editor, paste your SVG, and save that out as an SVG graphic. Similarly, we can come in here and copy CSS. So I'm gonna come in here and just kinda copy that CSS. So now what that's gonna give me, if I switch back over to my text editor, I'll quickly just open a new document, and come in here and paste in all that content. So now that we've had a chance to see the way CSS is working and how we name elements, how we create selectors, and how we define properties and values, you'll notice that Photoshop really has no idea what I wanna do with that layer that I selected. So it gave us a class name, which is kind of like a character style. So it named it herbs and spices, because that's what I typed into the layer, and then look at all these properties here, it's given me a font size, it's giving this to me in pixels which I could convert to M's. It's telling me the family, the color, my line height, it's giving me all these properties. It's even giving me properties that I might not use in the web, or I might not use if it's content that flows with the rest of the content, things like positioning, left and top properties, height and width, we would let the box model take over in HTML. But look at all this content that we're getting from Photoshop. So I can quickly come in here and say, you know what? I want these items here, so instead of a hex value it's giving me red, green, blue with the red value, green value, blue. But I can come in here and quickly say, you know what? I just want those properties, copy those, switch over to my CSS, hit paste, and get exactly the properties that I set up inside of Photoshop. So, in a similar vein, if we switch over to Sketch, I can select herbs and spices, we can right-click on herbs and spices, and we can get... CSS properties from this as well. So copy CSS attributes from sketch. So one of the great things about all of these design tools is even if you're not using the design tool, Photoshop, for example, which is used for web design but is used for just about any medium, they're still incorporating all of this HTML and CSS content and structure and properties into all of these as well because again, this is something that as designers we need to take more control over and more influence in, when our web designs are being converted to HTML and CSS. So these tools are giving us so many more options for getting all that content out. So if you don't want to spend time in a code editor picking out the color, or playing with the font sizes, you can go to your individual layout tools and get those properties right away. And so let's go back to our CSS file, I'm not gonna save that. We have our brightness taking effect here, and I would definitely encourage you to go try out some of the additional filters, there's tons of things you can do with CSS, there's even some 3D capabilities in CSS, which is very fun. And the last thing we will do is just quickly target our footer. So for the footer, let's come in here and create our rule, our selector. Put in our brackets, we'll split this open, we'll set our padding, so we'll set 20 pixels on the top, then a space, zero on the right, space, 20 on the bottom, and 30 on the left. Here we'll set a border dash top, and we're gonna set this to two pixels for the size. We're gonna set solid for the style, and then lastly, we'll set a color, we'll set it to a medium gray which is a pound sign and three D's. I did mention before that hex colors are specified in six digits, however if the colors repeat, which is basically any gray including black and white, you can just use a shorthand style and just put in three letters. So 3 D's is the same as six D's, so that's why the shortcut for black is three zeroes, white is three F's, and three D's would be sort of a medium gray. And lastly, let's just come in here and we'll set our font size, and we'll set this to point eight, five, Ms so 15% smaller than the base font. You know, you can say that, actually we can add our footer but our content would show up down here on the bottom. Yes. Two px? I said zero-- Inline-- Oh, here we go. Two px. There we go, thank you. You're welcome. So now we can see, this down here at the bottom and our copyright if I had put it in there would be showing up down here as well.