How To Style Text Using CSS For Your Blog

In order to style the text on your website, you will need to write CSS code for each text property. These properties can be anything from size, color, text-case, thickness of the text etc. Let's explore each of the CSS properties that we need to style text. Click to learn more >>

I love coding websites and I love teaching how to do it. If you are wondering what CSS is, you can read all about the basics of CSS here. CSS stands for Cascading style sheets and if you are into web development, you need to know how CSS works in order to control the appearance of your website. Today, I am excited to share the basics of manipulating the appearance of text on your website using CSS with you.In order to style the text on your website, you will need to write CSS code for each text property. These properties can be anything from size, color, text-case, thickness of the text etc.To style a piece of text to look like this

In order to style the text on your website, you will need to write CSS code for each text property. These properties can be anything from size, color, text-case, thickness of the text etc. Let's explore each of the CSS properties that we need to style text. Click to learn more >>

You need to write CSS as below :

How to Style Text Using CSS

Let's explore each of the CSS properties that we need to style text.

Font Family:

The font family property sets the font for the text. You can find fonts to use on your website on Google Fonts, Typekit and many other free font foundries online.CSS code - font-family: Futura, 'sans-serif';Values: font | initial | inherit

In order to style the text on your website, you will need to write CSS code for each text property. These properties can be anything from size, color, text-case, thickness of the text etc. Let's explore each of the CSS properties that we need to style text. Click to learn more >>

Font Size:

The font size property sets the size of the text. You can use different text sizes throughout the website to emphasize and highlight the information in the text.CSS code - font-size: 20px;Values:numeric in em or px

In order to style the text on your website, you will need to write CSS code for each text property. These properties can be anything from size, color, text-case, thickness of the text etc. Let's explore each of the CSS properties that we need to style text. Click to learn more >>

Font Weight:

The font weight property sets the weight of the font. A lighter font is less bold and thinner as compared to a heavier font. Font weight is usually specified in numbers like 100, 200, 500 etc. or by terms like normal, light, bold etc.CSS code - font-weight: 700;Values: numeric in em or px

In order to style the text on your website, you will need to write CSS code for each text property. These properties can be anything from size, color, text-case, thickness of the text etc. Let's explore each of the CSS properties that we need to style text. Click to learn more >>

Font Style:

The font style property sets the style of the text. It can be normal, italic or you can set it to none for no style.CSS code - font-style: italic;Values: normal | italic | oblique | initial | inherit

In order to style the text on your website, you will need to write CSS code for each text property. These properties can be anything from size, color, text-case, thickness of the text etc. Let's explore each of the CSS properties that we need to style text. Click to learn more >>

Letter spacing:

The letter-spacing property increases or decreases the space between the characters in the text. I have seen how changing the letter spacing in a text can make an otherwise ‘blah’ font look exotic!CSS code - letter-spacing: 3px;Values: numeric in em or px

In order to style the text on your website, you will need to write CSS code for each text property. These properties can be anything from size, color, text-case, thickness of the text etc. Let's explore each of the CSS properties that we need to style text. Click to learn more >>

Text transform:

This property essentially controls the case or capitalization of the text. I have seen how changing the letter spacing in a text can make an otherwise ‘blah’ font look exotic!CSS code - text-transform: uppercase;Values: none | capitalize | uppercase | lowercase | initial | inherit

In order to style the text on your website, you will need to write CSS code for each text property. These properties can be anything from size, color, text-case, thickness of the text etc. Let's explore each of the CSS properties that we need to style text. Click to learn more >>

Text decoration:

The text-decoration property specifies the decoration added to text.CSS code - text-decoration: underline;Values: none | underline | overline | line-through | initial | inherit

In order to style the text on your website, you will need to write CSS code for each text property. These properties can be anything from size, color, text-case, thickness of the text etc. Let's explore each of the CSS properties that we need to style text. Click to learn more >>

Text align:

CSS code - text-align: center;Values: left | right | center | justify | initial | inherit

In order to style the text on your website, you will need to write CSS code for each text property. These properties can be anything from size, color, text-case, thickness of the text etc. Let's explore each of the CSS properties that we need to style text. Click to learn more >>

Line height:

CSS code - line-height: 1.5em;Values: numeric in em or px

In order to style the text on your website, you will need to write CSS code for each text property. These properties can be anything from size, color, text-case, thickness of the text etc. Let's explore each of the CSS properties that we need to style text. Click to learn more >>

Color:

CSS code - color: #433394;Values: RGB alpha-numeric hex codesI hope this post was useful in understanding the basics of CSS to style text on your website. I will be sharing more CSS and HTML tips to help you design your website, stay tuned.

In order to style the text on your website, you will need to write CSS code for each text property. These properties can be anything from size, color, text-case, thickness of the text etc. Let's explore each of the CSS properties that we need to style text. Click to learn more >>

Now its your turn

I 'd love to hear about what you'd like to learn about creating your own websites or developing websites for others?

What are some of the things you want to learn to do with CSS? Leave me a comment!

Explore