Blogging Tips: Customizing Your CSS

4:07 PM


The primary reason I left Wordpress was because I found the lack of support for custom code quite restricting. The rest was great: clean interface, lots of plugins, elegant themes. But I couldn't find a theme that fit my exact specifications. And you have to pay for the ability to customize your CSS. Being the cheapskate I am, I moved after 3 weeks.

This is a primer on customizing your code, primarily using CSS. This is written for Blogger but should be translatable to other platforms. Those who already code with CSS (and readers of Pugly Pixel) will find nothing new here, as I will be tackling the very basics of layout customization.


On the Agenda


  • What is CSS?
  • Syntax structure
  • Knowing which CSS syntax applies to what element
  • Where you place your custom CSS (in Blogger)


What is CSS?

CSS stands for Cascading Style Sheets. Like HTML, they are used to change (or "style") properties like font face, font size, link and hover colors, and SO MANY other attributes on web pages. CSS is different from HTML in that you can change the style on your whole site just by editing ONE style sheet. HTML is like the foundation of your site, while CSS is all the pretty trimmings.

For example, the HTML I use for all my layouts remains the same. (Hence, the structure is the same: two-column layout.) It's just the CSS I'm changing to achieve different looks. (Wow parang makeup lang.)

Blogger allows some pretty heavy CSS customization. I've found that Simple is the most flexible layout for this.


Syntax Structure

CSS syntax (a fancy name for "code") is composed of three elements. By changing these elements, you can modify the style of your website.

selector { property: value }

  • selector - the HTML element that you want to style
  • property - the property title (e.g., font-face, color, etc.)
  • value - the specific style you apply

Here's a common example using the blockquote. Say I have a quote:

"In the moment when I truly understand my enemy, understand him well enough to defeat him, then in that very moment I also love him." (Ender Wiggin)

And I want to make it fancy, maybe add a background color and a border, change the font. I would code:

blockquote {
font-face: Georgia;
font-size: 14px;
font-style: italic;
width: 500px;
background-color: #FADADD;
border-left: 30px solid #CCCCCC;
padding: 30px;
text-align: center; }

  • blockquote - the selector/element
  • font-face, font-size - the font used and the size in pixels (px) or points (pt) or percentage (%)
  • font-style - italicized (italic) or not (none)
  • width - width of the blockquote in pixels (px) or percentage (%)
  • background-color - in 6-digit hexcode. You can view the hexcode for different colors here.
  • border-left - I chose to place a border only on the left side. I made it a 30 pixel-wide, solid black line.
  • padding - the padding around the text itself, so there is space between the quote and the edges of the blockquote
  • text-align - aligns the text in the center

It would then look like this:

"In the moment when I truly understand my enemy, understand him well enough to defeat him, then in that very moment I also love him." (Ender Wiggin)



Knowing which CSS syntax applies to what element


Before typing in your CSS, you will have to define which element in your webpage it is going to affect. Luckily most browsers have the handy-dandy "Inspect element" feature. I use this a lot when I want to know what font or CSS is being used on the page.


Simply right-click on any element on the page (a heading, a photo, a link, whathaveyou) and click on "Inspect element." This brings up the page source -- its HTML, along with the CSS its employing.

In this example, I chose to inspect the title. The HTML code shows that it's a link, while the CSS (on the right) shows that the element is named h3.post-title. So if I want to edit all my titles, for example change the font or make them all boldface, I will have to define that particular code of CSS as h3.post-title.


Where to place your custom CSS

Option 1: Using the Template Designer


This option is best for those who aren't comfortable with looking at long lines of code.
  1. Go to your Blogger Dashboard and navigate to "Template."
  2. Click on "Customize." This opens the Template Designer.
  3. Click on "Advanced."
  4. Click on "Add CSS." That little box is where you type in your custom CSS.

Option 2: Editing the HTML directly


This is the option I prefer, because it gives me greater flexibility. You will have to find the spot where you place your code though, so it may be a tad more confusing.

TIP: Always back up your Template before editing it. ALWAYS. You never know when you're going to paste your code in the wrong spot, delete the wrong thing, basically mess up your entire layout.
  1. Go to your Blogger Dashboard and navigate to "Template."
  2. Click on "Edit HTML." This opens the full HTML code of your template.
  3. Make sure the ""Expand Widget Templates" is checked.
  4. Find (Ctrl+F) the line ]]</b:skin>. Your custom CSS goes above this line.
And that's it! In the next post I share some of the CSS I used in this layout.

You Might Also Like

0 comments

Disclaimer

Majority of the products you see here are purchased by me. Products that are provided by companies for consideration will contain a footnote indicating that fact, as will affiliate links. Rest assured that all reviews are written with my honest opinion.

free web counter
Photoblogs - Top Blogs Philippines
Paperblog