ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web»
  • Blogs

10 CSS Tips For Blogger

Updated on June 25, 2013

CSS

CSS stands for Cascading Style Sheets.

CSS is used to personalize the appearance of a website, aiding the use of the site and making a more pleasing front.

While HTML still holds the information for the site (the basic text and actual content) CSS can give it a whole new look.

CSS Basics

Below is an example of some CSS code:

p{
font-family: georgia, "Times New Roman";
color: black;
text-decoration: underline;
}

.content quote{
background: rgb(200,200,200);
border-radius: 10px;
}

As you can see from the example, there are two simple parts to a CSS rule:

  1. The Selector
  2. The Declaration Block

The selector ('p' and '.content quote' in the example) tells the browser what portion of HTML to apply these effects to.

The other section, the declaration block, is where the actual work is done, setting values to properties, thus giving the website a different appearance.

While a detailed discussion of CSS would take up too much space in this article, you can learn more about it at:

W3Schools.

CSS Pocket Reference 4th Edition.

How To Add CSS in Blogger

Adding CSS in Blogger is easier than you'd expect.

  1. On management screen for your blog, click the 'Template' option.
  2. Next, choose the orange button: 'Customize'.
  3. In the resulting screen, choose the option 'Advanced'.
  4. Now, at the bottom of the list, choose 'Add CSS'.

Click thumbnail to view full-size
Source
Source

1: Rounded Corners

Sometimes, a squared corner looks harsh or out of place on a website. In this case, use border-radius. This will curve the corners of the selected element, making them appear rounded.

Note: While this property will affect the appearance of the borders of an element, you don't need borders to use this property, it will work just as well without them.

Border-radius needs a value to function, and can accept a px/em/in/etc. measurement, or a percentage.

Below is an example of how it would look in the stylesheet.

border-radius: 10px;

This example would make all four corners nicely rounded.

Note: As with most shorthand properties, you can define more than one value for border-radius to specify what to do for each corner. They are, in order, top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.

2: Transparency

Another change you can make, subtly or dramticlly, is transparency. This works especially well if you have an image behind the transparent element.

The basic transparency control is:

opacity: value; /* replace 'value' with a number between 0 and 1. */

But opacity controls the transparency of the entire element. If you want to change the opacity of just the background or just the text, you'll need rgba(). Here's how it works:

background-color: rgba(0,0,0,0.5);  /* This will make the background a half-transparent black. */

color: rgba(0,0,255,0.5);  /* This will make the text a half-transparent blue. */
Click thumbnail to view full-size
Source
Source

3: Shadows

You can give a little depth and interest to your design by adding a shadow. There are two shadow propeties:

  • box-shadow, which creates a shadow from the shape of the element.
  • text-shadow, which creates a shadow of the text.

Both of these take the following values:

  1. x offset: The distance to offset the shadow from the element horizontally.
  2. y offset: The distance to offset the shadow from the element vertically.
  3. Blur: This value is optional, but provides the degree of blurring.
  4. Color: You can use rgb() to get a specific color, or rgba() to make a gentler shadow.

4: Links

Links are a very important part of any site. Done well, they pop, and allow the reader to know that they'll take him/her somewhere. Done poorly, they might go unnoticed, or distract from the content.

To select the links in your CSS, you need some special selectors.

  • :link will select all unvisited links.
  • :visited will select all visited links.
  • :hover will select the link the user is hovering over.
  • :active will select a link that's being clicked.

Note: The properties must be set in the order they appear here.

To use any of these selectors, mimic the following code:

p:hover{
color: red;
}

.content .sidebar h2:active{
color: blue;
}

5: Fonts

You can add some extra personality to your blog with unique fonts. The main property for changing a font is 'font-family'

To use it, you simply name the font you'd like to be used after it:

font-family: georgia; /* Voilà */

It's recommended that you give the server multiple options for the font, in case it can't use the one you selected. To do this, simply continue listing fonts, separating each one with a comma.

font-family: georgia, tahoma, "Times New Roman"; 
/* Multi-word fonts need surrounded by quotes */

6: Padding and Margin

If you find that the spacing on an element isn't to your liking (which often happens when changing fonts or adding borders) you can use 'padding' and 'margin' to correct these problems.

Padding determines the distance between the content and the edge of the border.

Margin determines the distance between the border and other elements of the same hierarchy.

See the diagram below:

Source
Source

7: Outline Text

The text-shadow property can also be used to make outlined text. Use the following code:

text-shadow: 0px 0px 1px black;

This will create a thin black outline all around your text. As with the previous discussion of text-shadow, you can change the color of the shadow using words (white, black or brown), hexadecimal(#ffffff), rgb(20, 40, 40), or rgba(200,200,255,0.4).

8: ':first-letter'

This handy pseudo-selector, allows you to apply an effect to the first letter alone, and not the rest. This can be used for drop caps, or just fancy-ness.

My favorite effect here is:

p:first-letter{
font-size: 120%;
}

It just adds a little more pop to the paragraph opening.

Source

9: Borders

Give a little more attention to an area of your blog, or divide it from another, by adding a border.

Borders need three values:

  • width
  • style
  • color

Your options for the style are:

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

border: 2px solid black;
border: 4px dashed rgb(40,50,10);

Stylize Your Text

Beyond picking a font, there are three other ways to customize the text:

  • font-size
  • font-weight
  • font-variant
  • font-style
  • text-decoration
  • text-transform

Font-size simply accepts a value to determine the size. This value can be absolute (50px, 2em) or relative (200%, 50%).

font-weight can accept 5 values:

  • normal (this resets this value after a change)
  • bold
  • bolder
  • lighter
  • any hundred (100 - 900). Along this scale, 400 = normal, 700 = bold

font-variant adds some zing by making the text have small caps instead of lowercase letters. It's as simple as

font-variant: small-caps;
/* Replace 'small-caps' with normal to
   revert to regular text          */

font-style can make text italic or oblique. Another simple property to use, just write

font-style: italic;
/* or */
font-style: oblique

text-decoration can underline, over-line, or strikethrough your text. Just give it one of the following values:

  • underline
  • overline
  • line-through

text-transform controls the capitalization of the text based on the value you give it:

  • capitalize makes the first letter of every word uppercase.
  • uppercase makes every letter uppercase.
  • lowercase makes ever letter lowercase.

Comments

    0 of 8192 characters used
    Post Comment

    • Jordan Hake profile image
      Author

      Jordan Hake 4 years ago from Southwest Missouri, USA

      Thanks, I'm glad it helped! :)

    • profile image

      Priabc 4 years ago

      hi.. it's a nice article

    • Jordan Hake profile image
      Author

      Jordan Hake 4 years ago from Southwest Missouri, USA

      No problem!

    • profile image

      uetets 4 years ago from melbourne

      Thanks for sharing...

    • Jordan Hake profile image
      Author

      Jordan Hake 4 years ago from Southwest Missouri, USA

      No problem, I hope you enjoy modifying your blog!

    • profile image

      sravani 4 years ago

      thankyou for the information.

    • Jordan Hake profile image
      Author

      Jordan Hake 4 years ago from Southwest Missouri, USA

      Thanks, Zubair! CSS is a bit of a learning curve at first, but then it's like a game. Happy style sheeting!

    • Zubair Ahmed profile image

      Zubair Ahmed 4 years ago

      Thank you for sharing this very useful tips. KNowing a little about CSS can really help when one tries to fine tune the presentation of templates etc.

      Many Thanks