Simple CSS hints (part_3)

This post is the third and last part of CSS tutorial and I hope that these tutorial series could be useful for CSS learners and beginner web designers.

Two older tutorials are accessible from following links,

• Simple CSS hints (part_1)
• Simple CSS hints (part_2)

As you know that link color in HTML is blue when it is not visited and after clicking, it turns to purple. With CSS you can change these colors such as below,

	a {
	font-weight: bold;
	color: black;
	}

view raw test.css hosted with ❤ by GitHub

Now, instead of being blue and having a normal font weight, your links appear in bold, black type. In mentioned example all visited, unvisited links turned to black. Now for distinguishing colors of unvisited, visited and mouse over (when mouse pointers is on link), use the below example,

	a {
	font-weight: bold;
	}
	a:link {
	color: black;
	}
	a:visited {
	color: gray;
	}
	a:hover {
	text-decoration: none;
	color: white;
	background-color: navy;
	}
	a:active {
	color: aqua;
	background-color: navy;
	}

view raw test.css hosted with ❤ by GitHub

Keep in your mind that the order should be always like above, means LVHA (Link, Visited, Hover, Active).

Class Selectors

A class selector lets you define a style that can be used over and over again to style many different elements. So, for example, let’s say you wanted to make some parts of your text stand out-to make them look slightly more appealing or fun than other parts of the document.

You could do so in your CSS like this:

	.fun {
	color: #339999;
	font-family: Georgia, Times, serif;
	letter-spacing: 0.05em;
	}

view raw test.css hosted with ❤ by GitHub

In order to make use of the style once it has been added to your style sheet, all you need to do is add the attribute to an element:

<p>A man walks into a bar; you would've thought he'd see it coming!</p>

view raw test.html hosted with ❤ by GitHub

Imagine you want to italicise any blockquote element that has a class attribute with the value fun , but not other elements with that class value. Think it sounds tricky? Not with CSS! Take a look:

	.fun {
	font-family: Georgia, Times, serif;
	color: #339999;
	letter-spacing: 0.05em;
	}
	blockquote.fun {
	font-style: italic;
	}

view raw test.css hosted with ❤ by GitHub

Now, any text inside a pair of <blockquote> and </blockquote> tags will appear in italics.

The simplest way to format your lists is to define a style which applies to all lists in the page. In the head of your web page, add the following code:

	ul {
	list-style-image: url("/images/arrow.gif");
	}

view raw test.css hosted with ❤ by GitHub

• Syntax: list-style-type, possible values: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
• Default Value: disc
• Applies to: Elements with display value list-item specifies the type of list-item marker, and is used if list-style-image is none or if image loading is turned off
• Syntax: list-style-image: <value>
• Possible Values: <url> | none
• Default Value: one
• Applies to: Elements with display value list-item replaces the marker specified in the list-style-type property.
• Syntax: list-style-position: <value>
• Possible Values: inside | outside
• Default Value: outside
• Applies to: Elements with display value list-item

Takes the value inside or outside, with outside being the default. This property determines where the marker is placed in regard to the list item. If the value inside is used, the lines will wrap under the marker instead of being indented.