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
You need to write CSS as below :
Let's explore each of the CSS properties that we need to style text.
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
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
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
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
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
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
The text-decoration property specifies the decoration added to text.CSS code - text-decoration: underline;Values: none | underline | overline | line-through | initial | inherit
CSS code - text-align: center;Values: left | right | center | justify | initial | inherit
CSS code - line-height: 1.5em;Values: numeric in em or px
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.
I 'd love to hear about what you'd like to learn about creating your own websites or developing websites for others?