Set CSS Properties and Values (syntax)

Use Selectors to Style HTML Elements

Utilize Selector Specificity to Control Applied Styles  

Style Elements Using the Cascade 

Apply CSS Styles with Inheritance

Debug CSS with the Chrome Devtools

Understand CSS Layout with the Box Model

Control HTML Elements with Different CSS Units

Manipulate Colors with CSS

Add Backgrounds to HTML Elements

Hide and Show HTML Elements with CSS

Customize CSS Selectors with Pseudo Classes

Modify Font Style in CSS

Positioning HTML Elements using CSS

Use CSS Media Queries to Dynamically Apply Styles

Style a Logo and Navigation on a Website with CSS

Create Dynamic Styles with CSS Variables 

CSS Fundamentals 

This lesson combines many different css properties together to position a logo and navigation within a website. Together we will use display flex, define colors, and write media queries to give our <header/> life. 

Instructor: [00:00] Let's go ahead and give our nav and our logo some styles and we'll match it according to this mockup that we have here. Let's first start with styling our logo and then move to matching the styles for our navigation.

[00:13] Inside of our HTML, we'll see that our logo is wrapped in an A tag with a class of logo, so we'll use that as the selector. We'll do text transform uppercase, text decoration none, color HSL 00 percent and 90 percent. Font size is going to be 45 pixels and font weight is 700.

[00:34] With that saved, we'll see that it now matches our mockup. To review, the text transform uppercase will make sure all of our text inside of our A tag is uppercased. Text decoration gets rid of the underlying that comes with A tags by default. This is our color that we've defined, which is like this light gray. Then we have our font size of 45 pixels and a heavier font weight of 700.

[01:00] Next up is to position our logo and navigation side by side. We'll use this container div here that holds both elements. We'll say header container display flex. Then we'll do justify content space between. When we refresh, we'll see that now our elements are positioned side by side.

[01:20] Using display flex defines a flex container. Using justify content space between, items are evenly distributed in the line. First item is on the start line, last item is on the in line. Now let's fix our navigation. According to the mockup, they need to be evenly spaced across the top here. Inside of our CSS, let's go ahead and open this full screen.

[01:43] We'll do a dot header dash dash UL. Display flex. List style is none. Justify content will be space around. Width is 50 percent, and padding is zero. With that saved, we'll see that when we refresh, it matches the layout of our navigation.

[02:03] Let's go back and review our CSS. We use this display flex again, which creates a flex container inside of our UL. We get rid of the bullets that we see with our list items by using list style as none. Justify content space around will distribute our items evenly in the line with equal space around them. We gave it a width of 50 percent and a padding of zero.

[02:27] Let's match these styles of our list A tags. We'll do header UL A. We'll say color is an HSL 00 percent and 50 percent. Text transform is uppercase. Font size is 13 pixels. Font weight is 500. Text decoration is none. With that saved, we'll see that our items are now styled correctly according to the mockup.

[02:55] Our mockup did show that, since this is the home page, the home item is a different color. We'd probably want to use JavaScript to apply specific styles, but let's go ahead and just do dot header dash dash UL LI first child A. Color HSL 00 percent and 90 percent. With a quick save, we'll see that our home LI is a different color now.

[03:19] Again, we should use JavaScript to conditionally apply styles to our LIs, depending on what page we're on. However, for this lesson we use the first child selector which is saying that inside of our header UL, the first LI A tag, we want to give it a specific color.

[03:37] Let's finish up and give the last touches. We'll see that when we resize our browser to a smaller screen, our navigation gets all bundled up here, which isn't a great user experience. Instead, let's give it a media query with a max width of 900 pixels.

[03:51] Let's change the header container to display block, as well as the header UL to display block as well. Both will override the display flex that we've defined for them already. With a refresh, we'll see that our navigation is now laid out to the side and expands back once we get above 900 pixels.

Course

CSS Fundamentals

Style a Logo and Navigation on a Website with CSS

Share this video with your friends