HTML/CSS Tips and Tricks

HTML/CSS Tips and Tricks

If there is something that a lot of bloggers need help with - its coding. So I've assembled a few quick and easy tips, tricks, and a few resources so that when you look at some simple code you can get the gist of what's going on.

Quick Code Tips

What Does it do?	HTML Code	Results
Creates a link	<a href="Your Link Here">Your Text</a>	Your Link Here
Embeds an Image with a height & width of 100px	<img src="Image Direct Link Here" width="100" height="100" alt="Short img desc">
Object Alignment	<p align="left/center/right">Your Text/Image Here</p>	Left Center Right
Blockquote (short)	<q>Short quote here</q>	Short quote here
Blockquote (long)	<blockquote>This version of a blockquote is used for longer quotes. Usually about a paragraph long.</blockquote>	This version of a blockquote is used for longer quotes. Usually about a paragraph long.

Can't get that text/image/object to align the right way? Use the object alignment.

(ps: pick whether you want it aligned left, center, or right. All three won't work up there.)

A <br> is a line break. It is used to jump to the next line in a paragraph. (in XHTML its written <br />)

A <p> defines a paragraph. By defining a paragraph it basically adds some space before and after each element.

Simple Font Formats:

What does it do?	HTML Code	Results
Bold	<b>Hello Wench</b>	Hello Wench
Bold	<strong>Hello Wench</strong>	Hello Wench
Italic	<i>Hello Wench</i>	Hello Wench
Underline	<u>Hello Wench</u>	Hello Wench
Strikethrough	<strike>Hello Wench</strike>	Hello Wench

Premade Code

Make an Image Link

<a href="Your Link here"><img src="Image Direct Link here" width="100" height="100" alt="Short Img Description"></a>

5 Social media icon codes 

(defaulted to center, with a height and width of 50px)

<center> <a href="Your link here"> <img src="Image Direct Link here" height="50" width="50" /></a><br /> <a href="Your link here"> <img src="Image Direct Link Here" height="50" width="50" /></a><br /> <a href="Your link here"> <img src="Image Direct Link Here" height="50" width="50" /></a><br /> <a href="Your link here"> <img src="Image Direct Link Here" height="50" width="50"/></a><br /> <a href="mailto:Email address here"><img src="Image Direct Link Here" height="50" weight="50" /></a><br /> </center>

4 links - 1 email

Remove the border and drop shadow from images in Blogger

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,<br /> .BlogList .item-thumbnail img {<br /> padding: 0 !important;<br /> border: none !important;<br /> background: none !important;<br /> -moz-box-shadow: 0px 0px 0px transparent !important;<br /> -webkit-box-shadow: 0px 0px 0px transparent !important;<br /> box-shadow: 0px 0px 0px transparent !important;<br /> }<br />
To apply this code: Go to Blogger » Template » Customize » Advanced » Add CSS » Paste

Resources

Hex Color Codes: http://www.color-hex.com/
Photo Editors: Hello Wench Photo Editor Archive
Actual HTML/CSS Tutorial: W3Schools
(and a great way to learn the basics for different languages, not just HTML/CSS)

Got any questions? Feel free to leave a comment! I'll help you in any way I can. :)

Stalk me?

Twitter & Bloglovin & Facebook & Instagram & Tumblr