Search This Blog

Sunday, November 02, 2008

Short Introduction to inline CSS

CSS is short for Cascading Style Sheets and is used for controlling the presentation (fonts, colors and layout) of documents written in Markup Languages like HTML, XHTML and XML such as blogs. CSS can be written in a separate document called from the template, written in the template itself or written within this post itself (inline CSS).

For example, the HTML tag for a paragraph is <p>. Now suppose we want the paragraph below to stand out from the rest of this post by adding background color, we can do that by using inline CSS.

The hexadecimal color code for the background color of this paragraph is #FFD4FF. I obtained this hexadecimal color code by using a free tool ColorPic. I set the color of this paragraph to have a different background color by surrounding the text I am now typing with the a pair of HTML tag for paragraph <p style="color:#FFD4FF;"> and </p>. To make this clearer, I will display what I am now typing by making this into a graphic and upload it as an image below for you to study:



HTML tag for paragraph and inline CSS for background color

Well, the text in the above image is a bit small. To make it clearer, I will redo the graphic below so the text is larger and clearer:

HTML tag for paragraph and inline CSS for background color

33 comments:

  1. I am a new convert to blogging, and I have a quesion for you. Can you tell me how to change my font and text size while posting? I do not even have the option to do so. Also, while I am writing a post if I upload a picture it shows up as words, I guess this is the code, but how can I change that? I hope these quesions are not too remedial, for I am new at all of this. Thanks in advance.

    ReplyDelete
  2. You are preparing your post in the EDIT HTML mode which is the best because it can give you better control over your blog. If you wish, you may change over to the COMPOSE mode.

    Regarding photos, those "words" instead of photo you saw are the HTML which are instructions to the web browser on how to display the photo on the web. I suggest you look at

    uploading and manipulating photos

    manipulating photos part 2

    advice to complete alt=""

    ReplyDelete
  3. Thank you for your quick response, but there is still a small problem. You said this was Dummies Guide to Blogger, so I hope you mean it. While composing my post, the tabs to switch between modes(HTML/Compose) are not even there. Any other suggestions?

    ReplyDelete
  4. Try missing COMPOSE/EDIT HTML tabs. Will appreciate feedback as whether that helped.

    ReplyDelete
  5. How to resize images in blogger to maximum size when mouse hovers on them..?

    http://www.itsteekays.blogspot.com

    ReplyDelete
  6. You mean a tool tip showing what you put in the title="" tag. If so, refer to Tip: complete the alt for images

    ReplyDelete
  7. Hi there

    Can I ask a question which isn't related to this text.

    I set up a blog and after an argument the people I invited to help out on the blog deleted me from my own blog.

    Is there any way I can delete the blog as the founder?

    Thanks for your help.

    ReplyDelete
  8. Hi Peter... When I post a new blog I dont get the color palette to change th font color of my blog... I only get options to change it into Bold, italic and adding link and images. How can I change it? Please help me for it.. I have been asking this question to many people but no one has answered...

    ReplyDelete
  9. Hello!
    Can you tell me how to change the background color of only the center post section and not the sidebars? I have a 3 column blog on Blogger and I like the 3 columns, but i think the center post section needs to stand out a little. Or can I add vertical lines to separate the sidebars from the center section?? I've looked at my template, but I don't know CSS, so I'm afraid to go changing things! I do know quite a bit of HTML, but not CSS. THanks!

    ReplyDelete
  10. Hi Peter...
    In my blogspot..I do not find any color palette. As in when I go for new post I only find the options for change to font size, and bold italic. In my cetrtain blog friends blog they have the color palette so that they can select some text and change there color...
    Please help me for it...

    ReplyDelete
  11. Hi Arizona,

    I have lots of emails and comments to respond to, so I hope you will create a test blog and test this:

    Go to LAYOUT then EDIT HTML and look for these codes in the template editor:

    .post-body {
    margin:0 0 .75em;
    line-height:1.6em;
    }

    Add bg-color:red;

    so that it becomes

    .post-body {
    margin:0 0 .75em;
    line-height:1.6em;
    bg-color:red;
    }

    If that don't work, try

    .post-body {
    margin:0 0 .75em;
    line-height:1.6em;
    background-color:red;
    }

    Only if successful, redo it in your actual blog.

    Please let me know if you succeed or not

    BTW I am trying to categorize my readers according to country. Which country are you from? I am from Malaysia.

    Peter @ Enviroman (Blog*Star)
    Blogger Tips and Tricks

    ReplyDelete
  12. Chippy-parro,

    I suspect you are using the EDIT HTML mode (my favorite) while your friends are using COMPOSE mode (I never use this mode as it gives me less control and choices).

    ReplyDelete
  13. Hi, Peter

    Obliquely relevant query for you. To create a line-break in the Blog Description header - does this have to be done via HTML? If so, how?

    Best Regards

    Tony in UK

    ReplyDelete
  14. Type <br /> where you want a line break. Please let us know if that is successful.

    ReplyDelete
  15. Peter,

    Worked perfectly. Thanks for your prompt response. Keep up the good work.

    ReplyDelete
  16. Supplementary Q, Peter. What is the HTML for italics in the header?

    Best
    Tony

    ReplyDelete
  17. <span style="font-style:italic;">these text are in talic</span>

    ReplyDelete
  18. Thanks again Peter.

    ReplyDelete
  19. How to do the same block background for whole sidebar title?

    ReplyDelete
  20. Hi Peter,

    I've been looking all over, and I can't find any help for my question.

    I am using the Scribe template in blogger, but the leading in the post is very small. I want to increase the space between the lines. My understanding is that I should increase the line-height, but this isn't working.

    I thought I would need to edit this section:

    body {
    margin:0;
    padding:0;
    font-size: small;
    text-align:center;
    color:$textColor;
    line-height:1.3em;
    background:#483521 url("http://www2.blogblog.com/scribe/bg.gif") repeat;
    }

    When I change font size above from SMALL to LARGE, the font of my post does change to large. But I can change the line-height to any number (i.e. 20em), and it makes no difference.

    I also tried changing the line-height here:

    .post {
    margin-top:8px;
    margin-$endSide:0;
    margin-bottom:24px;
    margin-$startSide:0;
    line-height 1.5em;
    }

    This didn't affect the post, either.

    I saw another person using this same template with bigger leading. Can you please advise? This i akeing me crazy!

    Mariel

    ReplyDelete
  21. Which website has what you want? Maybe you can go to that website, view page source code and see if that gives you some clue as to what can be done.

    ReplyDelete
  22. Great stuff!! Thanks for sharing!!

    Regards,
    brochure design

    ReplyDelete
  23. sorry for the trouble. i'm turning around my blog and i can not see how to solve this. http://mihaelasurugiu.blogspot.com/ is the name of the blog. and i've put some pages as you can see. but there are underlined. and i don't know how to make it without underline. i've used everywere the text decoration:none. i cand send you the code if you may help

    ReplyDelete
  24. Are you saying that you have created some static Blogger pages? and the text in these pages are all underlined?

    ReplyDelete
  25. yes. i've used the pages from blogger.

    ReplyDelete
  26. text decoration:none

    should be

    text-decoration:none;

    ???

    ReplyDelete
  27. it is with ; i will send you by mail the code. i've searched the internet for my problem and find that it might have something to do with links beeing used. but if is true i can not find where or how to modify this.

    ReplyDelete
  28. I don't have enough info to help you. I cannot understand how links can give you that problem. If you have more info, let me know.

    ReplyDelete
  29. http://mihaelasurugiu.blogspot.com/ that is the blog. as you can see the pages are underlined. but it's no problem if you can't help. you've done already enough with your blog. thank you

    ReplyDelete
  30. Deana Meske6:34 PM

    Thank you for the work you have put into your post, it helps clear up some questions I had.
    Brochure Design Services

    ReplyDelete
  31. Dear Peter
    Can I ask a question? Do you have time.
    Thanks

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...

Find topics by using the Google custom search box above which can search multiple blogs, or the SEARCH BLOG in the left corner of navbar. You can also find topics in the Label List and Categrories in the right sidebar.

For more information and special deals related to any of the issues on this page, place your cursor over the double-underlined links. All information supplied by Kontera.com.

Disclaimer: This blog has no relation with Wiley Publications