More on CSS

Measure

CSS dimension measurements

CSS allows you to precisely place page elements. If you need some text to appear five centimeters to the left of some image, that is no issue for CSS.

There are a number of different measurement units available for CSS use. These units come in two varieties: absolute and relative. The absolute measurements are typically used for defining page layouts for printing. The relative measurements are best used for screen layouts simply because the window panels can be resized by the viewer.

Unit	Unit abbreviation	Description
- Absolute -
centimetre	cm
inch	in
millimeter	mm
pica	pc	std publishing unit equal to 12 points
point	pt	std publishing unit, with 72 points = 1 inch
- Relative -
Em	em	The width of the capital M in the current font, usually the same as the font size
Ex	ex	The height of the letter X in the current font
Pixel	px	The size of a pixel on the current monitor
Percentage	150%, e.g.	Sets a font size relative to the base font. 150% is one and one half the base font size.

For example

<html> <head> <style type="text/css"> p.x1 { margin:1.25in} p.x2 { margin:25mm} p.x3 { margin:144pt} </style>

</head> <body> <p class="x1">This is paragraph one.</p> <br> <p class="x2">This is paragraph two.</p> <br> <p class="x3">This is paragraph three.</p> </body>

</html>

Click to view

If the default paragraph size is 12 point, the one em equals 12 points.

Ex is a less reliable unit of measurement than em because the size of the letter x changes in height from one font family to another, and the browser cannot always calculate the difference correctly.

The px is the basic picture element of a display. The size of the pixel is determined by the screen's resolution, which is the measure of how many pixels fit on a screen (800 x 600).

The percentage values are always relative to another value.

body {font-size: 150%} makes the font size for the <body> element to one and one half the browser default.

<p style="font-size:2em"> The size of this text is 2 em.</p>

Line Height

Also, called leading, the white space between lines of text

p {line-height: 150%} - results in a line height of 18 pts for 12 pt font

CSS box properties

    p {margin: 2em;
        padding: 2em;
        border: solid thin black;
        background: white; }

    padding area (between content and border) has the same background colour as the content,
    the margin area is outside the border and is always transparent,
    the border separates the padding and margin areas

    border property is shorthand property that sets
        border-style to solid
        border-weight to thin
        border-color to black

border styles:

    None
    Dotted
    Dashed
    Solid
    Double
    Groove
    Ridge
    Inset
    Outset

border-width
    thin
    medium (default)
    thick

<html>
<head>
<style type="text/css">

#title {font: bold 45px "Times New Roman", serif, Georgia;position:absolute;top: 5px;left:5px;}
#text { position:relative; top:0px; left:0px; color:black; z-index:2;}
#shadow { position:absolute; top:3px; left:-3px; color:#b9b9b9; z-index:1;}

p.x1 { margin:7% 20% 0% 30%;
padding:2em;
border: groove thick #3030ff;
color: darkblue;
letter-spacing:3pt;
background-color:orange}

.dropcap { font: bold 300% times, serif; color:gold; float:left;}

p.x2 { margin:20px 600px 50px 30px;
padding:1em 1em 4em 4em;
border-top: dotted thin red;
border-right: dashed medium blue;
border-bottom: inset thick white;
border-left: groove medium maroon;
color: black;
font: 10pt Courier New;
line-height:2em;
word-spacing:2pt;
background-color:lime}

p.x3 { margin:0pt 300pt 20pt 80pt;
padding:5pt;
border: thick outset aqua;
font: 8pt Arial, Helvetica, sans-serif;
color:olive;
line-height: 18px;
background-color:yellow}

p.x4 { margin:20px 30pt 40pt 80pt;
position: absolute;
top: 250px;
left:280px;
width:125px;
padding:5pt;
border: thick double navy;
font: 8pt Arial, Helvetica, sans-serif;
color:white;
line-height: 9px;
background-color:red}

</style>
</head>
<body>

<div id="title">
<span ID="text">The Three Little Pigs</span>
<span ID="shadow">The Three Little Pigs</span>
</div>

<p class="x1">
<span class="dropcap">T</span>res porci parvi tres casas in silva aedificant.  Duo porcororum sunt stulti. Primus porcus casam stramento aedificant. Magnus lupus malus ad casam appropinquat, ianuam pulsat. "Salve, porce! Intro."</p>

<p class="x2">
<span class="dropcap">"N</span>on intras, lupe," respondet parvus porcus stultus. Magnus lupus malus flat et flat; casa ruit.  Tum lupus laetus parvum porcum stultum devorat.</p>

<p class="x3">
Tertius porcus callidus est; casam magnis lateribus aedificat. Magnus lupus malus ad casam properat; ianuam pulsat. "Salve, porce! Intro." "Non intras, magne lupe male," respondet parvus porcus tertius. Magnus lupus malus flat et flat et flat. Sed casa porci tertii stat. Ridet parvus porcus callidus; laetus est.</p>

<p class="x4">
Secondus porcus parvus quoque stultus est; casam virgis aedificat.  Magnus lupus malus ad casam appropinquat; ianuam pulsat.  "Salve, porce!  Intro."  "Non intras, lupe," respondet parvus porcus stultus.  Magnus lupus malus flat et flat; ruit casa.  Tum lupus laetus parvum porcum secondum devorat.</p>

</body>
</html>

Click to view