There are many steps in starting a blog.
You have to first find a niche, then register a domain, then install WordPress and build out the look, feel, and functionality of the blog after that.
While there are themes that allow for quick and easy building, there will come a time when you want to customize how your blog looks. That’s where CSS comes in.
A CSS (cascading style sheet) can be a lifesaver once you learn how to master the code.
It is a coding type that lets you style elements of your HTML pages by applying classes to it.
To put it as simply as possible, HTML creates the pages and content, and CSS takes care of the presentation of those pages and determines how things are displayed or look.
When I was first learning CSS it was a little overwhelming to me because there are just so many things you can do with it.
Throughout the CSS tutorials on this site, I will try to take it slow and not fly over your head.
Getting Started With CSS
Before I dive right into the tutorials, there are some things to explain.
Mainly, there are two types of CSS methods… Internal and External style sheets.
An internal style sheet just means that any styles you create will be coded right into the HTML of a particular page, in between the <head> and </head> tags.
External means that all of your styles are contained within one single .css file on your server.
It is recommended to use external style sheets to save on your site’s loading time.
Plus, it’s much more convenient to just have everything in one place.
Example of an internal CSS on an HTML page:
<html>
<head>
<style>
p { color:#000000}
</style>
</head>
</html>
Example of an external CSS on an HTML page:
<html>
<head>
<link rel=”stylesheet” href=”style.css”>
</head>
</html>
If you are a Blogger user, Blogger uses internal style sheets, although they have one designated area in the Template Editor for all of your CSS work which is all tied in with your entire template, so it’s sort of like an external CSS in that you don’t have to worry about where to place it.
You also type your code as though it is inside of an external file, not an internal one (i.e. without the <style> tags).
WordPress uses external style sheets, which can be found in your theme’s folder on your server as a separate .css file.
To add an external style sheet file to your HTML page, you will simply add a “link rel” tag to the header section of your HTML file as shown above.
The “href” is the link to your style sheet in the proper theme’s directory.
Selectors and all of that good stuff
A CSS file is made up of selectors, values, and properties.
A selector is the name of the element you want to style in relation to the HTML code.
For example, if we wanted to style the <p> (paragraph) tag, our selector would be “p”.
The Properties of your style are always displayed inside curly brackets, much like HTML uses greater than and less than symbols to contain code (< and >), CSS uses curly brackets { and }.
The Value is what you give to the property to tell it what to do.
Let’s look at the example below using the paragraph selector:
p {
color:#000000;
}
“p” being our selector (the paragraph tag), with a curly bracket telling the CSS property to begin. “color” is our property followed by a colon.
In this example, I’m telling my CSS that I want the color of the text in the paragraph to be changed.
The value is “#000000” which is a hex code for the colour black.
You could also just type “black” but using hex codes is something you should get used to.
The semi-colon at the end of the line separates the properties, so if we wanted to add more properties to the same selector, we would do so like this:
p {
color:#000000;
font-size:16px;
}
So now, when your HTML file reads the CSS file you linked in the header of it, all paragraphs “p” will have a text color of black and a font size of 16px.
Creating an external CSS file
To create an external CSS file, all you need to do is create a blank document in a program like Notepad or another text editor that has no formatting options, and save it as a .css file.
You can name your file whatever you like, such as style.css or newstyle.css.
Inside this single document will be where all of your coding is contained.
Selectors Explained
Basic CSS selectors contain all of your standard HTML tags that can easily be styled, such as:
body
p (paragraphs)
h1, h2, h3, h4, h5, h6 (heading text)
a (links)
ul and li (lists)
div
strong
em
span
These are called Type Selectors because they correspond with specific HTML elements.
You can also create custom IDs to style a particular part of your CSS code and to give that part specific values.
These are called ID Selectors and look like this:
#hello {
font-size:24px;
}
The pound sign means we are summoning a particular ID from within your HTML, in this case we have named it “hello”. Your HTML code may look something like: <div id=”hello”>.
I will cover more of this as well as specific tutorials in other posts so you can learn exactly how to work with IDs and how to create them in your HTML coding.
The third type of selector is called a Class Selector.
Class selectors are very similar to ID selectors, but as ID selectors should only be applied to single element, the class selector can be applied to any number of elements.
The class selector works by placing a period in front of the selector name instead of a pound sign.
Like this:
.hellothere {
font-size:38px;
color:#CCCCCC;
}
So now you should have a basic understanding of different aspects of a CSS.
To recap:
– A CSS or Style Sheet is used for styling different elements of an HTML page
– There are Internal and External methods for creating a CSS
– A CSS is made up of selectors, properties, and values
– There are different types of selectors which call on different elements of your HTML page
I hope you enjoyed this beginner lesson, and as always feedback is welcome below!
