Blogger’s Guide To HTML and CSS
Fortunately today we have WordPress and the Visual Editor so you no longer need to know a lot of HTML and CSS to format your content. However, as a blogger at some point you are going to run into a situation where you need to know some HTML and CSS.
In this post I will introduce you to HTML and CSS and also some of the most basic codes and techniques for using it.
The Difference Between HTML and CSS
HTML stands for Hyper Text Markup Language. The HTML tells the browser what to display, it is the content and structure.
CSS stands for Cascading Stylesheet. CSS tells the browser to to style what is displayed, it determines the appearance of things.
Understanding HTML
Before we get into learning some HTML, I want to give you a quick intro on some terminology and structure. This will help you follow along later as we get into some of the basic HTML tags.
In every piece of HTML code, there will be an open and closing tag. The opening tag will start will a left angle bracket, followed by some letters identifying what type of tag it is, then followed by a right angle bracket.
The closing tag comes at the end and looks almost the same but has a / before the characters identifying the type of tag.
Here is a visual breakdown
What Goes In Between The Tags?
You place your object or text between the opening and closing tags. The opening and closing tags surround the “elements” they are modifying.
In the case above the phrase, “My name is Steven”, is being modified by the <strong> tags and will result in the text being bolded.
Where Is HTML Written?
HTML would be typed into the WordPress Text tab when creating a blog post or page.
What HTML Should A Blogger Be Familiar With?
As a blogger, it would be good for you to be familiar with a few of these basic HTML codes.
Headings
^ See that above? That is a heading.
Headings help to not only break up the text in a blog post and help make it more readable, but they are also used by the search engines to help determine exactly what your content is about. Headings are great for improving your SEO.
Below are the different heading tags, you simply add your own heading text between the opening and closing tags.
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
And here is what they look like when displayed.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
The actual size and style of the headings will be determined by CSS, which we will cover in just a bit.
Hyperlinks
Learning a link’s syntax and how to code one is something every blogger should learn and understand.
The basic syntax for a hyperlink is
<a href="https://stevenstromick.com">Check Out My Blog Here</a>
and it looks something like this in a post
Check Out My Blog Here
You can further customize a link by using attributes…
href=”url” – replace url with the url of the page you would your link to link to or use the syntax href=”mailto:emailaddres@example.com” to link to an email address.
target=”_blank” – forces the link to open in a new browser window.
title=”…” – adds a title to the link that would appear when the link is hovered over.
Images
The image tag is used for displaying images and look like this
<img src="https://..." alt="New York City" width="100%" height="--" />
This code would display an image like so
src=”…” – This defines the URL of the image, it can be a jpeg, png or gif file type.
alt=”…” – This is a text description of the image, this will appear when someone has images turned off or the image isn’t available. This is an important field for SEO as the search engines use it to tell what the image represents and relate it to your content.
width=”…” – An attribute that can be used to change the width of an image. The width can be expressed in pixels or in percentages.
For example, if you wanted to reduce an image to 50% its size then you would specify a width=”50%”. Height can also be specified or left as height=”–” is you want the image to resize proportionally based on the width.
Linking An Image
To make an image a clickable link, simple wrap the image code with a link, like so…
<a href="..."><img src="https://stevenstromick.com/img1" alt="New York City" width="100%" height="--" /></a>
List’s
Lists are another great way to break up your content and make it more readable. There are ordered lists and unordered lists.
Unordered list are built like this
<ul> <li>example</li> <li>example</li> <li>example</li> </ul>
And look like this
- example
- example
- example
Ordered list are built like this
<ol> <li>example</li> <li>example</li> <li>example</li> </ol>
And look like this
- example
- example
- example
Basic Text Styling
For bold text
<strong>For bold text</strong>
For underlined text
<span style="text-decoration: underline;">For underlined text</span>
For emphasis (italicized) text
<em>For emphasis (italicized) text</em>
For strikethrough text
<del>For strikethrough text</del>
Basic Text Formatting
A basic paragraph
<p>A basic paragraph.</p>
To start a new line within the same paragraph
<br>
So you would use it like this:
<p>This will be on line one.<br>This will be on line 2</p>
To center text
<center>text to be centered</center>
What Is CSS
CSS stands for Cascading Style Sheet. Where HTML defines the content and structure of a web page, CSS controls how the HTML actually appears on a page.
You can use CSS to change the font, style, color, and size of text; margins, paddings, background colors and borders.. You can also use CSS to adjust positioning of elements.
In short you can use CSS to radically change the appearance of a page without ever changing the HTML.
How CSS is Applied
CSS gets applied to a HTML element when a style has been declared for that element.
The basic syntax of a style declaration is as follows:
selector {
property: value;
}
Let’s take a look at these different pieces and see how they work.
Selector
Selectors can either be:
An element like h3 – In HTML this would be written like <h3>…</h3>, in CSS you would target this as h3
A class .red – In HTML this would be written like <span class=”red”>…</span>, in CSS you would target this as .red (in css all classes are prefixed by .)
An id #intro – In HTML this would be written like <p id=”intro”>…</p>, in CSS you would target this as #intro (in css all id’s are prefixed by #)
Property
Properties and their respective values are always surrounded with curly braces:
p {
}
Properties are predefined terms that all web browsers understand. They are things like: font-family, font-size, color, etc. A property is always followed by a colon (:)
p {
font-family:
font-size:
color:
}
Value
The value is the particular style or variable you assign to a property. A value is always followed by a semi-colon (;)
For example:
p {
font-family: Arial;
font-size: 18px;
color: black;
}
So What Is This Actually Doing?
The CSS above is telling the browser that for any element surrounded by the <p> that it should be rendered as an Arial font, with a size of 18px and a color of black.
Here is another example:
h1 {
color: #cc000;
font-weight: bold;
text-decoration: underline;
}
Here any <h1> elements will be displayed as the color have a hex value of #cc0000, the font will be bold and the text underlined.
So, earlier you learned how to bold and underline text with HTML, above is a way you can do it with CSS.
Some Basic CSS Properties and Examples
color: #000000; – changes text colour, you can use names of colors, hex codes (used in the example), or rgb codes
letter-spacing: 2px; – changes letter spacing
text-transform: uppercase; – changes text casing (uppercase, lowercase, capitalize)
background-color: #ffffff; – changes background color to white
border: 2px solid #eeeeee; – adds a light gray border that is 2px thick.
width: 400px; – changes width
height: 200px; – changes height
opacity: 0.8; – changes the opacity to 80%, 1 is 100%, 0 is completely transparent
margin: 10px; – adds a margin around elements
padding: 20px; – adds padding around elements
A note about margin and padding. Margin and padding apply to all side of a block elelment. So if you say margin: 20px;, that would add a margin of 20px to all sides of an element.
If you want different margin values around an element you would specify the margin for each side like this: margin: 20px 5px 20px 5px;.. It is written in clockwise order, starting from top – top, right, bottom, left; or, top/bottom, right/left.
How To Use HTML and CSS Together
Alright, let’s take a look at a couple of examples to get a better idea on how to use HTML and CSS together.
Example #1 – Make a Button Link
First the HTML
<a href="https://stevenstromick.com/book" class="my-button">Book Now</a>
Without CSS, it looks like this.
Now let’s add a little CSS…
.my-button {
display: inline-block;
font-size: 14px !important;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
background: #494949;
color: #fff;
cursor: pointer;
padding: 12px 20px;
overflow: auto;
width: auto;
}
Now the hyperlink looks more like a button.
Now let’s use some more CSS to change the color when we hover our mouse over the button. The :hover make this style only apply when the mouse is hovering over the button.
.my-button:hover {
background: #e8b0b4;
}
Example #2 – Style a Heading
First the HTML
<h3>This Is A Heading</h3>
Without CSS, it looks like this.
This Is A Heading
Now let’s add a little CSS…
<h3 class="h3-heading">This Is A Heading</h3>
.h3-heading {
font-size: 28px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: #bbcc33;
border-bottom: 5px solid #bbcc33;
}
And now it looks like this
This Is A Heading
Example #3 – Style a List
For this example, we are going to discuss nested HTML elements. HTML elements can be nested, like in a list.
<ul> <li>item number one</li> <li>item number two</li> <li>item number three</li> </ul>
Now let’s pretend we want to bold every item in the list, we could use the following CSS to do that
li {
font-style: italics;
}
But our site may have a lot of pages with lists, if we only want to do this for a list on a particular page then we would need to do something like this.
<ul> <li class="slant">item number one</li> <li class="slant">item number two</li> <li class="slant">item number three</li> </ul>
With the CSS of
.slant {
font-style: italics;
}
But if our list has a lot of list items then it becomes very cumbersome to have to add this class to every item. We can simplify things by adding the class to the <ul> (instead of the <li>) but within the CSS specify the <li> as the target.
Here is what the HTML would look like
<ul class="slant"> <li>item number one</li> <li>item number two</li> <li>item number three</li> </ul>
And the CSS would look like this
.slant li {
font-style: italics;
}
Do you see what is happening here? I added the class to the <ul> so I only had to add it in one place and with the CSS I am saying whenever the .slant class is used then the <li> elements should be italicized. This is a way to target a nested HTML element with CSS.
Questions
So what do you think? Was this helpful? Was it easy to understand and follow? Comment below and share your thoughts or any remaining questions you may have.