New Visitor Like what you read Then please subscribe to my Blog Feed or sign up for Free Email Updates. Free Blog Website Templates Available on the Free CSS site. CSS Tips and Tricks for Blogger. Kosson, Add this code to the CSS part of the template. Blogger CSS Templates said. Over 5000 CSS3 web site templates offered by CSSTemplates. Thanks for Visiting Here are some tips and tricks for Cascading Style Sheet CSS in your blog. In old Blogger the css section is enclosed between lt style and lt style tags. In new Blogger the css follows the same rules except that it is enclosed between lt b skin and lt 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 lt STYLE TYPEtextcss import urlstyles. Free CSS Templates has 175 templates in BTemplates. Template Authors. There are 4667 free Blogger Templates for You In this tutorial, well cover how to do five quick CSS customizations that make your blog stand out. Express Scribe Version more. Even if you dont know what CSS is, youll be able to follow the. Formatting code snippets for blogging on Blogger. CSS. with your template code in blogger. Online Form generator for html css code to generate a 3 column layout without using tables. Allows changes to code color, size, etc then copy n paste of code output. If you are having difficulties adding the CSS codes in a Blogger template, heres a short guide that will show you a more practical and fast way to add CSS. Modifying your blog appearance usually requires you to edit your templates existing CSS Cascading Style Sheet code or adding new codes. To add a CSS code snippet. Bloggers is one of the most popular and powerful plat which serve number of users to start their blogs easily. Apart from that blogger platform provides myriad. Put the url of your stylesheet within the brackets. The import rule must be placed before other css rules and immediately afterlt STYLE TYPEtextcss To Highlight your words uselt p stylebackground blue color white Highlighting andfont color with inline CSSlt p Example Highlighting andfont color with inline CSSTo Highlight a single word use this lt span stylebackground Highlighted wordslt span in this sentence. Highlighted words in this sentence. To Add Background image to Text use lt SPAN STYLEbackground image urlyourimage. Html Codes For BloggerText on Backgroundlt SPAN To apply an INLINE STYLE you can apply the HTML attribute STYLE as follows lt P STYLEcolor 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 isited link color color red text decoration none a hover olor 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 0. Unvisited link color text decoration none For looking up the hexadecimal code for a color go to http www. Campbell Biologie Francais Pdf Creator there. FX6. M FJMYjava. Color Picker which is a free color utility from iconico. 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 0. Free Css TemplatesCC and FF in any combination. For example 6. 69. CCFF are web safe colors. SUPERSCRIPTING TEXT can be done using. SUP vertical align super in the CSS and then in the actual post add lt sup superscripted text lt 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 lt sub subscripted text lt 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 onthe viewers computer you can include instructions to use a generic font. For example H1 font family Garamond o H1 heading displayed if Garamond font not present H1 font family Garamond, sans serif 1 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 h. 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 urlURL LINK OF IMAGE lt Add this line To change the background color add this line to the body code above background color 0. Choose a hex color code here http www. FX6. M FJMYjava. 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 urlURL LINK OF IMAGE background repeat no repeat background position center background attachment fixed lt Add this line For positioning you can use top5. For more precise positioning use the percentage figures given. The percentages 5. 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 h. 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 h. BORDERS surround the content and the padding and can be set using the following code example outer wrapper border style solid otted,none,dashed,double,groove,ridge,inset,outset border width 4px border color 0. Other properties shown in second line in above code. BLOCKQUOTES Sometimes you may find it necessary to draw the readers attention to some important points. This is done using blockquotes. You can specify the properties of the blockquote in the CSS like this. 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. 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 lt div idadscontainer PASTE ADSENSE CODE HERElt div This will float your Adsense Ad to the left within your posts. For the newbeta 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. D4. D4. C7 float left line height 1. Then add in your blog page lt span classfirstcap Flt 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.