Styling with #CSS – Part 2 #WebDevelopment

Posted October 11, 2016 by Kayla in Coding, Design, Wordpress / 0 Comments

Tags:

starting-with-wordpress_-css-2-1In the previous post, I talked about understanding HTML tags [CSS Selectors] and what CSS could do for your website.

In this post, I want to talk about how you actually go about editing your CSS.

Your options are:

  1. Edit an existing style sheet – this option can be used for all websites even those not managed by WordPress.
  2. Using a style sheet plugin – this option is specific to a content management system that allows it.
  3. Using a plugin – this option is similar to option 2 but coding is normally not required.

Now you might be wondering why I separated a style sheet plugin from plugins in general. That’s because a style sheet plugin allows you to manually type your CSS code, while other plugins might let you use tools to implement these CSS styles.

This article is mostly applicable to options 1 and 2.

Getting Started

You’ll need access to either your FTP [for non-WP and WP users alike], or you can edit in your dashboard [WP users].

Option 1 – Edit Existing Style Sheet

If you choose option 1 you have 2 ways to edit this file.

Edit using FTP client like FileZilla

This is basically a file explorer that shows you the files on your computer and on your website. It allows you to copy files from your site to your computer and your computer to your site. You should exercise caution when using this option since you can break your site. Rule of thumb is to back up your site or the file you want to change, before you upload edited file.

The general process looks something like this:

  1. Get your FTP account information from your host provider.
  2. Download and Install your FTP client.
  3. Sign in to FTP.
  4. Navigate to the folder on your site where your style sheet is located. [for WordPress this is in the WP-Themes folder and then in a folder with your theme name]
  5. Copy over the file you want to edit. [your CSS file ends in .css and is normally named “style.css”]
  6. You can then make a copy of that file for back-up.
  7. In your file explorer/manager [not the FTP], open the file, edit your CSS and save.
  8. Copy the edited file back over to your site files.
  9. View your changes on your site.

We’ll get into the editing in a bit.

Editing in WP Dashboard
  1. Hover over Appearance in the menu.
  2. Navigate to “Editor” from the sub-menu.
  3. This will show you a text editor and a list of some files in your theme.
  4. Click on the one named “Stylesheet” or something to that effect.
  5. Edit your code.
  6. Click Save.
  7. View your changes on your site.
Option 2 – Using a style sheet Plugin

If you opt to use a style sheet plugin, the general process is something like this:

  1. From main menu in WP Dashboard, hover over Plugins, go to Add New and click it. [Jetpack has a Custom CSS style sheet built-in which you can activate.]
  2. Find a plugin by searching the repository.
  3. Install it.
  4. Activate it.
  5. From Dashboard menu, hover over Appearance and you should see something indicating CSS editing or customisation, click that.
  6. Edit your CSS.
  7. Save.
  8. View your changes on your site.

Crafting your Code

Now that we have a general idea of what to do, we need to take what we have already learnt and apply that here.

We first need to identify the html tags, classes or IDs that we would like to change. All of these are called CSS Selectors.

Then we need to start crafting our code to edit the look. Here are some things to consider.

  1. If you are editing your style sheet on your computer you will need to open the file in a text editor like notepad [NOT Word]. I personally use Notepad++ which is free but it changes the colour of your code so you can better see what you’re doing.
  2. There are various CSS elements you can reference to edit your code. The most popular ones would include, font-family, font-size, color, background-color. To change any of these you would type them on a new line, type a colon, and then add your instructions and close with a semi-colon.
  3. If editing the actual style sheet, try searching for the code and editing it.
  4. Use Classes and ID when you only want to change one particular html element/tag.

An example of some CSS code for the H4 element:

h4{
   font-family:san-serif;
   font-size:16px;
   color:white;
   background-color:black;
}

Let’s talk about the above code.

It’s telling the browser that the font to use for all h4 elements is “san-serif”. If you were to import your own fonts [that’s another topic I’m not going to cover today], you would have to wrap those font names in quotes. You’d also want to use a fallback font in case your first choice cannot be loaded. For example:

font-family:'Arial',san-serif;

