From the course: CSS Shorts

Unlock this course with a free trial

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

Column divider lines

Column divider lines - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Column divider lines

“

- Hi, this is Chris Converse, and in this episode, we'll take a look at visually dividing HTML elements without adding extra code to our HTML file. Now, if you'd like to follow along with me, download the exercise files, and let's begin by opening index.html in a text editor. Now once you have the HTML file open, you'll see up in the head area we have a link to style.css, which we'll be opening in a few minutes. And then, in the body area, we have a main article, and then inside of the article, we have an H1, and we have three aside elements. So what we're going to be doing is floating these aside elements to create our columns, and then creating dividers between the columns, again, without adding any HTML to this page. And to preview the layout we're going to be working with, you can open this index.html file up in a browser. And now, at this point, let's go back to the exercise files. Let's find style.css. Let's open this in our text editor. Let's scroll down to the bottom and let's…

Contents