From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,400 courses taught by industry experts.

Layout patterns

Layout patterns - CSS Tutorial

From the course: CSS Shorts

Layout patterns

- [Instructor] Hi, this is Chris Converse, and in this episode, we'll build on the nth-child property from the last episode and use it to add some visual interest to our layout. So, if you'd like to follow along, download the exercise files and we'll begin by opening the html file in a text editor. And so, once you have the html file open, if you scroll down inside of the body element, you'll see a main article element. And then, inside of the article element is a series of section elements. So, if I scroll through here, you can see each one of these. Now I have some CSS rules in place already that will turn all of these items into columns, and you can see that if you look at this in a browser. But now, to make this just a little more visually interesting, let's go back to the exercise files and let's open up the style.css file in our text editor. And so, now in the CSS file, let's scroll all the way down to the bottom, After the section space image selector, and let's come in here…

Contents