Basics of Blogger HTML | Editing CSS & Adjusting Blog Design

Tuesday, January 8, 2013


Part 1 Basics of Blogger HTML | Markup & Coding

This post will be about styling CSS and changing things on your blog. I will (hopefully) teach you how to write different things and give you a better understanding of how your blog works. The first part of this series was on Markup & Coding which can be very confusing, but maybe after you've read through this, it will begin to make a little more sense. Let me know if you have any questions...


Some Simply Rules

Body: If you open a tag you must close the tag. Tags are within arrow brackets. <   > is open, followed by a closing </   > tag. Example <body> ....load of code... </body>

 Measured in: px = pixel (dot resolution of the screen) | pt = point | See conversion of px, pt, em & % here

Code written in: small letters

Layout for CSS: selector { property: value; } Example .post-title { font-color: red; }, h4 { text-align: right;} the sector is basically what HTML element you want to change (titles, headings, image, menu, background...), the property is the part you are changing (font, size, colour, border, alignment) and the value is the "answer", what you are changing it too. Multiple properties are written like this selector { property: value; property2: value2; property3: value3; }

 CSS Close Properly: When using more than 1 tag, remember to close properly.
Example right <em><strong> TEXT </strong></em>
Example wrong <em><strong> TEXT </em></strong>



 Insert an image
<img src="IMAGE URL" border="SIZE px" alt="Description">
img src is the image source, so insert the URL link of the image here. Then if you want to add a border insert a number or enter 0 for none. The alt is the description of the image, it is how it is found in search results, make it relevant to the image and the post. To read more about search engines & images read this SEO tutorial and check out the entire SEO series to learn how to increase traffic to your blog or website. Now say we want to add the size of the image and align it to sit where we want.
 <img src="IMAGE URL" align="left/right/center" width="SIZE px" height="SIZE px" border="SIZE px" alt="Description">

Insert a link
<a href="URL LINK"> ANCHOR TEXT/ TEXT DISPLAYED/ DESCRIPTION</a>

The <a> tag defines a hyperlink (link to something), the href describes WHERE the link is. If you want the link to open in a new tab/window add the following target="_black" to the a href tag like so...
<a href="URL LINK" target="_black" > ANCHOR TEXT/ TEXT DISPLAYED/ DESCRIPTION</a>

To style links you use the following selectors in this order 
  • a:link (the link itself) 
  • a:visited (the link once clicked)
  • a:hover (the link when mouse rolls over it)
  • a:active (current selected link)

 Don't forget the structure selector { property: value; }

How to Align or Center Something
<center> THE THING YOU WANT CENTRED </center>
Simply wrap the center tag around what you want to be aligned in the center, or in the css use the following to align your html element.

 selector { text align: left/right/center/justify; }

 selector { float: left/right/justify; }

Some Text Tags
<b> BOLD TEXT </b> OR <strong> BOLD TEXT </strong>
<i> ITALIC TEXT </i> OR <em> ITALIC TEXT </em>
<u> UNDERLINED TEXT </u>
<p> PARAGRAPH TEXT </p>

 Creating Lists
<ol> ORDERED LIST </ol>
<ul> UNORDERED BULLET POINT LIST</ul>
<ul type="circle"> UNORDER BULLET POINT CIRCLE LIST</ul>
<li> SPECIFY EACH ELEMENT AS A SUBCATEGORY OF OL or UL</li>
How to write it & an example of how it appears:
<ol>Ordered List <li> Point 1</li> <li> Point 2</li> <li> Point 3....</li> </ol>
<ul>Unordered List<li> Point 1</li> <li> Point 2</li> <li> Point 3....</li> </ul>
    Ordered List
  1. Point 1
  2. Point 2
  3. Point 3....
    Unordered List
  • Point 1
  • Point 2
  • Point 3...

 Create a Table

<table>
<tr>
<td> AAAA </td>
<td> BBBB</td>
</tr>
</table>
tr relates to the row while td relates to the cell within the row. Notice how when I open a tag, I close it. The above gives me the following result, which you can customise using the CSS Selectors I've highlighted in green (table, tr, td) remember selector { property: value; }
 
AAAA
BBBB
 

Horizontal Line Dividers

An example can be seen between this post, a simply line under each section to break up the post. To create this you simply write 
<hr>
To edit it a little more, lets add a width, size and colour. I'll show you an example below.
<hr width="100" size="5" color="purple"> 


Borders 

 selector { property: value; }

 Starting with property, you can choose from border/ border-left/ border-right/ border-top/ border-bottom/ border-color/ border-style/ border-width & border-radius. Then enter the value. You can group values together for one selector.

 Instead of
selector { border-width: 5px; border-style: solid; border-color: red}
You can write this instead

 selector { border: 5px solid red; }

 Different border-style values include solid/ dashed/ dotted/ groove/ ridge/ inset/ outset. These will all create a different type of border which you can choose the width of the line & the colour. To add a circular edge use the border-radius property

 selector { border: 5px solid red; 
              border-radius: 20px; }

 Its the same as adding rounded edges to images which I have a tutorial on here. This is how I created the curve on my heading, like so
Example of border & radius


Blockqoute
<blockquote> Text you want </blockquote>

 This appears as a quote symbol in your edit post menu. You can then edit this in the css using blockquote { property: value; } Here is an example of mine and how I styled it.
Here is an example of a block quote on MisseDesign
Posted in: , , , |