cancel
 

 

Job type :

Zip Code :

community forums

Featuring over 100 topics of interest to DoItYourselfers.

Advanced Dreamweaver 8 - How to Format Text Using CSS Styles

AlertThis content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Download the free Flash Player now!

Get Adobe Flash Player

Video Transcript

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.
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... click to read more


How to Build a Shoe Storage Bench

sponsored articles of the day

diy centers

Research and explore a wealth of wisdom on these topics