Text and Font using HTML and CSS in Dreamweaver
● Learn how to add colors to a <p> tag.
✓ <font> tags ✓ hex color codes in HTML ✓ <style> tags ✓ hex color codes in HTML
Step #1: Open your Page in Dreamweaver ~
✓ Open your index page in Dreamweaver and hit Split to reveal both code and display views …
Step #2: Big Text ~
✓ Look for some text on your page that's big! (but not one using the h1 tag).
✓ … and find the code in split view.
Step #2: Size Code ~
✓ Click inside the p tag …
✓ … and hit the space bar.
Step #3: Code Hints ~
✓ Notice the code hints that show up …
Step #4: Style ~
✓ Start typing the word "style" and notice the code hints complete the code for you …
Step #5: Font-Size ~
✓ Hit the letter f and scroll down to font-size …
✓ Choose the font-size tag and experiment with different sizes …
✓ Lots of choices!
10px, 12px, 14px, 16px, 18px, 24px, 36px, large, larger, x-large, xx-large, medium, small, smaller, x-small, xx-small, 120%, 150%
Step #6: Color! ~
✓ MILLIONS of colors are available for your text!
✓ Go on-line and search for colors, find the HTML color code, and copy the Hex Number.
✓ Now add the HEX code to the font-size: large code you already wrote. Just click after the size designation, but IN FRONT of " shown below …
✓ … and, lastly, add a semi-colon ;
✓ Type C O L and choose color: …
✓ … and paste your HEX code or use the Eyedropper Tool to select a color from the box provided.
✓ Here is the code so far …<p style="font-size:xx-large; color:#990000">This text is HEX color #990000.</p>
This text is HEX color #990000.
Step #8: Font Family ~
✓ The next code you need is font-family. Add another semi-colon ; IN FRONT of "
✓ Hit space to bring up the code hints and search for font-family …
✓ … and choose one of the available fonts.
Step #9: Use a Combination of these Styles ~
✓ Using the above styles, incorporate them into your work:
There are many options available!
This sentence is written in Comic Sans.
But don't use too many fonts
because it’s confusing
and maybe not worth the hassle
but keep trying :)
Last Step: Save and Attach ~
✓ Save, upload your page, attach the link, and continue working …