CSS : Hyperlinks

There are fours states of links you can give properties to in your style sheets. The important thing to remember is the order in which they must be set out and defined within the style sheet. If not kept in the following order the last two states will not effective.

a:link unvisited links
a:visited visited links
a:hover what happens when you mouse over the link
a:active what happens when the link is selected

Now you can specify all or some of the following properties for each of the above states in your style sheets.
color: #FFF stets a color for the text link
background: #FF0 sets a background color for the text link
text-decoration: underline sets it as underlined or none for no underline
font-size: 130% changes the font size
font-family: helvetica changes the font family

a:link a:visited
{
color: #969
text-decoration: none
font size: 110%
}

a:hover a:active
{
color: FFF
background-color: 969
font-size: 160%
}

The above would cause all links on a page to be slightly larger then the rest of the text and in a dark blue shade with no underlines. When moused over or selected those same links would increase in size and become white type on a dark blue background. Using these properties you can make your links stand out or blend in as little or much as you want into your page designs.

Learn More with: "Defining CSS : Cascading Style Sheets", "CSS : Backgrounds", "CSS Basics", "CSS : Text & Fonts", "CSS : Margins & Positioning", "CSS : Borders", "CSS : Lists", "CSS : Setting Dimensions", "CSS : Displaying Elements"

CSS : Lists

You can control images used as list item markers, placement and even use multiple list item markers for both ordered and unordered lists through CSS and the style sheet.

Ordered lists generally use numerals or alphabetical characters as markers before each item in the list. Unordered lists generally use bullets, symbols or images in front of each item.

list-style
is basically made up of three properties type, position and image in that order.

list-style-type
none blank space
disc small black circular shape
circle small outline of a circle
square small black square
decimal 1.
decimal-leading-zero 01.
lower-roman i.
upper-roman I.
lower-alpha a.
upper-alpha A.
lower-latin a.
upper-latin A.

list-style-position
inside indents the marker and the text
outside DEFAULT keeps the marker to the left of the text

list-style-image
none DEFAULT no image is displayed
url url to the image ie url(image.gif)

To set all the properties in one place you would use something like the following:

{
list-style: none outside url(images/digital.gif)
}

this would create all lists to have the image digital.gif as a marker to the left of each text item/line in the list.

You can also create classes and use those to change how a list looks within the page through your CSS stylesheet.

Learn More with: "Defining CSS : Cascading Style Sheets", "CSS : Backgrounds", "CSS Basics", "CSS : Text & Fonts", "CSS : Margins & Positioning", "CSS : Borders", "CSS : Setting Dimensions", "CSS : Hyperlinks", "CSS : Displaying Elements"

CSS : Setting Dimensions

Using the dimension properties in your style sheet you can set the actual height or width of images or elements as well as minimums or maximums of either. You can also use these properties to space lines of text.

Defining the space between lines in a paragraph can be done in three ways.
line-height
normal DEFAULT
% a distance between the lines in % of the current font size
number a number multiplied by the current font-size to set the distance
length a fixed distance between the lines

{
line-height: 128%
}

{
line-height: 1.6
}

{
line-height: 20pt
}

Setting height and width of images or elements use one of four properties.
auto DEFAULT for height and width properties
none DEFAULT on maximum or minimum properties
length defines the height/width in pix, cm, in and so on
% defines the height/width as a % of the block space containing it

{
height: 150px
}

{
width: 20%
}

{
max-width: 450px
max-height: 200px
}

{
min-height: 30%
min-width: 20%
}

You can use combinations of width and height setting or just one depending on the needs of your page design.

Learn more with: "Defining CSS : Cascading Style Sheets", "CSS : Backgrounds", "CSS Basics", "CSS : Text & Fonts", "CSS : Margins & Positioning", "CSS : Borders", "CSS : Lists", "CSS : Hyperlinks", "CSS : Displaying Elements"

CSS : Borders

Borders were originally done in HTML using tables. CSS allows us to create borders around elements without using tables. CSS2 has added in the functionality calls of colour and style to an already handy way to create borders.

When creating borders through CSS in the style sheet you will use the main calls of
border-width
border-style
border-color

First let’s break down the possible settings on these three calls as follows.
border-width
thin places a thin line
medium places a medium thick line
thick places a thick line
length places a line of whatever size thickness is defined

border-style
none shows no border
hidden is used to resolve conflicts when tables are used
dotted . . . . . . . .
dashed - - - - - - -
solid ___________

double Defines two lines both share the SAME width value

groove groove effect depending on the color value
ridge ridge effect depending on the color value
inset inset effect depending on the color value
outset outset effect depending on the color value

border-color
transparent a transparent border is created
color the color can be called through HEX code (#FFF) or RGB value (rgb(255,255,255)) or name (white)

You can call define all borders together or separately using the border calls.
border
border-top
border-right
border-left
border-bottom
Within these you can define them further by adding width, style or color to any of them. This is useful for creating borders that are differing in any or all of those attributes on any or all of the sides.

We will begin with the border properties in the CSS sheet. To define all the borders for an element in one call, try the following.

{
border: thin double #000
}

This would create a thin double black line around whatever element the definition was included in. So by using the border call followed by the width style color you can set all four borders on any element to be the same.

What if you want to have a differing effect on some borders though? In that case you would adjust the definition to work with the end effect you want to achieve. You can either set up classes for each effect, defining and naming them using those names as style calls. Or you can simply use the border-right, border-left, border-top, and border-bottom calls to define each side for the element.

Defining each side would look like this within the element’s properties in the style sheet.

{
border-top: thin solid #699
border-right: thick double #366
border-left: thin solid #699
border-bottom: thick double #366
}

This would create a thin top and left sided border slightly lighter in colour than the left and lower sides which are darker, thicker and doubled.

Learn more with: "Defining CSS : Cascading Style Sheets", "CSS : Backgrounds", "CSS Basics", "CSS : Text & Fonts", "CSS : Borders", "CSS : Lists", "CSS : Setting Dimensions", "CSS : Hyperlinks", "CSS : Displaying Elements"

Older Posts »