There are many ways you can manipulate text with CSS. You can change it’s size, color, alignment, font-family, and decor, just to name a few. Once you know the right CSS syntax, you’ll be able to change the presentation of any text on your website.
So lets get started.
Here is the actual CSS for each of those text changes I just mentioned.
- To change the size of your text, you only need to add a “font-size” command to your CSS with the new font-size declared in pixels, points, centimeters, a property word value, or a percentage.
- To change the color of your text, you only need to add a “color” command to your CSS with the new color directed by word value (aka: blue, red, or yellow), hexadecimal color value, or an RGB color value.
- To change the alignment of your text, you would only need to add a “text-align” command to your CSS with the new text-alignment declared with a direction of either “right”, “left”, “center”, or “justify”.
- To change the font-family of your text, you need-only add a “font-family” command to your CSS with the new font-family declared. (some examples for font-families are: “Tahoma”, “Arial”, and “Times New Roman”.) But you can find a full list simply by viewing your “font-type” options in programs like WORD or any other word-processing software.
- And lastly, to change the text-decoration of your text, you would only need to add a “text-decoration” command to your CSS with the new text decoration declared with any of these options: “underline”, “overline”, “line-through”, “blink”, “inherit”, and “none”.
This is how you could manipulate your text on any page of your site with inline CSS.
If you don’t want to use the “inline CSS” or are confused because you’re used to defining css changes in a different style tag, or completely separate style sheet page. I’ll reveal all of CSS avenues you could use to make these changes on the next 2 slides.
So now, if you don’t want to make “INLINE” CSS changes, some other methods you could use to make the same changes are by using a class, id, or tag identifier within a separate CSS document or a completely separate style tag embedded within the page’s HTML.
Here’s some imagery depicting these avenues. You’ll find that in “Solution 1”, you could use a separate CSS file and reference this in your HTML with the tag. Conversely, in “Solution 2” you could simply embed that same CSS in a