Common attributes of CSS
Continued from
page 3 - "Creating & understanding CSS classes."
Common attributes
Starting this off with a run-down of some of the more common attributes seems like a good idea
Fonts
A basic building block of CSS is the ability to associate fonts to a particular class or element - as you would
imagine this is fairly simple, all that is required is to specify which font you would like and then what size it
should be.
font-family is where the fonts are named and listed in order of preference (incase the user does not
have your first choice of font the system can degrade gracefully). The list is simply separated by commas, and any
names which include a space should be enclosed in quotes.
It is also useful to know that in addition to specific fonts you can specify generic fonts so the users browser
can choose a similar style of font if all else fails, to include a generic font you simply add it into the list as
if it were a regular font. These generic font-types are
serif (new times roman is an example of a serif
font),
sans-serif (arial is an example of a sans-serif font),
cursive (fonts which attempt
to mimic written script),
fantasy (font with rounded edges) and
monospace (fonts in which
all the letters have an equal width).
font-size is where you may specify exactly how large you want the text to appear. As in most cases
where a size is required for CSS there are a variety of units you can use, in order to define exactly which set of
units are used depends on the suffix you use;
- centimetres (cm)
- millimetres (mm)
- inches (in)
- points (pt)
- picas (pc)
- pixels (px)
- percent (%)
Additionally you have access to the following pre-defined font sizes:
xx-small,
x-small,
small,
medium,
large,
x-large and
xx-large.
Formatting
color allows you to change the color of text, it accepts both RGB (e.g.
#FF1122) and literal
(e.g.
red) colour codes. It is also worth noting that if you change the colour of text you are also
expected to set the background color, event if it is just set to
transparent.
font-weight defines how dark or light the text should appear, possible values are
normal,
bold,
bolder and
lighter.
text-decoration defines if a decorative line is required either above, through or below the text.
Possible values are
none,
underline,
overline and
line-through.
Alignment
text-align defines how a block of text should align itself across the current line, possible values are
left,
right,
center and
justify.
vertical-align defines how a block of text should align itself vertically within the current container,
possible values are
top,
middle and
bottom.
Background
background-color defines the background color of an element, in addition to the standard colour
defintions you may also use
transparent to show whatever colour is immediately beneath the element.
background-image defines an image to be used for the background of an element, to reference an actual
file we use
url("file.png") where
file.png is the file we are interested in.
background-attachment defines how an image responds when the screen is scrolled by the user possible
values are
scroll which moves with the scroll, making it appear as if the image is moving with the page
and
scroll which stays fixed at all times, making it appear as if the page is moving over the static
image.
background-repeat defines how an image which does not fill the entire screen is handled, possible values
are
repeat which tiles the image horizontally and vertically,
no-repeat which does not repeat
the image,
repeat-x which repeats the image horizontally and
repeat-y which repeats the
image vertically.
Sizing
width allows a width to be specified using any of the standard units.
height allows a height to be specified using any of the standard units.
Border
border-width allows a size to be specified for the border using any of the standard units.
border-color allows a colour to be specified for the border using any of the standard colour
defintions.
border-style defines how the border appears, possbile values are
none,
dotted,
dashed,
solid and
double.
Note that you can also control the effect in each direction by using
border-left,
border-right,
border-top and
border-bottom followed by the required attribute
e.g.
border-top-width.
Margin
margin defines how much space is added to the edge of the container and any content it is placed into,
any of the standard units can be used to specify magnitude.
Note that you can also control the effect in each direction by using
margin-left,
margin-right,
margin-top and
margin-bottom.
Padding
padding defines how much space is added to the inside of a container between the edge and beginning
of the content, any of the standard units can be used to specify magnitude.
Note that you can also control the effect in each direction by using
padding-left,
padding-right,
padding-top and
padding-bottom.