Styling with #CSS – Part 1 #WebDevelopment

Posted September 27, 2016 by Kayla in Coding, Wordpress / 0 Comments

Tags:

 

starting-with-wordpress_-css-1The information in this post is relevant even if you aren’t using WordPress as long as you have access to editing CSS.

So, you see those pretty colours on your website? Or how your menu has that line underneath? Do you know how your website knows to bold or underline a certain text? Or even which font you want to use? All of that is controlled by a CSS style sheet which comes with every theme.

HTML will display words and bullet points but it will be as plain as if you had opened a word processor and typed but didn’t change the font or colours.

With CSS you can add style to your website by centring text, bolding, adding borders, backgrounds over even some animations.

Most themes may allow you basic control over a few colours but they often limit you because they’d want you to buy their “premium” version. It’s all good to buy the premium version for a functioning, profitable business, but sometimes you might not be able to afford one. That’s no reason to settle if you’re willing to learn a little.

Truly you don’t need to learn every bit of CSS coding but you do need to understand HTML tags. For instance, you’ll notice that all the headers for your posts have a certain look. That’s because they are all tagged the same and then CSS is used to apply a look to those tags.

Basics

Pretty much every text will be tagged as either one of these tags. A tag must have a start and an end. This tells the browser what information should be formatted as a particular tag. A tag may look like this: <h1> and end with h1>.

Not all web developers may follow these exact options. This should be used as a guide to understand how the tags are used.

[su_table]

<h1>…</h1> Top level header such as your site name.
<h2>…</h2> Second level header such as the name of your post.
<h3>…</h3> Third level header such as your widget title.
<h4>…</h4> Fourth level header. I use this for my top level headers inside my posts and pages.
<h5>…</h5> Fifth level header. I use this for my second level headers inside my post and pages.
<h6>…</h6> Sixth level header. I use this for my third level headers inside my post and pages.
<p>…</p> This is for paragraphs which is basically normal text in the body of your pages or posts or widgets.
<div>…</div> Used to create a group which can then have it’s own formatting separate from other text around it.
<span>…</span> Used to single out text, usually within a <p> tag, and give it it’s own formatting. e.g., if you want to bold a word in a sentence.
<pre>…</pre> Used to showcase text as code. You’ll see me use it in this posts where ever I should you how code looks.

[/su_table]

Aside from these tags, you can create IDs and Classes, which can then be used to change anything with that ID or class.

For example. Your site name is inside a <h1<h1< span=””>> tag but it’s assigned a class with a name like “site-name”. That way you can add CSS to the “site-name” class to change how your site name looks but not the look of all <h1> tags.

In CSS you assign CSS code to a tag by typing the tag without the

<>

followed by a

{

and then your code, then a

;

at the end of each line of code, followed by a closing

}

At the end it will look something like this:

p {
   font-family: Arial;
}

Classes are referenced by starting with a dot. Like so:

.site-name

and IDs are referenced by starting with a hash tag. Like so:

#site-name

You can also refer to only classes that are inside a certain tag. Tags can contain both a class and an ID. To know whether a tag has a class or ID you will notice that there is other information inside the tag start code. For example:

<h1 class="site-name">

To refer to only site-name classes inside an h1 tag, you can refer to it like so:

h1 .site-name

You can also group together a few tags to specify formatting for a group. Like so:

.site-name, .entry-title

So, now that you know all this, you may still be wondering: How can I tell what the tag or class of something on my website actually is?

Well, your browser makes it pretty easy to figure out. I use either Edge or Chrome and both have an option to click on something and choose “Inspect Element”. Clicking this will show you to code for the page you are on and highlights the code for the section your clicked on.

In Edge, it opens a sub screen to the bottom and shows the HTML code on one side and the CSS on the other. You can the figure out what tags, classes and IDs are being used by looking at the code. The Style section will show you the current CSS that is controlling the section. It may look like this:

inspect-element-css

You can then use the same reference e.g., “.widget-title”, to edit that objects CSS.

Applying CSS

  1. If you have access to your website files, you can edit the your CSS Stylesheet which is normally called “style.css”. If you are using WordPress please use a child theme so you don’t loose your changes when your theme updates.
  2. If you are using WordPress, you can also install a CSS styles sheet editor Plugin. Jetpack brings one that you can enable. If you go this route, you will find the style sheet under Appearances | Edit CSS, or something similar.

You don’t have to do anything else special, just at your code in the style sheet and save it.

There’s a really good site I use to help me figure out the different options I have to change my site: W3Schools

Take note that changing fonts are a little bit trickier but you can use CSS or a plugin. I’ll talk about that in my next post along with some basic CSS script you could use to customise your site. I’ll also give you an alternative plugin to use to change text on your site.

 

Do you want posts like this directly in your inbox? Join my mailing list.

Leave a Reply