Viewers: in countries Watching now:
In this hands-on course, James Williamson demonstrates the concepts that form the foundation of Cascading Style Sheets (CSS), including styling text, adding margins and padding, and controlling how images display. The course also explores the tools needed to work with CSS, the differences between embedded and external styles, how to use selectors to target elements, and what to do when styles conflict.
This will probably be one of the shortest if not the shortest movie in the entire course. In this movie, we are going to cover how to control text indenting through the Text Indent property, and it is super simple to do. So I have the indent.htm file open and you can find that in the 04_12 folder. And just to give you a preview of kind of what we are going to doing here. If I open this up in one of my browsers, I can see that we have got some text here, a couple of paragraphs, and then we have this little heading down here, it's making a very odd comment, it's saying please hide me so we are going to look at normally just doing basic text indenting, but some way is that text indenting can help us out in certain situations as well.
All right, so if I go back into my html, I want to take a look at the code really quickly. Here we have an h1 with Text indenting, we have some paragraphs inside of that, and then we have that heading2 down there, that is asking to be hidden. So I am going to go up to my styles and right below add styles here, we are just going to do a text indent. So we will take all my paragraphs and I am just going to say text-indent and then just give it a value. You know how much indentation do you want? We are just going to do 1em to start off with.
So if I save this and again I preview this back in my browser again, we can see that we are getting exactly that, every single paragraph is indented up by 1em and that's really all there is to it. Now you can use negative values and they can allow you to do some pretty interesting things. Think about this quote here, when we first saw this quote before the indentation is applied to it. Here we have got this sort of open code character that causes it to look indented even when it's really not. So what I am going to do is, I am going to go down to that paragraph and I am just going to go ahead and apply a class to that of quote.
And then in my styles, I am going to go ahead and overwrite the indent that we have all of our other paragraphs, and I am going to give this a text indent of -.5ems; I am not going to say, oh, I just knew you know .5ems, I have played around with them little bit before you got here. All right, so I am going to save this, go back into my browser and refresh this. And you can see that what this is doing is it is sort of giving us a hanging punctuation. It's hanging the punctuation outside of the margin of the text which is a very nice, and if you play around the values of that, you can usually get that consistently within your browsers, to look the way that you want it to look, so that's awesome.
You know another technique that I use text indenting for a lot is to hide elements. You know there are some times when you still want the text there for screen readers or other user agents but you might not want the text to be there visually, so you still want in your html code. You just don't want to be able to see it. And there is a couple of that ways you can hide that. We have the display property that we can use and that sort of thing. But one of the things that makes text indent pretty interesting, is that it can remove the text for you but then the element itself is still there. So if you gave it a background color or if you gave it a background image, maybe an icon or something like that, that will be still be there, but the text won't be although the text is still in the html code.
So it's a really nice way of maybe modifying how something is displayed visually. Let's go ahead and experiment with that. So I am going to go down to my styles again and here I am just going to do h2 for my heading2 selector. And inside that I am just going to do text-indent and here, I am going to be very, very thorough. I am going to say -2000 ems. That means that it's going to push that text somewhere in the next room off of your monitor. And then I am going to come in and say background and we will just do yellow just to make sure it allows to visualize, that yes, indeed the element is still there.
So I am going to save this, go back in my browser and when I refresh it, there it goes. So the text goes scattering off in to the next room which is really nice, but the h2 element as we can see, is still right there. So it occupies the same space, if I had placed an image in the background, it would be able to see the image now. And content wise, in terms of text readers and screen readers and other syndication agents, the content or the text is still there. So that is really cool. So that's it. Text indent, it's one of the properties that you probably won't find yourself using a lot.
It's nice to know it's there because occasionally you are going to want to use it. As also helpful to know that you can use it to achieve something special effects, things like hanging punctuation or hiding of the text from element that you would otherwise want to appear. So go ahead and take this page and experiment a little bit with text indenting and start to come up with some creative ways that you can use it within your own sites.
There are currently no FAQs about CSS: Core Concepts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.