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 

Today the majority of internet traffic comes from mobile devices. So it is essential to understand how to make styles dynamic to different viewport sizes. In this lesson we assign some CSS to a ul and modify the styles depending on the viewport size. 


https://app.egghead.io/api/v1/lessons/css-use-css-media-queries-to-dynamically-apply-styles/subtitles

Instructor: [00:00] Our navigation could definitely use some styles right now, so let's go UL display flex and then justify content space between. When we save that and refresh, we'll see that our navigation is now spread out across the page. Displaying our UL block as flex creates a flex container.

[00:17] Flex is a powerful and simple way of dynamically positioning our elements. When used with justify content space between, it successfully spreads our nav items out evenly. This works great with our website pulled up on a laptop, but if we were to shrink the page to emulate a mobile view, our navigation becomes unreadable.

[00:37] Back inside of our CSS, let's do an at media max width 700 pixels. Then we'll create a UL block saying display block. With a refresh, we'll see that our navigation goes back to the original state it was in. This makes it much easier for users to use our website on smaller devices.

[00:57] As we can see, using media queries are useful when we want to modify our site or app, depending on devices general type such as the viewport width.

[01:07] Whenever all of the media feature expressions which are defined inside the parentheses here compute to true, the CSS defined within the blocks will apply to the website. What our max width is saying here, if our viewport is 700 pixels or less, apply the following styles. If we open up our viewport larger than 700, we'll see that it goes back to display flex.

[01:34] We can accomplish this same functionality by switching to min width and switching the displays. Now we're saying if the min width of the viewport is 700 pixels or greater, apply flex. If smaller, apply block.

[01:49] Logical operators such as and can be used to compose a complex media query. Here we're saying only display flex between the pixels of 700 and 1,000. Once we get past 1,000, it goes back to display block.

[02:05] A couple of other media features you can test on is min height and max height. Finally, you can also check for orientation, whether the website is in portrait or landscape mode.

Use CSS Media Queries to Dynamically Apply Styles

Share this video with your friends

Course

CSS Fundamentals