Development

The Basics of CSS Text Styling

Confused by CSS? We’ve all been there. The main thing to remember is your not alone, and that everyone went through this when learning the ropes. We’ve created an initial helpful guide to help you grasp the basics

Introduction

What is CSS?

CSS stands for Cascading style sheets. These style sheets are linked to your Html code by inserting a link to them in your Html header. You can name your stylesheet file to whatever you like.
The link would look like this:
<link rel=”stylesheet” href=”css/stylesheet.css” />

How to use it

Say you wanted to make all your titles uppercase.
Hopefully in your Html you’ve already wrapped your titles text in <h1/>, <h2/>, <h3/> etc tags. So in your CSS code you can call them out and make all titles uppercase by using the following code:
h1,h2,h3,h4,h5,h6 {
text-transform: uppercase;
}

This is a great first step to understanding CSS styling. You can call out other common tags in the same way, eg. for a <p/> tag you could apply the same effect using the code:
p {
text-transform: uppercase;
}

How to use CSS on a specific part of code

The next step-up is calling out a specific part of your Html code. So this could be calling out a <div/> tag or a <span/> tag etc. To do this you you must first assign a class to that <div/> or <span/>,in your Html code eg. <div class=”box”/>.

Once you’ve done that you can call out that specific tag in your CSS like this:
.box {
text-transform: uppercase;
}
It’s important to make sure you put a fullstop before whatever you have named your class. However only do this in the CSS code and do not put a fullstop before the class in the HTML.

And that’s all you need to know to get you started. You should now hopefully understand what CSS is and how to use it with your Html code.
Below are a few basic styling you can put in your CSS code to style your Html. Feel free to change the sizes and colors to suit your sites needs and design.

Once you’ve got your head around the basics, check out our other articles on slightly more advanced CSS, explaining styling such as the use of margins and padding to improve your sites layout and how to change and add fonts.

CSS styling examples

  • font-size: 1rem;
  • font-weight: 400;
  • text-transform: uppercase;
  • line-height: 1rem;
  • color: #000;
  • background: #888;
  • padding: 1rem;
  • margin: 1rem;
June 24, 2015  |  07:12:23

Leave a Reply

Your email address will not be published.