Here are some tips and tricks for Cascading Style Sheet (CSS) in your blog.......
In
old Blogger the css section is enclosed between <style> and
</style> tags. In new Blogger the css follows the same rules
except that it is enclosed between <b:skin> and </b:skin>
tags. For more details on how the template is structured see Parts of the Template.
These are called as embedded style sheets since they are embedded
within the document itself. However you can import other style sheets
using this coding :
<STYLE TYPE="text/css">
@import url(styles.css);
Put the url of your stylesheet within the brackets. The import rule must be placed before other css rules and immediately after
<STYLE TYPE="text/css">
To Highlight your words use<p style="background: blue; color: white;">Highlighting and
font color with inline CSS</p> Example :
Highlighting and
font color with inline CSS
To Highlight a single word use this :
<span style="background-">Highlighted words</span> in this sentence.which will cause this effect :
Highlighted words in this sentence.
To Add Background image to Text use :
<SPAN STYLE="background-image: url(yourimage.jpg)">Text on Background</SPAN> To apply an INLINE STYLE you can apply the HTML attribute STYLE as follows :
<P STYLE="color: gray;">Sentence you want to apply grey color to.</P> Example
Sentence you want to apply red color to.
SETTING LINK PROPERTIES WITH CSS - To set colors of links in the css set this code :
a:link { color:purple; /*Unvisited link color*/ text-decoration:none; }a:visited { /*visited link color*/ color:red; text-decoration:none; }a:hover { /*color on mouseover*/ color:yellow; text-decoration:underline;}Only
certain colors are recognized by name. To set other colors you will
have to specify the hexadecimal number for the color. You can set the
hexadecimal color by using this type of code :
a:link { color:#0000ff; /*Unvisited link color*/ text-decoration:none; }For
looking up the hexadecimal code for a color go to :
http://www.asahi-net.or.jp/~FX6M-FJMY/java09e.html or use Color Picker
which is a free color utility from iconico.com
TURN OFF UNDERLINING IN LINKS by using :
a:link { text-decoration:none; }WEB SAFE COLORS are those colors which look the same on all computers and
browsers.
To use these your hexadecimal number should contain these pairs : 00,
33 66, 99, CC and FF in any combination. For example #669933 and
#00CCFF are web safe colors.
SUPERSCRIPTING TEXT can be done using
SUP {vertical-align:super; }in
the CSS and then in the actual post add <sup> superscripted text
</sup> tags around the text you want superscripted.
FOR SUBSCRIPTING TEXT use :
SUB {vertical-align:sub; }in the CSS and then in the actual post add <sub> subscripted text </sub> tags around the text you want subscripted.
USE SPECIFIC FONTS WHERE POSSIBLE. You can choose a special font to display any document but if the fonts are not available on
the viewer's computer you can include instructions to use a generic font. For example :
H1 {font-family: Garamond; } /*No H1 heading displayed if Garamond font not present */H1 {font-family: Garamond, sans-serif; } /*H1 heading displayed in sans-serif if Garamond font not present */Use serif or sans-serif at the end of any font list.
BACKGROUND COLOR TO HEADINGS For this use the following code :
/* Headings----------------------------------------------- */h2 { background-color:#0000ff; /*<---Add this line*/ } Substitute the hexadecimal number as before.
BACKGROUND IMAGE. TO add a background image add this line where you want to add the image. Here we have added it to the body.
BODY { background-image: url(URL LINK OF IMAGE); /*<---Add this line*/ }
To change the background color add this line to the body code above:
background-color:#009900;
Choose a hex color code here http://www.asahi-net.or.jp/~FX6M-FJMY/java09e.html to replace 009900 in above code.
Replace the CAPS with the location on the web where you have uploaded your image.
FIXED BACKGROUND IMAGE : To add a background image which does not move when page is scrolled use this :
BODY { background-image: url(URL LINK OF IMAGE); background-repeat: no-repeat; background-position:center; background-attachment:fixed; /*<---Add this line*/ }For
positioning you can use top/50% 0% (center at top), bottom/50% 100%
(center at bottom), right/100% 50% (center at right) or left/0% 50%
(center at left) instead of center in the above code. For more precise
positioning use the percentage figures given.
The percentages 50% 50% refer to a point in the center of the page.
The
default value for background-position is top left (0% 0%). For more details see
How to Add Picture to Background.MARGINS AND PADDING : Margins are space outside the element while padding is space inside the element. They are described in code as follows :
#header h1 { margin:5px 5px 0 40px; padding:55px 20px .25em;}They
are described in this order : top, right, bottom and left in a
clockwise fashion. When calculating the width of your blog add the
widths of all the elements and the side margins to arrive at the correct
figure. To change width of blog see
How to Change Blog width.
If only one value is specified then all have the same values. If
value for left is missing then the value for right is used. If value
for bottom is missing then value for top is used. If value for right is
missing then value for top is used.
To center an element use :
#header h1 { margin-left: auto; margin-right: auto; width:50%;}BORDERS surround the content and the padding and can be set using the following code (example):
#outer-wrapper { border-style: solid; /*dotted,none,dashed,double,groove,ridge,inset,outset*/ border-width:4px; border-color:#0000ff; }Other properties shown in second line in above code.
BLOCKQUOTES -
Sometimes you may find it necessary to draw the reader's attention to
some important points. This is done using blockquotes. You can specify
the properties of the blockquote in the CSS like this :
.post blockquote { width: 300px; margin: 5px 0 5px 15px !important; font-size: 1.4em; text-align: center; border:double #000000 !important; padding: 0 !important; float: right; }This
specifies the formatting of the blockquote in my blog. Whenever you
create a post select the text you want to put into a blockquote and
click the quotes icon on the top frame of your Post Editor. The
selected text is formatted and displayed as described in the blockquote
code. See the blockquote below.
The !important declaration is used to override all others.
FLOAT :
This is used when you want to place adsense Ads. within a post with the
post content flowing round the Ad. The blockquote on the right has
been floated right. For example in your CSS describe an element :
#adscontainer { float:left;}Then in your template add this code where you want the Adsense Ad to go :
<div id="adscontainer">PASTE ADSENSE CODE HERE</div>This will float your Adsense Ad to the left within your posts. For the new/beta blogger the code is different so see
How to add Adsense in Beta Blogger.
DROP CAPS - These are used to make the first letter in a paragraph large. To do this use :
SPAN.firstcap { font-size:300%; font-weight:bold; color:#D4D4C7; float:left; line-height:125px; width:0.75em; }
Then
add in your blog page <span class="firstcap">F</span> tags
around the first letter of your paragraph. You can change the above
properties to make it more impressive. See the picture alongside.
Click on picture to enlarge it.
LAYOUT OF PAGE ELEMENTS - Towards
the end of the css code you will find the css responsible for
displaying your Page Elements subtab under the Template tab. Here is my
Page Elements page before I modified the css :
Here you can see that there is no alignment of the elements. So I modified the code as follows :
/* Page structure tweaks for layout editor wireframe */
body#layout #sidebar, body#layout #main,
body#layout #main-wrapper,
body#layout #outer-wrapper,
body#layout #sidebar-wrapper {
padding: 0;
}
body#layout #outer-wrapper {
padding: 0;
width:
1160px; /*<---Change this as per size of your #outer-wrapper*/
padding: 0 10px 0 5px;/*<-Change this as per padding of your
#outer-wrapper*/ } body#layout #sidebar-wrapper {/*<--Change name
as per name of your #sidebar-wrapper*/ padding: 0; width: 320px; /*
<---Change this as per size of your #sidebar-wrapper*/ }
body#layout #newsidebar-wrapper { /*<---Change name as per name of
your #sidebar-wrapper*/ padding: 0; width: 170px; /* <---Change
this as per size of your #sidebar-wrapper*/ } body#layout
#main-wrapper { padding: 0; width: 535px; /* <---Change this
as per size of your #main-wrapper*/ padding: 5px 10px 0 5px;
/*<--Change this as per padding of your #main-wrapper*/ }
body#layout #header-wrapper { padding: 0; width: 890px;
/*<--Change this as per size of your #header-wrapper*/ }
body#layout #footer-wrapper { padding: 0; width: 660px; /*
<--Change this as per size of your #footer-wrapper*/ } /* End of
Page structure tweaks for layout editor wireframe */ This caused the Page Elements page to show all the elements neatly lined together as seen here :
VALIDATING CSS can be done at : http://jigsaw.w3.org/css-validator/
This checks for any typos in your css and other mistakes.
