CSS Borders

CSS Borders

You can use borders applying them to most HTML elements within the body.

All that is needed to make a border around an element is border-style. The values that are applied can be solid, dotted, dashed, double, groove, ridge, inset and outset.

border-width is used to set the width of the border, which is measured in pixels. Other properties can include border-top-width, border-right-width, border-bottom-width and border-left-width.

At last, border-color is used to set the color.

Add the code below to the CSS file:

h2 { border-style: dashed; border-width: 3px; border-left-width: 10px; border-right-width: 10px; border-color: red; }

This will result in a red dashed border appearing around all HTML secondary headers (the h2 element) which has 3 pixels width on the top and bottom and 10 pixels width on the left and right (the 3 pixel wide width of the entire border was overriden as a result).

Benefits of CSS

Benefits of Cascading Style Sheets

Deprecation of most HTML formatting elements used in In HTML 4.0 means that, even if the browsers still support them, according to the recommendation of the World Wide Web Consortium (W3C) they should no longer used. It is rather recommended that Web designers apply CSS.

The biggest advantages of CSS are:

  1. Cleaner code
    • Easier maintenance
    • Faster downloading
    • Better optimization of search engine
  2. Modular code
    • Style rules can be used with multiple pages
    • Consistent design
    • Easier maintenance
  3. Design Power
    • Precision of control (position, size, margins, etc.)
  4. Division of labor
    • Developers’ task is to develop / Designers’ task is to design
  5. Better Accessibility
    • Tags are no longer misused (e.g, <blockquote> for formatting)
    • No need for invisible images don’t need to be positioned
    • Users can override authors’ style sheets

CSS Rules

CSS rules comprise definitions of the style of an element or a group of elements. They use the following syntax:

selector {property:value; property:value; property:value}

All property:value pairs are declarations. Multiple declarations are separated by Semi-colons are used to separate multiple declarations. The selector determines the elements that are affected by the rule. Let’s consider the following rule.

p {
 color:darkgreen;
 font-family:Verdana;
 font-size:10pt
}

This rule determines that all paragraph text should be darkgreen color and apply a 10-point Verdana font.

CSS Comments

Comments in CSS start with “/*” and end with “*/“. Look at the following example.

p {
 color:red; /* All paragraphs should be red */
}

Class and ID Selectors

Class and ID Selectors

For the CSS Elementary Tutorial we analyzed only HTML selectors – the ones representing an HTML tag. You can also specify your own selectors that take the form of Class and ID selectors.

The advanatge of this is that you get the same HTML element, but present it in a different way based either on its class or ID.

