Easiest way to change font size/color with CSS?

I've never used CSS before; I need to know how to change the font size and color using CSS, since it seems to be the only way to do it now. Sometimes I just need to change the font just for a few words, or a line here and there. Not necessarily page-wide, you understand. Is there a step-by-step process showing the simplest way to accomplish this? I'm not a web developer or professional designer, nor do I want to be. I just use DW to build simple web sites for personal use. I don't build using HTML - I solely use DM's GUI functions. And I'm also trying to teach my nine year-old how to start out page-building. I certainly hope that something as simple as changing font size doesn't require one to buy a book to learn HTML, which seems to be what a lot of people are telling me. Thanks for any assistance.

Easiest is not always the best way.  You must learn the fundamentals. 
CSS
/**this styles all paragraphs in your site**/
p {
font-size: 18px;
color: #000;
/**This is a class.  Classes are re-usable**/
.red {
color:red;
font-weight:bold;
HTML:
<p>This is a normal paragraph</p>
<p class="red">This is a red paragraph</p>
<p>This is a normal paragraph with <span class="red">some red text here</span> but not here.</p>
If you're going to teach your 9yr old how to build web pages, start with the links below.
There's no point in teaching your child bad habits that will have to be unlearned later.
http://www.html.net/
http://w3schools.com/
http://www.csstutorial.net/
http://phrogz.net/css/HowToDevelopWithCSS.html
Nancy O.

Similar Messages

  • How to change font size & color of text inside note and callout annotation using code ?

    Hi,
    I want to set different font size & color for the text inside note and callout annotations. And for this, I am setting properties using the DS attribute while creating annotations (see below code).
    //"font: Helvetica,sans-serif 12.0pt;font-stretch:Normal; text-align:left; color:#rrggbb";
    sprintf(buf,
    "%s %2.1f%s%s%s%s;" , "font: Helvetica,sans-serif", float(g_fontSize),"pt; font-stretch:Normal; text-align:left; color:#", str[0], str[1], str[2]);CosDictPutKeyString (cosAnnot,
    "DS",CosNewString (cosDoc, false, buf, strlen(buf)));PDAnnotNotifyDidChange(pdAnnot, ASAtomFromString(
    "DS"), 0);
    But this doesn't work when I just wrire text after creating annotation.
    And suprisingly it works fine when I click first outside of the annotaion and then double click to write text inside annoatation.
    Is this bug of Adobe ? if not then please let me know the fix.
    Regards,
    Arvind

    Hi
    Is there any way(eg. preference) by which we can change default color & font size for annotation?
    Regards,
    Arvind

  • Is there a way to change font size in incoming email messages?

    In the Mail preferences I see options for changing fonts and sizes for composing email, but is there a way to control incoming font sizes?
    Some emails for some reason show up in very tiny fonts when they come into my Mail program
    thanks
    nick

    Hello Nick,
    Thank you for the question.  You can update the font settings in the Preferences for Mail.  By going to Mail>Preferences>Fonts & Colors, you can update the Message list font and the Message font for easier viewing.  The Messages font will only change to the font you select if the sender does not have specific formatting for the text in their email:
    Option
    Description
    Message list font
    The font and font size for viewing the list of messages (in classic layout only). Click Select to use a different font.
    Message font
    The font and font size for writing and viewing messages. Click Select to use a different font.
    If the sender used a specific font for a message, that font is used when viewing the message.
    Mail (Mavericks): Fonts & Colors preferences
    http://support.apple.com/kb/PH14863
    Thank you for using Apple Support Communities.
    Best,
    Sheila M.

  • Easiest way to change color scheme?

    Can anyone give me some tips on the easiest way of changing the background color of ALL of my JComponents? I was hoping that everything was "transparent" by default and changing the background color of the JFrame to white would do the trick but no luck. Before I go through each and every component is there an easier way I should look into first? Thanks in advance!

    You can change the properties for the entire application by adding the following at the start of your class:
    UIManager.put("Panel.background", Color.WHITE);You will need to change each component separately.

  • How do i change font sizes and colors in ical in OS Lion.  Everything is greyed and too small.   And how do I changed the color of the scroll bars, which are now invisible?

    how do i change font sizes and colors in ical in OS Lion. Since upgrading,  all fonts are grey, instead of black,  and too small.   And how do I changed the color of the scroll bars, which also are grey and almost invisible?  And if you can asnwer this, can you tell me how to get back the email format I had before the upgrade?  I no longer have column headings and I'd like them.  Thank you. 

    Do you know about changing the font colors for ical, and the color of the scroll bars?
    No, I don't. I don't use that program; I fiddled with it just now, and could not find a way to do that.
    Perhaps someone else will have an idea.

  • How can I add more than one same spry menu (eg. collapsible menu)  with in different styles (font size, color, background, etc) on current page?

    How can I add more than one same spry menu (eg. collapsible menu)  with in different styles (font size, color, background, etc) on current page?

    Hi Nancy,
    This screenshot was only for imagination. A part of the code (not all) is below.  In the code there are some background images but they are not seem in live mode.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="css/my_site.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css"/>
    <link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
    <style>
    #CollapsiblePanel1 .CollapsiblePanelOpen .CollapsiblePanelTab {
        background-color: #003366;
        font-size: 18px;
        line-height: 52px;
        color: #FFF;
    #CollapsiblePanel1 .CollapsiblePanelTabHover .CollapsiblePanelTab {
        background-color: #003366;
        color: #FFF;
        text-shadow: 1px 1px #000;
        font-weight: bold;
        line-height: 52px;
    #CollapsiblePanel1 .CollapsiblePanelClosed .CollapsiblePanelTab  {
        background-color: #C3CFDF;
        border-radius: 5px 5px 0px 0px;
        color: #999
        text-shadow: 1px 1px #000;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: bold;
        line-height: 52px;
    #CollapsiblePanel2 .CollapsiblePanelOpen .CollapsiblePanelTab {
        background-image: url(images/international.jpg);
        background-repeat: no-repeat;
        font-size: 18px;
        line-height: 52px;
        color: #FFF;
    #CollapsiblePanel2 .CollapsiblePanelTabHover .CollapsiblePanelTab {
        background-color: #003366;
        color: #FFF;
        text-shadow: 1px 1px #000;
        font-weight: bold;
        background-image: url(images/TR_Col-WEB.png);
        background-repeat: no-repeat;
        line-height: 52px;
    #CollapsiblePanel2 .CollapsiblePanelClosed .CollapsiblePanelTab  {
        background-color: #C3CFDF;
        border-radius: 5px 5px 0px 0px;
        color: #999
        text-shadow: 1px 1px #000;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: bold;
        background-image: url(images/TR_Gray2-WEB.png);
        background-repeat: no-repeat;
        line-height: 52px;
    #CollapsiblePanel2 .CollapsiblePanelContent {
        background-color: blue;
    #CollapsiblePanel3 .CollapsiblePanelOpen .CollapsiblePanelTab {
        background-image: url(images/TR_Col-WEB.png);
        background-repeat: no-repeat;
        font-size: 18px;
        line-height: 52px;
        color: #FFF;
    #CollapsiblePanel3 .CollapsiblePanelTabHover .CollapsiblePanelTab {
        background-color: #003366;
        color: #FFF;
        text-shadow: 1px 1px #000;
        font-weight: bold;
        background-image: url(images/TR_Col-WEB.png);
        background-repeat: no-repeat;
        line-height: 52px;
    #CollapsiblePanel3 .CollapsiblePanelClosed .CollapsiblePanelTab  {
        background-color: #C3CFDF;
        border-radius: 5px 5px 0px 0px;
        color: #999
        text-shadow: 1px 1px #000;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: bold;
        background-image: url(images/TR_Gray2-WEB.png);
        background-repeat: no-repeat;
        line-height: 52px;
    #CollapsiblePanel4 .CollapsiblePanelOpen .CollapsiblePanelTab {
        background-image: url(images/TR_Col-WEB.png);
        background-repeat: no-repeat;
        font-size: 18px;
        line-height: 52px;
        color: #FFF;
    #CollapsiblePanel4 .CollapsiblePanelTabHover .CollapsiblePanelTab {
        background-color: #003366;
        color: #FFF;
        text-shadow: 1px 1px #000;
        font-weight: bold;
        background-image: url(images/TR_Col-WEB.png);
        background-repeat: no-repeat;
        line-height: 52px;
    #CollapsiblePanel4 .CollapsiblePanelClosed .CollapsiblePanelTab  {
        background-color: #C3CFDF;
        border-radius: 5px 5px 0px 0px;
        color: #999
        text-shadow: 1px 1px #000;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: bold;
        background-image: url(images/TR_Gray2-WEB.png);
        background-repeat: no-repeat;
        line-height: 52px;
    #CollapsiblePanel5 .CollapsiblePanelOpen .CollapsiblePanelTab {
        background-image: url(images/TR_Col-WEB.png);
        background-repeat: no-repeat;
        font-size: 18px;
        line-height: 52px;
        color: #FFF;
    #CollapsiblePanel5 .CollapsiblePanelTabHover .CollapsiblePanelTab {
        background-color: #003366;
        color: #FFF;
        text-shadow: 1px 1px #000;
        font-weight: bold;
        background-image: url(images/TR_Col-WEB.png);
        background-repeat: no-repeat;
        line-height: 52px;
    #CollapsiblePanel5 .CollapsiblePanelClosed .CollapsiblePanelTab  {
        background-color: #C3CFDF;
        border-radius: 5px 5px 0px 0px;
        color: #999
        text-shadow: 1px 1px #000;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: bold;
        background-image: url(images/TR_Gray2-WEB.png);
        background-repeat: no-repeat;
        line-height: 52px;
    </style>

  • Is there a way to change the pin color in iPhoto so I can pin my photos  and places from those from others.  i think it would be cool to see where my friends have also been but not mix it with mine.  Thanks

    s there a way to change the pin color in iPhoto so I can pin my photos  and places from those from others.  i think it would be cool to see where my friends have also been but not mix it with mine.  Thanks

    No
    Suggest to Apple
    You can make a smart album based on camera to seperate photos
    LN

  • My typewriter toolbar is graying out the ability to change font size, type, and color.

    My typewriter toolbar is graying out the ability to change font size, type, and color.

    Here's what I have done in the past. Maybe not elegant, but
    it works. (I
    use PHP, but I'm sure you can modify for ASP.)
    In the HEAD of each web page, include regular old embedded
    STYLE tags,
    but INCLUDE an external PHP file:
    <head>
    <style type="text/css">
    <?php include('styles/testcss.php'); ?>
    </style>
    </head>
    Now in that included PHP file, just have CSS code which pulls
    in your
    dynamic data. Here's an example snippet:
    body {
    color: #600;
    background-color: <?php echo
    $row_recordset['bgcolor'];?>
    Of course, you'll need the code for the recordset somewhere
    too.
    Alec
    Adobe Community Expert

  • Changing font size(bold) or color of a particular row in ALV Grid Digplay

    Hi Experts ,
    I am having a requirment to highlight some particular rows in ALV Grid Display . To achieve this i need to change font size or make it bold or change color of that row .
    Please give me some inputs .
    Thanks in Advance.
    Vijyeta

    Hi
    Coloring An Entire Row
    Coloring a row is a bit (really a bit) more complicated. , you should add an additional field to your list data table. It should be of character type and length at least 4. This field will contain the color code for the row.
    First you have to declaration of our list data table u201Cgt_listu201D.
    DATA BEGIN OF gt_list OCCURS 0 .
    INCLUDE STRUCTURE SFLIGHT .
    DATA rowcolor(4) TYPE c .
    DATA END OF gt_list .
    Adding the field that will contain row color data
    As you guess, you should fill the color code to this field.  But how will ALV Grid know that you have loaded the color data for the row to this field. So, you make it know this by passing the name of the field containing color codes to the field u201CINFO_FNAMEu201D of the layout structure.
    e.g.
    ps_layout-info_fname = <field_name_containing_color_codes>. u201Ce.g. u2018ROWCOLORu2019
    You can fill that field anytime during execution. But, of course, due to the flow logic of screens, it will be reflected to your list display as soon as an ALV refresh occurs.
    Try this link also:
    Possible functionalities in ALV
    Regards
    Neha

  • I'm using firefox 6.0.2 It's making problem with Bangla font ONLY on FACEBOOK others bangli website FORNT SIZE are OK. On the FACEBOOK it shows Bangla font in a very / Too small! I change font SIZE in firefox setting but i can't solve. Pls HELP me

    I'm using firefox 6.0.2 It's making problem with Bangla font ONLY on FACEBOOK others bangli website FORNT SIZE are OK. On the FACEBOOK it shows Bangla font in a very / Too small! I change font SIZE in firefox setting but i can't solve. Pls HELP me ..

    Reset the page zoom on pages that cause problems: <b>View > Zoom > Reset</b> (Ctrl+0 (zero); Cmd+0 on Mac)
    *http://kb.mozillazine.org/Zoom_text_of_web_pages
    You can use an extension to set a default font size and page zoom on web pages.
    *Default FullZoom Level: https://addons.mozilla.org/firefox/addon/default-fullzoom-level/
    *NoSquint: https://addons.mozilla.org/firefox/addon/nosquint/

  • How to change font size in Notification center?

    Good day
    I purchased new monitor with BIG resolution an dfount what font in notification message from Notification Center stay very small
    I try to find place where possible change font siza but don't found anything
    Please help

    AFAIK there is no way to customize this font size. You can't resize the window either.
    You need to report it to Apple Feedback so it can be logged and put in the queue to be fixed.
    http://www.apple.com/feedback/macosx.html

  • Unable to use all the feature of my email service (Juno on the web) like; font size/color, bolding, italics, highlighting etc why? Those features work through Internet Explorer but not Firefox.

    When I go to my Juno on the web through Firefox, I am unable to use the tool features such as:
    Font size / Color
    Bolding
    Italics
    Bullets
    Highlighting
    just to name a few. Yet when I bring it up through Internet Explorer these features work, plus the way Firefox reads my Juno the tabs are distorted (the page is not formatted correctly, I contacted Juno they said I should contact my modem company AT& T they said no so you are my last resort.. Please help resolve my issue, THANK YOU in advance for assisting with this matter.

    It is up to Juno to enable Midas, the Rich Text Editor which is built into Firefox, with one little line of code on every web page that has RTE for IE. There's nothing that you can do to turn that feature on your self, it has to be coded on each web page that has Rich Text Editing.
    http://www.mozilla.org/editor/midas-spec.html <br />
    http://kb.mozillazine.org/Midas
    Their ignorance probably lies with their staff programmers only knowing how to do it for IE ''(their training and certificates are probably from the Microsoft cabal)'', and not realizing that Gecko and WebKit apps each have their own Rich Text Editor's, which require their own small line of code to enable those Editor's.

  • Change font size on macbook pro 15 retina

    HELP... Cant see the words
    can someone please tell me how to change font size on macbook pro 15 retina... I have this HUGE screen but the font on the screen is SUPER small.... can someone help me

    Sorry, OS X hasn't evolved to a scalable UI type for hard of seeing users. If you drop the resolution your type gets blurry.
    However I have two solutions.
    1: You hit System Preferences > Accessibility and set a control key for zoom/in out, set the zoom to where the pointer is at and get a third party scroll wheel mouse. This way you hold the control key and can zoom in/out anywhere the mouse is pointed at.
    2: You follow my User Tip here and use Firefox with the associated add-ons.
    Since Firefox is customizable, your able to create larger menu type and have web pages automatically zoomed (full page, graphics and all) to your minimal needs.
    Also FF will remember your window size so your not having to resize that each time you open the program. There is also a Full screen option.
    Since web browsing takes up a lot of time on machines, at least you have that part licked. If you use web based email like GMail, since it's in a web browser that is zoomed as well.
    Web browsing for hard of seeing users

  • Change font size in Sidebar Bookmark

    I have a text file with all my logins/passwords that I have open in Firefox sidebar. The problem is they open in font size 12. I want it 8 or so. Is there a way to decrease font size or not?

    Firefox has some global text size settings, but those aren't limited to just the one document you care about.
    Instead, you might consider changing your text file to an HTML file. Save as HTML using a plain text editor and add this at the beginning and end.
    &lt;!DOCTYPE html>
    &lt;html>
    &lt;body style="overflow:automatic">
    &lt;pre style="font-size:10px">
    (Your text here)
    &lt;/pre>
    &lt;/body>
    &lt;/html>
    Does that work?
    Also, there are many ways to manage your login information, if this approach becomes too cumbersome.

  • How to change font size of OATableBean Column Headers

    Dear All,
    I am facing a problem, senario is i am having a table layout with about 20 columns and each column header is about 30 characters long now the problem is when the table is rendered because of header font size its layout is not good looking ... is there any way that i can controll the font size of colmun headers.
    I have tried this solution provided in this forum:
    CSSStyle csNum = new CSSStyle();
    csNum.setProperty("font-size", "8");
    OAPageLayoutBean plb = pageContext.getPageLayoutBean();
    OAMessageStyledTextBean columnBean = (OAMessageStyledTextBean) plb.findChildRecursive("Description");
    columnBean.setInlineStyle(csNum);
    but it only change font size of column data not the header.
    Thanks in advance.

    Hi,
    // Get a handle to the column's header
    OAColumnBean columnBean =
      (OAColumnBean)tableBean.findIndexedChildRecursive("<columnBeanId>");
    OASortableHeaderBean colHeaderBean =
      (OASortableHeaderBean)columnBean.getColumnHeader();
    colHeaderBean.setText("<newText>");Regards,
    Gyan

Maybe you are looking for

  • Automatic creation of purchase info record

    Hi friends I could not find check box in RFQ (ME41!N)or in Quotation (ME47N) for updating/automatic creation of purchase info record. Thanks Sunny

  • BPS retraction of Quantity in CO OM not retracting at all !

    Hi everybody, I post after many and many trials. I am retracting Primary Costs ( we have planned on CostElements for CO-OM Internal Orders) and I followed the blogs etc. Everything is fine for the Amount and it retracts ok by Posting Period but the q

  • Laptop died need to move Serial Number

    I have my install CD and want to install Adobe on a new machine.  But my laptop died before I could remove the Serial Number.  How do I free up the Serial Number for installation on a new machine?

  • PC card adapter question

    i just got a sandisk PC card adapter to read/write to a compact flash card. can i leave the adapter in the PC slot (w/o a card) when i'm not using it? i won't lose it that way. thanks , barbara power book G5 Mac OS X (10.4.3)

  • A lock box?

    im just wondering since my Ipod nano is broken ATM what the litttle key lock box is on the top right thnx