From the course: CSS Shorts

Unlock this course with a free trial

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

Circular text wrap with CSS

Circular text wrap with CSS - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Circular text wrap with CSS

“

- [Instructor] Hi, this is Chris Converse and in this episode, we'll use the shape outside property in CSS to create a circular text wrap in our web page. So, if you'd like to follow along download the exercise files and let's begin by opening the HTML file in a text editor. And so once you have HTML file open, you'll see we have a pretty simple layout here. Up in the head area, we're linking to style.css which we're going to be opening in a moment. Inside of the body element, we have the main article. And, inside of the article, we have a few paragraph elements. At the top, we have an H1 and we have a figure element. Inside of the figure element, is an image that is linking to the sphere.png which we're seeing here. And, it's the figure element that we're going to be adding the shape outside property to. So, to continue, let's go back to the exercise files. Let's find style.css and let's open this on our text editor. So, once you have the CSS file open, let's scroll down. Let's find…

Contents