In the CSS, a class selector appears as a name that follows a full stop (.) and an ID selector appears as a name that follows a hash character (#).

So the CSS might resemble the following code:

#top { background-color: #ccc; padding: 1em } .intro { color: red; font-weight: bold; }

The HTML is refered to the CSS by the means of the attributes id and class. It could take a similar form:

<div id="top"> <h1>Chocolate curry</h1> <p class="intro">This is my recipe for making curry purely with chocolate</p> <p class="intro">Mmm mm mmmmm</p> </div>

While the difference between an ID and a class is that an ID can be applied to specify one element, a class can be used to specify more than one element.

In addition, you can use a selector to a specific HTML element by just stating the HTML selector first, so p.jam { whatever } will only be used with paragraph elements that have the class ‘jam’.

CSS Selectors, properties and values

CSS Selectors, Properties, and Values

While HTML has tags, CSS has ‘selectors‘. Selectors mean the names that describe styles in internal and external style sheets. In this CSS Elementary Tutorial we will be focusing on HTML selectors, which are just the names of HTML tags and are applied in order to change the style of a given tag.

‘Properties‘ for each selector appear inside curly brackets, which just look like terms color, font-weight or background-color.

The property following a colon (NOT an ‘equals’ sign) receives a value and the properties are sewparated by semi-colons.

body { font-size: 0.8em; color: navy; }

This code will set the chosen values to the font-size and color properties to the body selector.

So, in general, in case this is applied to an HTML document, text that is written between the body tags (which comprises the content of the entire window) will have 0.8 ems in size and navy in color.

Lengths and Percentages

Values used in CSS can be expressed by a number of property-specific units, but still there are some general units that are applied in a number of properties and, before we go on, it is good to have a look at them.

em (such as font-size: 2em) is the unit that defines the calculated size of a font. “2em”, for instance, defines two times the current font size.

px (such as font-size: 12px) is the unit that defines pixels.

pt (such as font-size: 12pt) is the unit that defines points.

% (such as font-size: 80%) is the unit that defines percentages.

Other units comprise pc (picas), cm (centimetres), mm (millimetres) and in (inches).

In case a value is zero, there is no need to state a unit. For example, using border: 0 you don’t specify any border.

A web page is a dinamic, fluid medium. By definition it is flexible and the users must be free to view the web page the way they wish, which comprises the font size and the size of the screen as well. In consequence, it is a common rule that ‘em’ or ‘%’ are the best units applied for font-sizes (and maybe even heights and widths, which we shall get familiar with in the CSS Advanced Tutorial), rather than ‘px’, which can make text on most browsers non-resizable, and should not be used too often, for example, to define border sizes.

Colors

Colors

CSS offers you 16,777,216 colors. They can appear as a name, an rgb (red/green/blue) value or a hex code.

red

Is the same as:

rgb(255,0,0)

Which is the same as:

rgb(100%,0%,0%)

Which is the same as:

#ff0000

Which is the same as:

#f00

We have 17 valid predefined names for colors. They include aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.

transparent is a valid value too.

The three values in the rbg value range from 0 to 255, where 0 is the lowest level (like no red), 255 is the highest level (like full red). These values can also be represented as a percentage.

Hexadecimal (formerly and with more accuracy called’sexadecimal‘) is a base-16 number system. We are commonly used to the decimal number system (base-10, from 0 to 9), but hexadecimal system has 16 digits, from 0 to f.

The hex number is prefixed with a hash character (#) and can have three or six digits length. In general, the three-digit version is a compressed version of the six-digit (#f00 becomes #ff0000, #c96 becomes #cc9966 etc.). It is easier to decipher the three-digit version (the first digit, the same as the first value in rgb, is red, the second green and the third blue) but the six-digit version provides you with more control over the specific color.

‘color’ and ‘background-color’

You can apply colors by using color and background-color (remember that this must be the American English spelling ‘color’ and not ‘colour’).

A blue background and yellow text could resemble this code:

h1 { color: yellow; background-color: blue; }

These colors might be a bit too harsh, so you might choose to change the code of your CSS file for a little different shades:

body { font-size: 0.8em; color: navy; } h1 { color: #ffc; background-color: #009; }

After saving the CSS file refresh your browser. You will notice that the colors of the first heading (the h1 element) have become yellow and blue.

The color and background-color properties can be applied to most HTML elements, including body, which will convert the colors of the page and also what is in it.

DIV AND SPAN

Div and Span

The <div> and <span> tags are applied together with Cascading Style Sheets. They do not cause much changes separately. The fact is that the <span> tag doesn’t affect content visually. Using <div> tag will result only in blocking off its contents, like when you put a <br> tag before and after a section on the page.

Like it is with most tags, the <div> and <span> tag can have the class, id, and style attributes. Thanks to these attributes styles can be applied to the elements. The tags are applied the same way any other HTML tags and it is possible to nest them within each other any number levels.

Code Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div and Span</title>
</head>
<body> <div style="position:absolute; left:0px; top:0px; font-family:Verdana; font-size:10pt; border-style:groove; border-width:30px; border-color:blue; padding:4px">
This text appears in the  <span style="font-style:italic; color:red">upper-left hand corner</span>
 of the page.<br />
 It also has a big blue groovy border around it.
</div>
</body>
</html>

Exercise: Divs and Spans

Task duration: 10 to 20 minutes.

This exercise will teach you how to add class and id attributes to div and span tags to HTML page that already exists. The HTML page already has an embedded style sheet, which should stay without modification. Your task is to make the page look as follows.

There are no detailed instructions. Analyzing the rules in the embedded style sheet use classes and ids as it is appropriate to apply them.

Units of Measurement

In CSS you can determine font size, border size, margins, padding, etc. by the means of many specific units of measurement. Check in the table below which units are available.

Unit Description Example
px Pixels margin-top: 10px;
pt Points font-size: 12pt;
in Inches padding-top: .5in;
cm Centimeters top: 5cm;
mm Millimeters left: 45mm;
pc Picas bottom: 12pc;
em Ems font-size: 1.5em;
ex Exs font-size: 1.5ex;
% Percentage width: 80%;

Pixels (px)

The measurement unit the most commonly applied in website design is pixels. Unlike, for example, an inch or a point, a pixel is not an absolute measurement. The final size of a pixel is dictated by the resolution and size of a user’s monitor. Imagine an image that has 900 pixels width. If setting of the monitor resolution is 800 by 600 pixels, it means the image will not fit on the screen. But, if the setting of monitor resolution on the same computer is 1024 by 768 pixels, the image will fit and some room will be left.

Points (pt)

Points should be used for print. An inch contains 72 points.

Inches (in), Centimeters (cm), and Millimeters (mm)

Even if these are the most commonly used units of measurement, it is not good to use them in Web design.

Picas (pc)

Picas should be used for print only. An inch contains 6 picas.

Ems (em)

An em (or Mutt) is a relative unit defining the size of the letter “M” in a font. Since em is a relative, not an absolute measurement, it is often applied in Web design.

Exs (ex)

The “x-height” defines the height of font’s lowercase “x”. Exs are applied for setting the size of content depending on the size of the surrounding font.