Basic CSS Index

Introduction

CSS means 'Cascading Style Sheets', and allows you to set the properties for a CSS class you assign to elements of your webpage. It is an extremely useful tool to use in web design, if used correctly.

This guide will assume that you already know the basics of how CSS works:

.css-class-name {
     attribute1 ;
     attribute2 ;
}

If you wish to avoid causing errors within your style sheet, make sure every property you state is separated by a ';' semicolon, and that each class contains the opening and closing curly bracket { }.

Wherever #HEX appears within this documentation, donates where a Hex Code must be added. Alternatively, the word for the colour themselves may also be used. E.g black, white, blue, green etc.

Text Styles

On any webpage, you can use CSS to manipulate the size, colour, style and font of the text.

To attributes to the text of one of your CSS classes, use either of the following syntaxes:

Colour

color: #HEX ;
color: black ;
The colour that will appear when you use a word to choose your colour rather than a hex code may not be exactly what you were hoping for.

Size

font-size: 12px ;

Change the value to a size that suits your needs.

font-size: 90% ;

In IF/ZB skinning, a parent font size will be declared in the BODY class. For example, the body class declared the font-size to be 12px. The .maintitle class declares its font-size to be 50%, which would make the font-size 50% of the parent font-size, therefore making it 6px.

Style

font-weight: bold;

The following may be used in the place of bold.

  • Normal
  • Bold
  • Bolder
  • Lighter
  • 100 increment from 100 to 900.
font-style: italic ;

The following may be used in the place of italic.

  • None
  • Italic
  • oblique

Font Type

You will see that pages around the Internet have different font types. However these can only be executed if the computer you are viewing the page has the font installed in the Fonts folder. Therefore it is wise to use fonts that are found on most computers, such as Tahoma, Arial, Verdana, Times New Roman and Comic Sans MS.

You are able to list as many font types as you like to the CSS class, which is advisable in case a computer does not have the font you declare installed. Make sure your preferred font type is the first in your list.

font-family: "Lucida Grande", Verdana, Tahoma, Arial ;

Text Decoration

You can add a text decoration to the text within the CSS class. This is commonly used to define the links on a page, or in conjunction with a link hover.

text-decoration: none ; 

None can be replaced with one of the following:

  • none
  • underline
  • overline
  • line-through
  • blink

You can also list as many decoration styles as you like, in the following manner:

text-decoration: underline overline ;
Blink is not recommended for anything other than a hover, as it will quickly annoy anyone viewing your site if the text or links are blinking repeatedly.

Text Transformation

You can set the text within a class to appear uppercase, lowercase or with the first word of every word capitalised.

text-transform: none ;

Replace none with one of the following:

  • none
  • uppercase
  • lowercase
  • capitalize

Text Alignment

Using the following method you can align the text a certain way within the CSS class:

text-align: left ;

Left can be replaced with one of the following:

  • left
  • right
  • center
  • justify

Indent Text

Using the following method you can indent your text by the number of pixels you specify:

text-indent: 10px ;

Links can be changed using the same properties used for changing the text on the page. However there are different types of links that are used on webpages, and a hover can be set for them too.

There are three types of links.

  • a:link - The normal link.
  • a:active - Where there is a link to a page you are currently already on, this will be shown differently to other links.
  • a:visited - A link you have already visited will be displayed differently to other links.

You can choose to separate these types, and set different colours or sizes for them, or you can group them together like this:

.css-class-name a:link,  .css-class-name a:active,  .css-class-name a:visited{
    attribute1 ;
    attribute2 ;
}

Hover

Like the link types, you can set attributes to a hover in the same way you would for normal text. The properties you set for the hover will execute when a user hovers over a link with their cursor.

.css-class-name a:hover {
    attribute1;
    attribute2;
}

Backgrounds

Background styles are a must for any decent looking webpage, so it is advisable you use them to give your page some structure and diversity.

Background Colour

To set the background colour for a class:

background-color: #HEX ;

Background Image

For a background image, you must host your image and have the link to the image handy when you edit your Style Sheet.

background-image: url( url of your image will go here ) ; 

Background Repetition

You may find you only want your image to repeat a certain way, or not at all. Unless you specify a repeat type for it, your image will repeat up, down, left and right throughout the class.

background-repeat: no-repeat ;

This code will stop the image from repeating.

background-repeat: repeat-x ;

This code will make your image repeat left and right only.

background-repeat: repeat-y ;

This code will make your image repeat up and down only.

It is advisable in some situations to set a background colour to the class along with a repeat type. This is particularly needed for repeating gradients, where it can look messy if the gradient doesn't blend in with the background.

Background Positioning

This method allows you to position your image somewhere within the CSS class.

background-position: left ;

Replace 'left' with any of the following, depending on where you want your image to go:

  • left
  • right
  • top
  • bottom
  • center
  • top right
  • top left
  • bottom right
  • bottom left
  • center center
  • center right
  • center left
  • center top
  • center bottom

Fixing a Background Image

You may want to fix your background image, so that it stays in the same place even when you scroll down the page.

background-attachment: fixed ; 
Fixed backgrounds can make scrolling slower on old computers, causing the background to flicker.

Borders

Borders are also an important ingredient to any webpage.

To add a border to a class, use the following method:

.css-class-name {
    border: 1px solid #HEX;
}
  • 1px Increase the value to increase the thickness of the border.
  • Solid Replace this with any one of the border styles available in the list below.
  • #HEX Insert your chosen border hex code here.

Border Styles

  • solid
  • dashed
  • dotted
  • double
  • ridge
  • groove
  • inset
  • outset
  • hidden
  • none

When using styles such as 'double and 'ridge' you may need to increase the border thickness to at least 3px for the style to be completely visible.

Adding Borders to Specific Sides

At some point you may find that you want to add a different colour border to one side, or increase the thickness of one border. Simply complete the code as usual, but use one of the following:

  • border-top: ….
  • border-left: ….
  • border-bottom: ….
  • border-right: ….

Margins

margin: 5px ;

You can specify the margin to be equal on all sides using this code. Change the value to increase or decrease the margin around the area on your webpage the CSS class is assigned to.

Alternatively, you may set the margins specifically for each side:

  • margin-left
  • margin-right
  • margin-bottom
  • margin-top

Padding

Padding will increase the space between the content of the element and the edge of the element. This is recommended for text boxes to make sure the text doesn't push up alongside the edge of the box.

padding: 5px ;

This code will set an all round padding of 5px. Increase or decrease the value to alter the spacing between the content and the element.

Alternatively, you may set the padding specifically for each side:

  • padding-left
  • padding-right
  • padding-bottom
  • padding-top

Display

Width and Height

Using the width and height attributes, you can set the dimensions of any area that the CSS class is assigned to.

width: 100px ;

The width and height attribute can be set in pixels. Decrease or increase the value to alter the dimensions.

Alternatively, you can set the width and height using percentages. This will be a percentage of the area the CSS Class is within.

height: 70% ;



themes/cssindex.txt · Last modified: 2015/01/09 16:02 (external edit)