All Articles Dreamweaver
Creating Great Text With CSS3 in Dreamweaver
David Smith on Wed, February 29th | 0 comments
Want to create great looking text in Dreamweaver, but feeling stifled by the CSS styles panel? David Smith comes to the rescue with CSS style tips which will set free your inner designer!

If you have been using the CSS Styles panel to style your webpages in Dreamweaver then you will be aware of the restrictions placed upon you with regards to the design. Solid colors, Standard fonts, Block shapes etc. All interesting, but not really challenging CSS’ ability. 

So in this article I’m going to show you some CSS to add to your Styles in Dreamweaver that will really create some great designs. 

Let's start by creating a Div Tag that will contain this stupendous Style you're about to create. 


Step 1 - Add an AP Div

Starting with a blank HTML document open the Insert Panel and set it to Layout. From the Layout options choose Draw AP Div. 

Div drawn

Div drawn


Use the tool to draw an AP Div (which is just a Div Tag with an #ID style automatically applied containing position and size parameters). Use the Property Panel to size the AP Div with Height: 400px and Width: 400px. 


Step 2 - Name the AP Div

Open the AP Elements panel and re-name the APDiv1 to “MyStyle”. Open the CSS Style panel and you will se that renaming the AP Div also renames the ID Style “MyStyle”; this is the style that you will be editing. 


Step 3 - Find the CSS Code

Switch over to the Split view so that you can see both the image and the code you’ve created. Scroll up to the section and you will see a section of code highlighted pink that says: #MyStyle { }. This is your CSS and all the settings for it that you are about to create will sit in-between the two {  }.


Step 4 - Add some content

To save time typing, copy and paste about a Paragraph of text into the Div by clicking on the drawn AP Div in the Design view, so the cursor becomes active and pressing Command-V to paste. 

border & text

border & text


Add a 3px border all the way around by adding this line of code between the { }:

border: 3px solid #999;


Step 5 - Round the Corners

Add these lines of code to the style named #MyStyle to create 20px rounded corners in a range of Browsers:

-webkit-border-radius:20.0px;

-moz-border-radius:20.0px;

-o-border-radius:20.0px;

-ms-border-radius:20.0px;

border-radius:20.0px;


Dreamweaver won't display these corners so to see them save the page and preview in a Browser.

rounded corners

rounded corners


TIP: Increase the radius size to exactly half of your width and height (so in this case 200px) and preview again.... Hey you get a perfect Circle!


Step 6 - Gradient Background

Adding a gradient background is a really nice design effect, however you should always bear in mind that not all versions of all browsers support it. So only ever use it to enhance an image. Always design things with multiple browsers in mind and have a solid fill available as well.

gradient background

gradient background


The following code will create this gradient background:

background-color:#666666;

background-image: -moz-linear-gradient(top , #666666, #333333 40.0%);

background-image: -webkit-linear-gradient(top , #666666, #333333 40.0%);

background-image: -o-linear-gradient(top , #666666, #333333 40.0%);

background-image: -ms-linear-gradient(top , #666666, #333333 40.0%);

background-image: linear-gradient(top , #666666, #333333 40.0%);


Test it in a few browsers if you can, to see the effect. Lastly let's add some punch to the text.


Step 7 - Enhance the Text

I’ve added White to the text, to make it stand out better against the gradient. Also I’ve added Drop Shadow to it. As with the Gradient, Drop Shadow only works with more recent versions of some web browsers. Don’t always rely on it. 

drop shadow

drop shadow


This code adds the Color and Drop Shadow:

color: #FFFFFF;

text-shadow: 2px 2px 3px #000000;


Step 8 - Better Font?

Lastly, I added a better font and some padding, to create some space around the text. 

Better text

Better text


By adding these lines:

font-weight: normal;

text-align: left; 

font-family: Georgia, serif;

font-size: 18.0px;

line-height: 140%;

padding: 10px;


Here is the code I added to achieve that. Again it’s worth checking for browser compatibility to see where some code won't work for some browsers and bearing that in mind when you're designing your pages. 

Browsers are being updated all the time to support CSS3 and HTML 5 so don’t be too frightened to use them; just be aware. What’s more it's not just the traditional web browsers you're able to aim for with this code (Safari, Chrome and Firefox). It also works perfectly well on iOS and Android. If that doesn’t make it worth your while, then what will?



Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: