We can say CSS backbone for a blog/website. CSS makes our blog attractive and readable as well. If our blog will be beautiful good, Smart and attractive so reader will spend more time to view our blog.Without CSS our blog is nothing.... Without CSS our blog is like a Blank piece of paper. CSS give look to our blog and make it SEO friendly.And it is a first stage to workout with our templates make our template beautiful and able to work in the beautiful blogging atmosphere. We saw many blog having beautiful look and widgets .. it is Just because of CSS.
What is CSS:
- CSS stands for Cascading Style Sheets
- Styles define how to display HTML elements
- Styles were added to HTML 4.0 to solve a problem
- External Style Sheets can save a lot of work
- External Style Sheets are stored in CSS file
- Where to add CSS in our template:
In our blogger template a tag is used to add CSS called "<b:skin>...</b:skin>" tag.
In our template we add our CSS code just above </b:skin> tag :
<b:skin><![CDATA[
{
.........your code here..............
}
]]></b:skin>
<style>.........your code here..............</style> yag is also used to add css in your template.
We use CSS in the type of CLASS(.) or ID(#) to work with our HTML elements. We use id if we want to apply the css for only one element and class when we want to apply it to multiple elemts.
For example:
Class starts with
.class{
.........your code here..............
}
Id starts with # tag
# id{
.........your code here..............
}
Now stylizing our HTML element:
<div class="class"> HTML </div>
OR
<div id="id"> HTML </div>
Second way to add CSS:
Just go to customize option from blogger template and after going there Template>Advanced>Add
CSS look at the picture below:
Now after clicking this add your CSS code in the Box which is provided :
now click apply to blog DONE.
Third Way To Add CSS
Or we can also add our CSS by hosting it such as on Google Drive and Google Code. After hosting your CSS code just copy the link of file :
And it to the piece of code and paste this piece of code just Template » Edit HTML » Proceed.Now search for the starting <head> tag and just above it paste the following code.
We already have published a tutorial on hosting css on google drive.
How To Host CSS On Google Drive
<link href='https://googledrive.com/host/your-file-code' rel='stylesheet'/>
Fourth Way To Add CSS
There is another way to add css. In this method we use <style> tags. The biggest advantage of using this tags is you can put this tag almost anywhere in your html page or template. You can also add this code in your blog layout as an html/java script In this method we put put css code in the code given below:
<style type="text/css">
.........your code here..............
</style>
Need Help:
We will soon write another detailed article on this .. till then need any type of help please drop your all question below without any hesitation .. or for personal help please Use our contact page.till then peace and blessings.
0 comments:
Post a Comment