Learning on CSS - Part 2
Link selectors
As you know, links have three basic states: unvisited, visited, and active (in the process of being clicked). One additional state (hover) occurs when the mouse is over the link but not clicked through. CSS gives us the ability to apply different styles to links, depending on their state. To do so, we use the a tag selector, then add a colon, followed by the state name, like this:
a:link {
color:blue;
}
a:visited {
color:gray;
}
a:hover, a:active {In this instance, we’ve colored the unvisited links blue, the visited links gray, and both the active and hover states orange.
color: orange;
}
Note: the four link states must be styled in the order in which we placed them here: a:link first, then a:visited, followed by a:hover and a:active.
There are dozens of different types of selectors – too many to be covered here. To learn more about each of them, visit http://www.w3schools.com/cssref/css_selectors.asp
Properties & values
You’ve already seen these in action, but probably need to know more. Properties are the actual characteristics being styled in your web pages. The color property is likely the most commonly applied property in CSS. In fact, we’ve used it several times already in this chapter to talk about how selectors work. In the following example, two properties are used (font-family and color) to style the level one headings for a web page:
h1 {As you can see, the basic syntax is:
font-family: verdana;
color: green;
}
selector {When multiple property and value combinations are used, semi-colons separate them. Furthermore, the final property:value combination is also followed by a semi-colon. While we’ve so far shown multiple property:value combinations on a single line, some developers prefer to give each one its own line, for easier reading.
property: value;
}
h1 {Either method is fine, so it is up to your personal preference.
font-family: verdana;
color: green;
}
If there were dozens of CSS selectors, there must be hundreds of properties. We’ll cover several throughout the rest of this post, but to learn more about each of them, visit http://www.w3schools.com/cssref/
There are three basic types of style sheets: inline, internal, and external. Which one is used depends on several factors.
Inline styles
Inline styles (also called embedded styles) are so named because they are embedded right within the elements being styled. This means, if you used an inline style to cause a paragraph to have blue text, your code might look like this:
<p style=”color:blue;”>Paragraph text goes here</p>With inline styles, the property:value information is included within the tag using the style attribute. The nature of inline styles is such that the style is only applied to the particular tag to which it is applied. This means they are not useful for styling whole pages or sites. As such, most web developers do not use inline styles much except for quickly applying small or temporary style alterations.
Internal styles
An internal style sheet is included in the head section of a single page’s HTML. This means the styles are applied only to the relevant tags on that one page. Internal style sheets are therefore useful for managing the styles of a single page, but not of an entire website.
Refer to the following code to see how a very brief internal style sheet might look:
<html>The style declarations we’ve previously discussed are simply enclosed within a style element (in between the opening and closing style tags) in the head section of the page.
<head>
<title>Internal Style Sheet</title>
<style>
body {
font-family: arial;
color: black;
}
h1 {
font-family: georgia;
color: purple;
}
h2 {
font-family: georgia;
color: green;
}
</style>
</head>
</html>
External styles
The final type of style sheet – an external style sheet – looks quite similar to the internal style sheet, except the content is placed in a separate text file, then saved on the web server with a .css file extension. Below shows a screen capture of one such style sheet.
Read Next - Learning on CSS - Part 3
No comments:
Post a Comment