Text: Sizes, Colors & Other Styling
One of the most common things that people want to do with CSS is change the way text is displayed on their site. CSS can be used to easily change text size, colors, fonts, and more. Text SizeTo set the size of text, use the CSS command font-size. The value can be in em, pixels (px) or a percentage (%). Personally, I use pixels and will be using them in examples in this tutorial. However, em is technically the recommend size unit because of problems that can be experienced in older versions of Internet Explorer using pixels. However, the problems aren't entirely avoided by using em (it has to do with resizing text in the browser). Personally, I just prefer the way pixels are handled in browsers. The size unit em is a relational size to the current font size. The default text size in browsers is 16px, so 1em is equal to 16px. Percentages can be used to fix the IE browser issue completely. Simply set a font-size of 100% for the BODY tag and then use the em size unit for other elements. While this works great on sites you design from scratch yourself, WordPress may not be easily customized to work like this unless the theme you are using is already set up this way. In the long run, the majority of your users will get proper text sizes. Only those using very small or very large text sizes in their browsers will experience sizes that may be a bit larger or smaller than intended, but these users are also likely used to this type of thing with websites. Personally, I will try to change the browser text size myself just to make sure the site text looks OK at any setting. As long as this checks out, there isn't much else to worry about. In general, 16px is considered to be a standard font size, so anything above that will be larger text and anything lower will be smaller text. In the example below, I have set an inline CSS style to change the font size of this link:
Note the CSS command, font-size, followed by a colon, then the value (18px) and finally the closing semicolon. Text WeightThe CSS alternative for the HTML tags B or STRONG is the command font-weight. A value of normal is the default value (if this command isn't used at all), and a value of bold will make the text bold just like those previous HTML tags. The example below shows the font-weight command in use:
In the example above, I set the link text to be bold with the font-weight command. However, I also added a SPAN tag inside of the link to make the word 'Plugins' appear as normal text and not bold. This command can also accept other values to created varied amounts of bold text. Set the value to a number between 100 and 900, but only use increments of 100. For example, 700 produces bold text while 400 produces normal text, so you can see that there are levels both above bold text and below normal text that you can use as well as levels in between. Text ColorsTo set the color of text, simply use the command color. The value for this command should be a hex color code, which is a number symbol followed by a series of 6 letters/numbers. To generate a color code, try this site: http://colorpicker.com/ The example code below shows this command being used:
In this example, I have used the color command twice. The first one sets the entire link text as the color red (#FF0000). The second one changes just the word 'Plugins' to the color blue (#0000FF). Font FamilyThe command font-family allows you to change the text font by setting the value of the command to the name of a font family. There are generic font families and specific font families that you can use, and both are typically used together because of the way this command works. This command uses a fallback system that allows you to specify more than one font family name. If the first one is not available in a browser, it will attempt to use the next and so on. Instead of simply giving you a list of individual font names, I wanted to provide you with a more practical solution for font families, so I have put together a list of names that you can use, as-is. Each item in this list includes 2-4 font family names, so you can use the whole line for the value of this command.
I have provided an example of the font-family command below, where I have used one of the lists of font families from above:
Notice how I use single quotes around the font family names that are more than one word long. Technically, you could also use double quotes here, but you have to be sure that they won't cause an error because of mismatched quotes. In this example, I have used inline CSS code with my HTML. The HTML attributes are using double quotes, so it is very important for my CSS to only use single quotes. Otherwise, HTML would interpret the first double quote as the close of the style attribute, which would cut off the real CSS code and cause things to not work as expected. Font StyleThe CSS alternative for the HTML tags I and EM is the command font-style. With a value of normal, this command simply displays standard text, but with a value of italic or oblique it will display italic text. The oblique value provides text that is slanted more than italic text. I have provided an example below:
In this example, the text in the link is made italic, but the words 'Plugins' is made oblique (more slanted italics). Small Caps TextAnother simple CSS command that I really like to use is font-variant. With the value set to normal, this command just produces standard text, but with the value set to small-caps it will make text all capital letters with the lowercase letters being smaller capital letters. I have provided an example of this command below:
In this example, I have simply set the link text to display with the small-caps font variant. List StylesWith HTML lists, the default marker for list items can be changed with the CSS command list-style-type. There are more than 20 different values that can be used for this command, so I will just be listing some of the most commonly used along with a brief description of the marker that each value creates:
This CSS command should be used on the UL and/or OL tags that are used to create lists. Here is an example of an ordered list that is using uppercase roman numerals instead of the default numbering:
This would display like: I. First List Item List Marker ImagesInstead of using one of the predefined list image styles, you can also set your own using an image file. This is done with the list-style command. To use this command, you will need to have the website address of the image file you want to use as the marker. This goes in the value of the list-style command, along with a url wrapper. You can also provide a default list-style-type to use with this command, in case the URL doesn't load for any reason. An example of this command is below:
© CSS Training Guide >>> Back to TABLE OF CONTENTS <<< | |
| Views: 441 | |
| Total comments: 0 | |