Understanding CSS in Blogger Template
A blogger should know CSS and HTML. What is CSS and how to use it in Blogger? There are some basic code of CSS we need to understand for Blogger. It will help our blogging life easier. Below is some basic concept of CSS, how to use CSS in HTML and how is the application of CSS in Blogger template. I hope by understanding the basic concept of CSS, it can help us in improving our Blogger template and blog appearance.
In this article i will share my understanding about CSS that will cover in several topics as below:
- What is CSS (Cascading Style Sheet)?
- How to use CSS in HTML?
- Mark up text using style attribute (Inline CSS)
- Mark up text using Internal CSS
- Mark up text using External CSS
- CSS application in Blogger (b:skin and b:template-skin)
- Basic CSS for Blogger
 |
| Basic CSS for Blogger, make Blogging much easier |
What is CSS?
CSS is stand for Cascading Style Sheet. So what is a style sheet? Style sheet is a list of code that has function to style the appearance of an element in a web or other related application. We know that HTML is a mark up language. It mark up text so it can be displayed as we intend in the web browser. HTML is responsible for the document structure and mark up and CSS is responsible mainly on the mark up. We can see the CSS application in the example below.CSS is stand for Cascading Style Sheet.
How to use CSS in HTML?
One element/attribute that work particularly to format (mark up) the HTML element is<style>. It could be a HTML element or a HTML attribute. We can put the <style> element inside the <head> element, and we called it internal style sheet. We can also put the attribute style in any HTML element to mark up the HTML element, and we called it inline styles. We can also used style sheet that is put in a CSS file outside the HTML. We called it external style sheet.So for recap, there are three ways of inserting style sheet in HTML document.
- External style sheet (as .css file)
- Internal style sheet (located inside
<head>element) - Inline Style Sheet (as attribute in every html element)
So for recap, there are three ways of inserting style sheet in HTML document.
Many online resources are available to learn CSS. W3school is my favorite. It has structural explanation with a lot of example that we can follow. And the best thing is, it has Try It editor where we can change the code and see the impact of that code side by side.
Mark up text using Style Attribute (inline CSS)
We can mark up the text in HTML using style attribute for example the code below. The style attribute is used to change the color inside the<h1> tag into red color.<html> <head> <title>The example of application of style attribute in HTML </title> </head> <body> </br> <h1 style="color:red"> This is example of HTML with style attribute in h1 element </h1> <p>This paragraph is the content of the first heading</p> </body> </html>
You can copy these code into notepad and save it as html document an open it in web browser. You will get something like this.
 |
| Example of application style attribute in HTML to change the color of h1 to red |
We can see that style attribute with value "color:red" is responsible to change the text color into red. What if we have a lot of heading and we want to change the color of all text inside heading to red? We can use style attribute for every <h1> tag in the document. However this is not practical. We need to write the same code 3 times to get the heading color become red. Below is the example.
<html> <head> <title>The example of application of style attribute in HTML </title> </head> <body> </br> <h1 style="color:red"> This is example of HTML with style attribute in h1 element </h1> <p>This paragraph is the content of the first heading</p> <h1 style="color:red"> Second Heading </h1> <p>This paragraph is the content of the second heading</p> <h1 style="color:red">Third Heading </h1> <p>This paragraph is the content of the second heading</p> </body> </html>You can copy this code into notepad and save it as html document an open it in web browser. You will get something like this.
 |
| Example of Style attribute to mark up several text in HTML |
Mark up text using Style Attribute (internal CSS)
As we can see that it is not practical and not efficient to use inline style to format text in HTML. We need to write the same attribute in every <h1> element that we create.This is where the CSS playing his role. CSS can be declared in the <head> element, and the style will be apply to all heading inside the HTML document. We do not create inline style in every <h1> element to get the same impact as inline style.
We can write one code in CSS and apply in every <h1> inside the document or event outside the HTML document.
In this very simple case we can define our CSS inside the <head> element or put it in external file with css extension. Below is the code for using CSS inside the <head> element. We called it internal style sheet. We only need to put
<style> element inside the head element and write the h1 {color:red}. It will mark up all the text with <h1> element to red.<html>
<head>
<title>The example of application of style attribute in HTML </title>
<style>
h1 {color:red;}
</style>
</head>
<body>
</br>
<h1> This is example of HTML with style attribute in h1 element </h1>
<p>This paragraph is the content of the first heading</p>
<h1> Second Heading </h1>
<p>This paragraph is the content of the second heading</p>
<h1>Third Heading </h1>
<p>This paragraph is the content of the second heading</p>
</body>
</html>
Mark up text using CSS file (external CSS)
The third way of using CSS is by using external CSS. So there will be two files. The first file is the HTML that is responsible for the document structure. The second file is the CSS file that is responsible for the presentation. Both of them should be put in the same folder.
We use <link> element to link HTML and CSS file. Below is the illustration.
The HTML Code
<html> <head> <title>The example of application of style attribute in HTML </title> <link rel="stylesheet" type="text/css" href="simple.css"> </head> <body> </br> <h1> This is example of HTML with style attribute in h1 element </h1> <p>This paragraph is the content of the first heading</p> <h1> Second Heading </h1> <p>This paragraph is the content of the second heading</p> <h1>Third Heading </h1> <p>This paragraph is the content of the second heading</p> </body> </html>For this example, we only need an external CSS file to format all the <h1> content to red. Below is the CSS code. Copy this code to Notepad and save as "simple.css". Put the css file in the same folder with the HTML file.
/* This is simple.css to format <h1> become red */
h1 {color:red;}
So we used a HTML file build the content and the HTML will call an external CSS file to format the content.
CSS Application in Blogger
Blogging is about presenting a content to visitor. Content is the king but presentation is the prime minister. Blogger is a blogging platform that use some database and a XML file as the template to present the database. The XML works as a HTML generator when our blog is being accessed. The final presentation will be in HTML format. This HTML is formatted or styled using some CSS code. The CSS code is located inside the<b:skin> area of blogger template and also CSS external that is linked to the <b:skin>. So that's why CSS is very important for Blogger.In blogger template we might found some link to the CSS file. This CSS file is created by some programmer that found a certain CSS that is required by Blogger. So this CSS is stored in server and other blogger that need this style can use the CSS by linking in the blogger template.
That is the best ilustration of what is the meaning 'cascading' in CSS. This external CSS can be used by thousand website that link to this external CSS. These are several external CSS that usually we can found it in a blogger template.
What is the benefit of using CSS?
The CSS file is working from the external of HTML document. We can apply the style to every blog post that we made. With an extenal style sheet (CSS) we can change the presentation of an entire blog by changing just one file.What is Basic CSS that a Blogger should understand?
There are several CSS that frequently used in Blogger template. Bellow is the list. The explanation will be put in different post.- CSS Reset by Eric Meyer or other resource
- CSS to control layout (b:skin)
- CSS to control Blogger element (b:skin)
- CSS to control Template appearance (b:template-skin)
The CSS reset is usually put on the top of CSS code.
 |
| The use of CSS reset in Blogger template |
As a conclusion, CSS is very important for Blogger. By reading this article i hope you can understand at least the basic concept of CSS and CSS structure. For the next article i will prepare more technical material related with CSS like CSS selector, making layout using CSS, making menu using CSS and other interesting topic in CSS.
I hope you can enjoy this article, please share if you found this article to be useful.
Post a Comment for "Understanding CSS in Blogger Template"