Learn how to format text using CSS Styles in Dreamweaver 8.
Tags:adobe dreamweaver,css,dreamweaver,dreamweaver lessons,dreamweaver tutorials,format,formatting,mac os x,macromedia dreamweaver 8,microsoft windows,styles,text,total training,web development application
Grab video code:
Now, let us create a new style that we can use to format text, and we will do a couple of things we have not done yet. So, right click new, let us create a style called main text. Let us make this a class style, meaning we can apply it to anything we want on the page and let us set the line height for the style. Now, we know that the page settings, when we went into page properties, we already set the font, we already set the size and we set that to what we want for a main text so we would not have to apply that everywhere. If we want to change the line height or the spacing in line, we need to do that as a CSS style. So, click okay, and you will find this here line height.
You can choose normal line height or set a value and if you set a value, you can choose from a list of options. These are the same options you will find for all the different things that you can change sizes up in Dreamweaver. If you wanted to stick with point size and that is what most of us are familiar with when we think about font sizes. Let us set this one to 16 and let us do one other thing, let us make sure that this text has a margin of 10 so that it is not pumping up against the side of the page. So, click on box and we only want to change the left and right margin so unclick same for all, left margin 10, right margin 10 and click okay.
Now, we have main text as a style and if we scroll down, you can see that main text was already applied to this text so it automatically took on that style. Here again, main text. Now, you see the line spacing applied and the indenting applied. Let us create a style for the sidebar text now, new, let us call this sidebar text. Remember if it is a class style, you need the dot there, if you do not put it Dreamweaver will put it for you. And let us make this a line height of 14, value points 14, let us the same margins left and right in that box setting.
By the way, if you want indenting on your paragraphs, you will find that in the block option, text indent. I prefer to just stick with this so let us say okay. And now, we have sidebar text formatted. Now, because the sidebar text did not already have that style applied to it, we need to apply the style, so, let us look at a couple of shortcuts for that. You can highlight and right click, choose CSS styles and choose sidebar text. Or you might like this even better if you just click anywhere in this area and apply the sidebar text. It automatically applies it to everything in between the P tags here which is another thing to start noticing as I click here, you see this little tag selector down here. If I click on this P, you see that it is highlighting everything that it is in the P tag. So, if I want to apply the style to everything in that P tag, I can just click the P or I can click anywhere in here as long as I see that that P tag shows up on the right. And again, I can right click and apply sidebar text. And finally, of course highlight and apply sidebar text.