CSS, which stands for Cascading Style Sheets, is used to add style to HTML elements. In this tutorial, we will discuss the basics of CSS, with focus on the most commonly used inline styles.
There are three ways that CSS can be used to add style to your HTML elements:
External – in separate style sheet files
Embedded – defined in the head section
Inline – within single HTML elements
It is very time consuming to style HTML elements using style sheets, although it can be beneficial at times when only one element will need to be styled. It is better to use external or separate style sheets to save load time and to keep the styles separate from the HTML code, and is especially useful if you have multiple elements that will need the same styling. But in this lesson, we will focus on some commonly used styles and show you how to use them inline. We will focus on the other methods of usage in a later tutorial. In order to use the inline method of styling, you must type the word style followed by an equals sign and double quotation marks around the attribute you want to change along with its value. This must be within the HTML element you want to add the style to. The following examples should help you better understand the concept.
Color:
Changing the color of an HTML element is one of the commonly used styles. To set the background color, add the style "background-color" with a colon after it and then the value you want to change it to. For example:
<body style="background-color: yellow;">
There are many color names that most browsers will recognize, although it is probably safer to learn the hex codes for them or look them up as needed. For now, we will focus on the color names that most browsers recognize. There are 17 standard colors along with 130 more that are recognized by most browsers. The standard 17 are:
aqua
black
blue
fuchsia
gray
grey
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow
To set the font color of an element, you add the style "color" with a colon after it plus the value your want to change it to. For example:
<p style="color: red;">This paragraph will be red.</p>
If you are only setting one style, you don’t necessarily have to use the semi-colon at the end of the style, but it is necessary when defining more than one to separate the styles from each other. I have made it a habit of adding in the semi-colon, as you will notice throughout the tutorials, but as stated, it is not necessary. Just maybe a good practice to have.
Font-Family:
Many people like to change the font that is used on a specific element, or maybe even the entire page. To add a font-family style to an element, add the style "font-family" followed by the colon and the value. For example:
<p style="font-family: arial;">This paragraph will be in the Arial font.</p>
It is important to remember that not all people’s computers will have the same fonts installed, so it is best to stick to the standard fonts that are common to all operating systems when possible. It is also a good practice to list several fonts so that users without the font you desire can still view your site as close to your vision as possible. You should also end your list with a generic font just for good measure. Some examples of font lists include:
Arial, Helvetica, sans-serif
Times New Roman, Times, serif
Courier New, Courier, monospace
Georgia, Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif
In order to ensure you are using safe font lists, you should check the HTML font standards and try to include a font in your list from each platform (Windows, Macintosh, Linux, etc.). The browser will search the font list and display the first font that is available.
Font Size:
The font size style is often used as well to make the font size larger or smaller. Some people will use it to make a heading larger, or just the overall body font larger. To change the font size, add the style "font-size" with a colon and then the size you want to change the font to. For example:
<p style="font-size: 16px;">This paragraph will be a little larger.</p>
The size can be set to pixels, points, ems, and percentage. The guide below might also help:
xx-small – sets the font size to an extra extra small size
x-small – sets the font size to an extra small size
small – sets the font size to a small size
medium – sets the font size to a medium size, which is also the default size
large – sets the font size to a large size
x-large – sets the font size to an extra large size
xx-large – sets the font size to an extra extra large size
smaller – sets the font size to a smaller size than the parent element
larger – sets the font size to a larger size than parent element
inherit – specifies that the font size should be inherited from the parent element
Pixels should be used for fonts that are displayed on screens, such as monitors, while points should be used for fonts that are being displayed in print. Ems are sized so that the font size is relative to the parent element, so if a user has a larger font size set for their default in their browser, the ems will be based according to that measurement. Using ems as your font measurement ensures that your pages will be accessible to most browsers and platforms and when a user chooses to change their default font size, your pages will scale accordingly. Using a percentage will work in much the same way.
Text Alignment:
Another common style people use is the text alignment style. This is used to set the horizontal alignment of text on a page. You set the alignment by adding the style "text-alignment" followed by a colon and then the value you want to set. For example:
<h1 style="text-align: center;">This header will be centered.</h1>
The values that text alignment can be set to are: center, left, and right.
Deprecated Tags and Attributes:
There are many tags and attributes that have been deprecated, which means they will not be supported in future versions of HTML and XHTML. You should avoid using deprecated tags. Get in the habit of using only the standard and acceptable tags and the transition when a new HTML version comes out will be easier. Using deprecated tags may result in your pages not displaying correctly across all current browsers. Some deprecated tags and attributes to avoid include:
Tags
<center> – used to center content
<font> and <basefont> – used to define HTML font families
<s> and <strike> – used to strike through text
<u> – used to underline text
Attributes
align – used to align text
bgcolor – used to define the background color
color – used to define the color of text
It is best to use the appropriate style for these deprecated tags and attributes instead to ensure your pages look consistent across all browsers.
If you would like to see these tags in action, copy and paste the following code in your favorite text editor:
<html>
<head>
<title>Lesson 5: Into To CSS</title>
</head>
<body>
<p style="background-color: yellow;">This paragraph’s background color is yellow.</p>
<p style="color: red;">This paragraph’s font color is red.</p>
<p style="font-family: Georgia, Times New Roman, Times, serif;">The paragraph’s font will be Georgia, Times New Roman, Times, or a generic serif — whichever your computer has available — in that order.</p>
<p style="font-size: 24px;">This paragraph will be 24 pixels large.</p>
<p style="font-size: 200%;">This paragraph will be 200% larger than the parent element.</p>
<p style="font-size: 2em;">This paragraph will be 2ems large.</p>
<p style="font-size: 20pt;">This paragraph will be 20 points large.</p>
<p style="font-size: xx-small;">This paragraph will be xx-small.</p>
<p style="font-size: x-small;">This paragraph will be x-small.</p>
<p style="font-size: small;">This paragraph will be small.</p>
<p style="font-size: medium;">This paragraph will be medium.</p>
<p style="font-size: large;">This paragraph will be large.</p>
<p style="font-size: x-large;">This paragraph will be x-large.</p>
<p style="font-size: xx-large;">This paragraph will be xx-large.</p>
<p style="font-size: larger;">This paragraph will be larger than the parent element.</p>
<p style="font-size: smaller;">This paragraph will be smaller than the parent element.</p>
<p style="font-size: inherit;">This paragraph will inherit the parent element’s font size.</p>
<p style="text-align: center;">This paragraph will be centered.</p>
</body>
</html>
And here is how it should look in your browser:
And this concludes this tutorial. Continue to the next one for more training!
Facebook
Twitter
LinkedIn
Myspace
Youtube
