(It assumes that you lot lot know the CSS ascendance for the govern you lot lot wish to add: banking concern lucifer a CSS reference deport if you lot lot scream for attention to write the ascendance - I've found that Sitepoint's HTML Utopia: Designing Without Tables Using CSS guide is very useful.)
What are CSS rules
It's useful because it lets you lot lot alter the formatting throughout your weblog past times making a alter inward exclusively 1 place (the rule).
If your weblog has a Designer or Dynamic template, inwards improver to together with thus adding a CSS govern is existent easy. (Ref: "What type of Blogger template practise I have?")
If you're using a Layout or Custom template it's a picayune to a greater extent than complicated - inwards improver to you lot lot should construct certain plenty you're aware of the disadvantages of changing your blog's template.
Adding a CSS govern to a Designer or Dynamic template
1 Log inward to Blogger, inwards improver to acquire to the Dashboard.
2 For the weblog that you lot lot wish to add together together the govern to, select Design > Customize > Advanced
3 Scroll to the bottom of the listing of options, inwards improver to click Add CSS. This this opens a panel on the right manus side of the screen.
4 Enter the new rule underneath whatsoever other rules that are already listed inward the panel, or apply the alter you lot lot wish to the rules are already there.
v If you lot lot wish the govern to apply on your blog's mobile template every flake adept every flake for desktop visitors, inwards improver to together with thus enter a minute version of the govern amongst ".mobile " at the offset - AND come across the banking trouble organisation annotation below unopen extra one-off steps for mobile rules.
Example, 1 of my blogs has these govern to format the lines inward certain plenty tables:
.table1stLine td {
padding-top: 10px;
}
.tableLastLine td {
border-collapse: collapse;
border-bottom: 1px fellowship green;
padding-bottom: 1em;
}
To acquire these rules to apply when visitors using smartphones or tablets aspect at my blog, I also needed to add together together these rules:
.mobile .table1stLine td {
padding-top: 10px;
}
.mobile .tableLastLine td {
border-collapse: collapse;
border-bottom: 1px fellowship green;
padding-bottom: 1em;
}
NB The Add CSS window at nowadays shows you lot lot whatsoever rules that bring been added to the template via the window previously.
One-off extra steps to construct certain plenty that the mobile rules are applied
If you lot lot bring added 1 or to a greater extent than .mobile rules, inwards improver to together with thus to construct certain plenty that they are applied you lot lot also scream for to:
1 Apply a mobile template to your blog, and
ii Make certain plenty that you lot lot bring chosen the Custom alternative for it.
(To starting fourth dimension with, Blogger shows Default - you lot lot scream for to alter this amongst the drop-down list)
Tip: you tin laissez passer the sack banking concern lucifer that a mobile template has been turned on for this weblog past times editing your template inwards improver to searching for this text:
<body expr:class='"loading" + data:blog.mobileClass'>If the text is present, inwards improver to together with thus you lot lot bring enabled a mobile template. If it's non there, inwards improver to together with thus you lot lot scream for to apply a mobile template in the greenish way: practise not effort but adding that text.
Adding a CSS govern to a Layout template
1 Log inward to Blogger, inwards improver to acquire to the Dashboard.
ii Edit your template in the greenish way.
iii Insert the new govern immediately before this text:
]]></b:skin>
</head>
Note: it's in all likelihood that inwards that location testament terminal other rules already before the quoted text. Make certain plenty that you lot lot don't interrupt them, ie that your new govern is placed subsequently the close-bracket } for the govern that's inwards that location already, inwards improver to before the inaugural off ]
Adding a CSS govern to a Classic template
1 Log inward to Blogger, inwards improver to acquire to the Dashboard.
ii Edit your template inward the greenish way.
iii Insert the new govern immediately before this text:
</head>
Note: it's in all likelihood that inwards that location testament terminal other rules already before the quoted text. Make certain plenty that you lot lot don't interrupt them, ie that your new govern is placed subsequently the close-bracket } for the govern that's inwards that location already, inwards improver to before the </head> statement.
Related Articles
Apply a mobile template to your blog
Advantages inwards improver to disadvantages of changing your blog's template
What type of Blogger template practise I have?