Did you know that when you format your text in WordPress you may be adding or changing the CSS in your page? CSS stands for Cascading Style Sheets. CSS is used to help shape a websites visible features and aesthetic components. Paired with HTML, CSS can do many different things like MAKE YOUR TEXT BOLD, ALL CAPS, AND COLORED.
Coloring
The main feature people associate CSS with is color. Within CSS there are 2 ways to idenfiy what color you would like the text to appear. One of the ways is through the color name (example : red). The other option is through using the HEX code (example : #ff0000).
HEX Codes
The word HEX is short for hexidecimal. Instead of using the basic 10 base, HEX codes have a base of 16. This is formated from 0 through 9, and A through F. This allows the codes to cover more numbers in less space.
To use color in CSS, you start the comand with <span style=”color: “> and either insert the HEX code or name of the color after the colon. Then to end the color, simply add </span>. If you’d like to make your life a little easier and wanted all your headings to be the same color, you simply have to write h2 {color: COLOR HERE;}. This will then change all your heading 2’s the same color easily. The same apply’s for paragraphs, lists, etc.
Text Formating and Structure
One thing CSS can do for you is change the different ways your text appears on your webpage. This can be from making your text all underlined, or making your text all bold, or even BOTH AND ALL UPPERCASE! The write this in CSS, there are different starting comands that go with each change.
Assigning Classes
Assigning classes is one very helpful way that HTML and CSS communicate to each other. This allows you to easily change certain information aestheitcally without messing up anything with the HTML. To set up a class, select what you want to change, and start the command by typing <span class=”WORD HERE”>. You can say whatever in between the quotations, but keeping it simple is the best and easiest way to keep track. For the following examples, we will use the word APPLE. End the command my simply typing </span>. Congrats! You just set up a class that we can easily change.
ALL CAPS
To change part of your text you assigned to a class to all caps, you simply start by typing .apple{text-transform: uppercase;}. When this command is written in CSS, any word(s) you assigned the class apple to will change to be all uppercase.
BOLD
To change part of your text you assigned to a class to bold, you simply start by typing .apple{font-weight: bold;}. When this command is written in CSS, any word(s) you assigned the class apple to will change to be all bolded.
UNDERLINE
To change part of your text you assigned to a class to be underlined, you simply start by typing .apple{text-decoration: underline;}. When this command is written in CSS, any word(s) you assigned the class apple to will change to be underlined.
If youd like to apply mutliple of these affects to a class (like we did for the word apple previously) you simply just has to add all information into one line of code like this! .apple{color: #339966; text-transform: uppercase; font-weight: bold; text-decoration: underline;}.
Images
Images also play a big role in ways you can make your website look aesthetic with CSS. To insert a background image with CSS you simply need to type the following
{background-image: url(“URL HERE”);}
