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

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: "https://hubpages.com/privacy-policy#gdpr"

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)