This tells the browser to use Arial, but if it can’t find it to use san-serif. San-serif is a more generic font family that can be read by all browsers.

The code goes on to define that the font size is 16px. px allows you to make smaller variances in size. You can also use em. 1em=16px and you can use em in decimals. Example: if you want 40px, you could use 2.5em. Using em, on text, allows users to change the text size in their browsers.

font-size:1em;

And lastly, the code is setting a background colour for the header and changing the font colour.

For colours you can use standard colours like: black, white, pink, blue, green, etc. However you might probably not want to stick to those colours and you’re free to use hex colours, like so:

color:#F5F5F5;

Also, notice that there are no spaces in a line of code. If you don’t end your line of code with a semi-colon, the browser will ignore what you have on the next line.

Other CSS Attributes

There are many attributes you can use to change the style of your website. Here are some that I use often. These ones are indented to get you started with basic changes.

CSS Attributes Available Options Examples
width & height: These tell the browser how wide or tall an element is. i.e., within their contain. Use percentage to make the element take up a certain percentage of the containing element. Let’s say that you have a div with two spans nested. You can make the first span be 75% wide and the other 25%.

You can also specify a width and height by px or em.

 width:75%;
 width:300px;
 height:20em;
display: used to set how elements are displayed. block – makes the element take up the full with of the parent element [like a square or rectangle]

inline – makes element able to sit right next to another adjacent element.

inline-block – a combination of the first two, sometimes inline makes the elements seem jumbled. Inline-block makes it inline but also makes it squared.

none – hides the element.

 display:inline-block;
 display:none;
 float: used to make an element move left or right. Let’s go back to the example I used for width. I have 2 spans inside a div. I make span #1 – 75% wide and span #2 – 25% wide. I can now add a float to each to make one go left and the other right.

An example of how this would look is a website with a sidebar. The main content is floated one direction and the sidebar is floated the other way but if both elements are 100% they will sit on one on top of the other.

 span.no-1 {
   width:75%;
   float:left;
 }
 span.no-2 {
   width:25%;
   float:right;
 }
text-decoration: used to add or remove the underline from a link. none

underline

 text-decoration:none;
list-style-type: used to add or remove the type of style for lists. circle

square

upper-roman

lower-alpha, etc

 list-style-type: none;
margin: the margin is the white space between the element and the boundary of the parent element. You can set a defined margin using px or em, or you can set it to auto.

Let say the element is 75% and you want the margin to be equal on the right and left sides. You can use auto to do that.

You can also select only the top, bottom, right or left margin by appending a dash and the margin name.

 margin:10px;
 margin:auto;
 margin-top:.25em;
padding: the area around the element contents that is between the contents and the margin.  You can use this padding to create a button look for a link, or use it to add some space around a header so that the background is wider or higher than the header’s words.

An example of this would be my “Continue Reading” Button. This is actually a link which I added a background colour to and then added some padding.

 a {
     padding:10px;     
     background-color:hotpink;
 }
border: adds a border around a element You can sent the thickness of the border, the type and also the color.

You can also access a specific border by appending a dash and the border name.

 border-bottom:1px solid #CCC;
border-radius: this gives a curve on the corners of an element. If want the corners of your element to be rounded, add a border-radius. The bigger the radius, the more rounded the corners.
 border-radius:5px;
text-align: used to horizontally align text.  You can move your text left, right or centre it.
 text-align:center;
vertical-align: used to vertically align an element. If you have an element you want to centre from the top, use vertical align.
 vertical-align:middle;

Of course, like I said, there are so many more attributes that you can change. I’d urge you to do an internet search on how to do specific things you want to do.

Using another plugin

If you want to edit only the text on your site, like using Google Fonts and changing the style or weight or size of the fonts, you can use a plugin like “Easy Google Fonts”. These types of plugins usually use their own customisation tools to edit elements in a way that doesn’t let you use CSS coding. However you will still need to have an understanding of the HTML elements in order to choose the ones you want to edit.

I can’t cover all of those here, but I found them pretty easy to use before I got around to editing my CSS manually. Plus, most developers have documentation to explain how to use their plugins.

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

Leave a Reply