Category Archives: Basics of CSS…

Chapter 12: Creating Horizontal Navigation…

Styling the List

To style this list, you will need to use selectors that target the <ul>, <li>, and <a> elements. You will also need to include the unique identifier, navigation, within each selector. The four selectors that you will use are shown in following listing.

ul#navigation {…}
ul#navigation li {…}
ul#navigation a {…}
ul#navigation a:hover {…}

The HTML code is shown in following listing.

<ul id=”navigation”>
    <li><a href=”#”>Home</a></li>
    <li><a href=”#”>About</a></li>
    <li><a href=”#”>Services</a></li>
    <li><a href=”#”>Staff</a></li>
    <li><a href=”#”>Portfolio</a></li>
    <li><a href=”#”>Contact</a></li>
</ul>

Styling the <ul> Element

As discussed in Chapter 11, “Creating Vertical Navigation,” most browsers display HTML lists with left indentation. To remove this left indentation, set both padding-left and margin-left to 0 on the <ul> element as shown in following listing.

ul#navigation
{
margin-left: 0;
padding-left: 0;
}

To remove the list bullets, set the list-style-type to none as in following listing.

ul#navigation
{
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
}

Next, add a background color using the shorthand background: #036; as shown in following listing. This color can be changed to suit your needs.

ul#navigation
{
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    background: #036;
}

To float the <ul>, use float: left. You will also need to set a width. In this case, we will use 100% because we want the list to spread across the full width of the page. The results are shown in following listing.

ul#navigation
{
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    background: #036;
    float: left;
    width: 100%;
}

At this stage, the text is almost illegible. This will be addressed when the <a> element is styled.

Styling the <li> Element

To make sure the list items are displayed in a single line, the <li> element must be set to display: inline as shown in following listing.

ul#navigation
{
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    background: #036;
    float: left;
    width: 100%;
}ul#navigation li
{
    display: inline;
}

The results can be seen in below figure.

Styling the <a> Element

You can increase the active area of text links by applying display: block; to the <a> element. This will change it from inline to block level and allow you to apply padding to all sides of the element.

Set the <a> element to display: block; so that padding can be applied to all sides. This will give the element additional width and height, increasing the clickable area.

The <a> element should then be floated, so that each list item moves into a single line butting against the previous item.

ul#navigation a
{
display: block;
float: left;
}

Next, add some padding using the padding declaration. You can use .2em for top and bottom padding, and 1em for left and right padding as shown in following listing.

ul#navigation a
{
    display: block;
    float: left;
    padding: .2em 1em;
}

To remove the underlines on the links, use text-decoration: none;. To set the text color and background color, use color: #fff; (white) and background: #036; as shown in following listing. These colors can be changed to suit your needs.

ul#navigation a
{
    display: block;
    float: left;
    padding: .2em 1em;
    text-decoration: none;
    color: #fff;
    background: #036;
}

To separate each list item, a white line divider will be added to the end of each item. This is achieved by adding a white border to the right side of each list item, using border-right: 1px solid #fff; as shown in following listing.

ul#navigation a
{
    display: block;
    float: left;
    padding: .2em 1em;
    text-decoration: none;
    color: #fff;
    background: #036;
    border-right: 1px solid #fff;
}

The results can be seen in below figure.

Styling the :hover Pseudo Class

Finally, the :hover pseudo class is used to change the style of links when they are rolled over. In this case, you will set the background to #69C and the color to #000 as shown in following listing.

ul#navigation a:hover
{
color: #000;
background: #69C;
}

The results can be seen in below figure. These colors can be changed to suit your needs.

Posted in Basics of CSS...

Leave a comment

Chapter 11: Creating Vertical Navigation…

Jul 14

Posted by farukhaidar

Styling the List

At its most basic level, site navigation is simply a list of links to other pages in the site. So, a standard HTML list is the ideal starting point.

To style this list, you will need to use selectors that target the <ul>, <li>, and <a> elements. To make sure you do not target every instance of these elements on the page, you will need to include the unique identifier, navigation, within each selector. The four selectors that you will use are shown in following listing.

ul#navigation {…}
ul#navigation a {…}
ul#navigation a:hover {…}
ul#navigation li {…}

The HTML code is shown in following listing.

Styling the <ul> Element

Most browsers display HTML lists with left indentation. To set this indentation, some browsers use padding (Firefox, Netscape, and Safari), and others use margins (Internet Explorer and Opera).

To remove this left indentation consistently across all browsers, set both padding-left and margin-left to 0 on the <ul> element as shown in following listing.

ul#navigation
{
margin-left: 0;
padding-left: 0;
}

To remove the list bullets, set the list-style-type to none as in following listing.

ul#navigation
{
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
}

The results of the CSS style rules are shown in below figure.

Styling the <a> Element

Text links are generally only active when you mouse over the actual text area. You can increase this active area by applying display: block; to the <a> element. This will change it from inline to block level, and the active area will extend to the full width of the list item.

When the <a> element is block level, users do not have to click on the text; they can click on any area of the list item.

Style the <a> elements with display: block; as shown in following listing.

ul#navigation
{
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
}ul#navigation a
{
    display: block;
}

To remove the underlines on the links, use text-decoration: none;.

ul#navigation
{
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
}ul#navigation a
{
    display: block;
    text-decoration: none;
}

To set the background color, you can use the shorthand rule background: #036; as shown in following listing. This color can be changed to suit your needs.

Next, the text color should be set to #fff (the hex color for white). Like the background color, text color can be changed to suit your needs.

ul#navigation
{
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
}ul#navigation a
{
    display: block;
    text-decoration: none;
    background: #036;
    color: #fff;
}

You will need .2em padding on the top and bottom of the <a> element, and .5em padding on both sides. Rather than specify these amounts in separate declarations, you can use one shorthand declaration to define them all. In this case you will use padding: .2em .5em, which will apply .2em of padding on the top and bottom of the <a> element, and .5em on both sides as shown in following listing.

To provide some space between the list items, you can add a border on the bottom of each list item. In this case you will use border-bottom: #fff as shown in following listing.

Set the width of the <a> element using width: 7em; as shown in following listing. This width can be changed to suit your needs.

The results can be seen in below figure.

Adding a Hover Effect

The :hover pseudo-class can be used to change the style of links when they are rolled over. In this case, you will set the background to #69C and the color to #000 as shown in following listing.

ul#navigation a:hover
{
background: #69C;
color: #000;
}

The results can be seen in below figure. These colors can be changed to suit your needs.

Styling the <li> Element

You might notice that there are slight gaps between list items in some versions of Internet Explorer for Windows or Opera. This can be overcome by setting the <li> element to display: inline.

ul#navigation
{
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
}

ul#navigation a
{
    display: block;
    text-decoration: none;
    background: #036;
    color: #fff;
    padding: .2em .5em;
    border-bottom: 1px solid #fff;
    width: 7em;
}

ul#navigation a:hover
{
background: #69C;
color: #000;
}

ul#navigation li
{
display: inline;
}

Posted in Basics of CSS...

Leave a comment

Chapter 10: Table Layout…

Jul 14

Posted by farukhaidar

Basic Table

As CSS increases in popularity, there is a growing trend to move away from using tables to mark up content. However, there are times when tables are the best markup option, especially for tabular data. A basic data table is shown in following listing.

<table>
  <tr>
    <td>Item</td>
    <td>Threaded screws </td>
    <td>Flat nails</td>
    <td>Dyna-bolts </td>
    <td>Spring washers</td>
  </tr>
  <tr>
    <td>1 kg</td>
    <td>$2.50</td>
    <td>$3.50</td>
    <td>$4.50</td>
    <td>$2.50</td>
  </tr>
  <tr>
    <td>2kg</td>
    <td>$3.00</td>
    <td>$4.00</td>
    <td>$5.00</td>
    <td>$3.00</td>
  </tr>
  <tr>
    <td>3kg</td>
    <td>$3.50</td>
    <td>$4.50</td>
    <td>$5.50</td>
    <td>$3.50</td>
  </tr>
  <tr>
    <td>4kg</td>
    <td>$4.00</td>
    <td>$5.00</td>
    <td>$6.00</td>
    <td>$4.00</td>
  </tr>
</table>

Adding Accessibility Features

There are a range of features that can be added to data tables to make them more accessible. The summary attribute shown in following listing should be used on complex data tables because it provides a clear description of what the table presents. It does not display on screens of current (standards-compliant) web browsers, but it can display on other web-browsing devices such as handhelds, cell phones, and so forth. The summary attribute is used as an orientation for people who use nonvisual devices.

<table summary =”Table of screws, Flat nails, Dyna-bolts and
Spring washers, in kilos”>

A caption should be included with any data table. It provides a brief description of the table’s contents. Unlike the summary, the caption is displayed on the screenusually centered above the table. The caption should appear directly after the opening table tag as shown in following listing.

<caption>
Pricing for threaded screws, flat nails, dyna-bolts and
spring washers
</caption>

The <th> element, shown in following listing, should be used to define any row or column heading within a data table. It is used to create a relationship between <th> and <td> elements, which is important for nonvisual devices.

<th>Item</th>
<th>Threaded screws </th>
<th>Flat nails</th>
<th>Dyna-bolts </th>
<th>Spring washers</th>

The <thead>, <tbody>, and <tfoot> elements shown in following listing are used to group rows in tables. The <thead> and <tfoot> should contain information about the table’s columns and the <tbody> should contain the table data.

<thead>
  <tr>
    <th>Item</th>
    <th>Threaded screws </th>
    <th>Flat nails</th>
    <th>Dyna-bolts </th>
    <th>Spring washers</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th>1 kg</th>
    <td>$2.50</td>
    <td>$3.50</td>
    <td>$4.50</td>
    <td>$2.50</td>
  </tr>
</tbody>

The abbr attribute, shown in following listing, is used to provide an abbreviated form of the relevant cell’s contents. The abbr attribute is important for people who use screen readers and may have to hear a cell’s content read out loud repeatedly.

<tr>
    <th>Item</th>
    <th abbr=”screws”>Threaded screws</th>
    <th abbr=”nails”>Flat nails</th>
    <th abbr=”bolts”>Dyna-bolts</th>
    <th abbr=”washers”>Spring washers</th>
</tr>

headers and ids are used to tie a table’s data cells with their appropriate header. Each header must be given a unique id. The headers attribute is then added to each <td> element as shown in following listing.

<table summary=”Table of screws, Flat nails, Dyna-bolts and
Spring washers, in kilos”>
  <caption>
    Pricing for threaded screws, flat nails, dyna-bolts
and spring washers
  </caption>
  <thead>
    <tr>
      <th>Item</th>
      <th id=”screws” abbr=”screws”>Threaded
screws</th>
      <th id=”nails” abbr=”nails”>Flat nails</th>
      <th id=”bolts” abbr=”bolts”>Dyna-bolts</th>
      <th id=”washers” abbr=”washers”>Spring
      washers</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id=”one”>1 kg</th>
      <td headers=”screws one”>$2.50</td>
      <td headers=”nails one”>$3.50</td>
      <td headers=”bolts one”>$4.50</td>
      <td headers=”washers one”>$2.50</td>
    </tr>
    <tr>
      <th id=”two”>2kg</th>
      <td headers=”screws two”>$3.00</td>
      <td headers=”nails two”>$4.00</td>
      <td headers=”bolts two”>$5.00</td>
      <td headers=”washers two”>$3.00</td>
    </tr>
    <tr>
      <th id=”three”>3kg</th>
      <td headers=”screws three”>$3.50</td>
      <td headers=”nails three”>$4.50</td>
      <td headers=”bolts three”>$5.50</td>
      <td headers=”washers three”>$3.50</td>
    </tr>
    <tr>
      <th id=”four”>4kg</th>
      <td headers=”screws four”>$4.00</td>
      <td headers=”nails four”>$5.00</td>
      <td headers=”bolts four”>$6.00</td>
      <td headers=”washers four”>$4.00</td>
    </tr>
  </tbody>
</table>

Styling the Caption

An unstyled table caption will be displayed above the table. On most modern browsers the caption will be center aligned, but you can change the default caption alignment using text-align: left. To increase the space between the caption and its table, margin-bottom can be set to .5em.

The caption also can be given more weight to make it stand out from the table content. This is achieved using font-weight:bold as shown in following listing.

caption
{
    text-align: left;
    margin: 0 0 .5em 0;
    font-weight: bold;
}

The results can be seen in below figure.

Styling the <table> Element

Apply border-collapse: collapse to the <table> element to remove cellspacing as shown in following listing.

caption
{
    text-align: left;
    margin: 0 0 .5em 0;
    font-weight: bold;
}

table
{
border-collapse: collapse;
}

Styling the <th> and <td> Elements

Now the <th> and <td> elements need to be styled with a right and bottom border. Because the border will appear on all <td> and <th> elements, you can group both elements into one selector.

Applying a border is more powerful than using cellspacing because you can change the color or width of these borders at any time to suit your needs.

To apply padding to all cells, use padding: .5em as shown in following listing.

caption
{
    text-align: left;
    margin: 0 0 .5em 0;
    font-weight: bold;
}

table
{
border-collapse: collapse;
}

th, td
{
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: .5em;
}

Styling the <tr> Element

The <tr> element should be styled with a background-color as shown in following listing. This color can be changed to suit your needs.

caption
{
    text-align: left;
    margin: 0 0 .5em 0;
    font-weight: bold;
}table
{
    border-collapse: collapse;
}

th, td
{
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: .5em;
}

tr
{
background: #B0C4D7;
}

The results can be seen in below figure.

Styling the <th> Element

The next step is to create background colors for the <th> element. Using descendant selectors, it is possible to apply different colors to the <th> elements on the top and left side of the table.

The <th> elements across the top of the table are styled with thead th {…} because they appear inside the <thead> element.

The <th> elements down the side of the table are styled with tbody th {…} because they appear inside the <tbody> element.

The <th> elements down the side also can be set to font-weight: normal to differentiate them from the headers across the top as shown in following listing.

caption
{
    text-align: left;
    margin: 0 0 .5em 0;
    font-weight: bold;
}table
{
    border-collapse: collapse;
}

th, td
{
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: .5em;
}

tr
{
background: #B0C4D7;
}

thead th
{
background: #036;
color: #fff;
}

tbody th
{
font-weight: normal;
background: #658CB1;
}

The results can be seen in below figure.

Creating Alternate Row Colors

It is possible to style alternate table rows so that they have different background colors. This aids readability, especially on a long table.

One method is to add a class to every second <tr> element. In this case, the class is alternate. The <td> and <th> elements within these rows can be given a slightly different background color. The selectors will need to be tr.alternate td {…} and tr.alternate th {..} as shown in following listing.

caption
{
    text-align: left;
    margin: 0 0 .5em 0;
    font-weight: bold;
}table
{
    border-collapse: collapse;
}

th, td
{
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    padding: .5em;
}

tr
{
background: #B0C4D7;
}

thead th
{
background: #036;
color: #fff;
}

tbody th
{
font-weight: normal;
background: #658CB1;
}

tr.alternate
{
background: #D7E0EA;
}

tr.alternate th
{
background: #8AA9C7;
}

The results can be seen in below figure.

Posted in Basics of CSS...

Leave a comment

Chapter 9: Styling Links…

Jul 14

Posted by farukhaidar

Links and Pseudo-Classes

You have already learned how to style <a> or link elements in , Now you will learn how to style the five different link states.

Links can be in the following states:
Normal The standard unvisited link state
Visited The link points to a URI that has already been visited
Hover The cursor is over the active area of the link
Active The moment the link is selected or clicked
Focus The link is in focus and ready to accept input, such as a click or mouse down

Some link states cannot occur at the same time. For example, a link can either be visited or unvisitedit cannot be both. However, visited and unvisited links can also be in the hover, active, and focus states.

Each of these states can be styled individually using link pseudo-classes (classes that do not exist in the document structure). The five link pseudo-classes are

a:link Styles unvisited link elements
a:visited Styles visited link elements
a:focus Styles the state during focus
a:hover Styles the state when the cursor moves over a link
a:active Styles the state when a link is activated

The five pseudo-classes are shown in following listing.

a:link {…}
a:visited {…}
a:focus {…}
a:hover {…}
a:active {…}

Using Classes with Pseudo-Classes

Class selectors can be combined with pseudo-classes to create links for different purposes. For example, you might want to style links depending on whether they are internal or external.

A class could be added to all external links, and then these links could be styled using a combined class and pseudo-class selector as shown in following listing.

a:link
{
    color: blue;
}a:visited
{
    color: purple;
}a.external:link
{
    color: red;
    font-weight: bold;
}

a.external:visited
{
color: black;
font-weight: bold;
}

The results can be seen in below figure.

Styling Links with Background Images

Following on from the preceding example, it is possible to display a small icon beside every external link. The first step is to create basic rules for the required link states. In this case, you can use a:link, a:visited, and a:hover.

Three new states are then added, specifically for links styled with an “external” class. These are a.external:link, a.external:visited, and a.external:hover.

In each case, a background image is added to the link. The image is set to no-repeat so that it doesn’t tile across the background of the entire link. The position is set to 100%, which will place the right edge of the image against the right edge of the link.

A single background image is used for all three states. The vertical background-position needs to change for each state. This means that a single image is loaded and cached, so there is no lag when the rollover image is required.

The a:link state has been set to 0. The a:visited state has been set to 100px. The a:hover state has been set to 200px. The background image is shown in below figure.

Finally, padding has been used to push the link content away from the background image as shown in following listing.

a:link
{
color: blue;
}a:visited
{
color: purple;
}

a:hover
{
color: red;
}

a.external:link
{
background: url(chapter10.gif) no-repeat 100% 0;
padding-right: 20px;
}

a.external:visited
{
background: url(chapter10.gif) no-repeat 100% -100px;
padding-right: 20px;
}

a.external:hover
{
background: url(chapter10.gif) no-repeat 100% -200px;
padding-right: 20px;
}

The results can be seen in below figure.

Removing Underlines and Applying Borders

Some users, particularly those with poor eyesight, might find standard link underlines hard to read. This is particularly true for links that contain italic text.

One solution is to turn off text underlines and use borders. The first step is to set the text-decoration to none. This will turn off link underlines.

Next, the required states need to be colored. In this case, a:link is set to blue, a:visited is set to purple, and a:hover is set to red.

Finally, borders are added to each state using border-bottom as shown in following listing.

a
{
    text-decoration: none;
}a:link
{
    color: blue;
    border-bottom: 1px solid blue;
}

a:visited
{
color: purple;
border-bottom: 1px solid purple;
}

a:hover
{
color: red;
border-bottom: 1px solid red;
}

padding-bottom can be added to control the distance between the underline and the content, if required.

Increasing the Active Area of Links

For some users, particularly those with motor-skill difficulties, clicking on links can be difficult. Using CSS, the active area of links can be increased.

The first step is to add .5em of padding above and below the <a> element to increase the active area of a link. This is achieved using padding: .5em 0;.

Next, the <a> element should be set to position: relative, which will stop the padding from affecting surrounding text, as shown in following listing.

a
{
    padding: .4em 0;
    position:relative;
    z-index: 1;
    background: yellow;
}

The results can be seen in below figure.

To see the increased link area in action, you can apply a background color to the <a> element. This background color can be removed before it is applied in a real situation.

Posted in Basics of CSS...

Leave a comment

Chapter 8: Heading…

Jul 14

Posted by farukhaidar

Styling the Heading

To style this heading, you will need a selector that targets the <h1> element. To make sure you don’t target every <h1> on the page, you should also include a unique identifier, such as header, within the selector.

h1#header {…}

The HTML code used for this heading is shown in following listing.

<h1 id=”header”>
Page Heading
</h1>

Adding Color, Font Size, and Weight

To add a color to the heading, use the color property. The color can be changed to suit your needs. For this heading, you will set the font-size to 120% and the font-weight to normal, as shown in following listing.

h1#header
{
color: #036;

font-size: 120%;
font-weight: normal;
}

Setting Text Options

The next step is to center the heading, make it uppercase, and add some letter spacing. This can be achieved using the text-transform, text-align, and letter-spacing properties as shown in following listing.

h1#header
{
    color: #036;
    font-size: 120%;
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .5em;
}

The results can be seen in below figure. These options can be changed to suit your needs.

Applying Padding and Borders

To avoid placing the text hard against the borders, you will need to add some top and bottom padding. You can use the shorthand padding property, setting top and bottom padding to .4em, and left and right padding to 0.

To apply borders to the top and bottom of the heading, use the border-top and border-bottom properties as shown in following listing.

h1#header
{
    color: #036;
    font-size: 120%;
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .5em;
    padding: .4em 0;
    border-top: 1px solid #069;
    border-bottom: 1px solid #069;
}

The results can be seen in below figure. The borders can be removed or changed to suit your needs.

Adding a Background Image

To add a background image to the heading, use the background property. You can then specify the url and the repeat value as shown in following listing. In this case, the image is set to repeat-x, so it will repeat across the x axis only.

The results can be seen in below figure. The background image can be removed or changed to suit your needs.

Posted in Basics of CSS...

Leave a comment

Chapter 7: Formatting Text…

Jul 14

Posted by farukhaidar

Removing Font Elements

Instead of using <font> elements throughout a document, you should use CSS to style the content. This reduces the overall file size and makes future maintenance easier. All font-styling information can be stored in one external file, rather than scattered throughout every document in a website.

The <font> elements will be removed from the HTML markup as shown in following listing.

<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit…
</p>
<p>
    Ut wisi enim ad minim veniam, quis nostrud exerci…
</p>
<p>
    Duis autem vel eum iriure dolor in hendrerit vulputate…
</p>
    Ut wisi enim ad minim veniam, quis nostrud exerci…
</p>

The first paragraph will be styled with an introduction class because it will need additional styling.

Styling the <p> Element

The font family is set using the font-family property. A range or fonts should always be included, separated by commas. A generic font family must be included at the end of the list. If a user does not have the initial font family, his or her browser will look for the second font family. If no font family matches are found, the browser will fall back to the generic font family.

The font-size property will be set to 80%, which will make it 80% of the user’s default browser style. Using percentages will allow the user to control the overall size of fonts.

Finally, a line-height of 140% will be included to provide space between each line and make the text more readable. The default line-height for most browsers is 120%. Setting a value of 140% will add 20% additional space between each line. The rule set is shown in following listing.

p
{
    font-family: arial, helvetica, sans-serif;
    font-size: 80%;
    line-height: 140%;
}

Styling the First Paragraph

The first paragraph in this example will use different fonts than the other paragraphs. In this case, it will be styled with times, “times new roman”, serif. Fonts such as Times New Roman, which have spaces in their names, should always be wrapped in quotation marks.

The next step is to style the text italic and bold. This is achieved using font-style: italic; and font-weight: bold;.

To align the text in the center of the screen, use text-align: center.

The font size can be increased using font-size: 110%; and the font color can be set using color: #900; as shown in following listing.

p
{
    font-family: arial, helvetica, sans-serif;
    font-size: 80%;
    line-height: 1.4;
}p.introduction
{
    font-family: times, “times new roman”, serif;
    font-style: italic;
    font-weight: bold;
    text-align: center;
    font-size: 110%;
    color: #900;
}

The results are shown in below figure.

Converting to Shorthand

As discussed in Chapter 2, “CSS Syntax and Rules,” shorthand properties are easier to write and maintain than longhand properties. They also make CSS files more concise.

The <p> element can be styled so that font-size, line-height, and font-family are declared as a single font property.

The introduction class can be styled so that font-style, font-weight, font-size, line-height, and font-family are declared as a single font property as shown in following listing.

p
{
font: 80%/1.4 arial, helvetica, sans-serif;
}

p.introduction
{
    font: bold italic 110%/1.4 times, “times new roman”,
    serif;
    text-align: center;
    color: #900;
}

Posted in Basics of CSS...

Leave a comment

Chapter 6: Backgrounds…

Jul 14

Posted by farukhaidar

Adding background-image

The background-image property is used to add a background image to the <body> element. Values for the background-image property are either a url (to specify the image) or none (when no image is used).

For this chapter, you will use url. The image path can be written with or without quotation marks. The background-image code is shown in following listing.

body
{
background-image: url(chapter6.jpg);
}

The results can be seen in below figure.

Setting background-repeat

The background image in this chapter is now repeating across the screen. This can be controlled using background-repeat.

Values for the background-repeat property include repeat (where the image is repeated both horizontally and vertically), repeat-x (where the image is repeated horizontally only), repeat-y (where the image is repeated vertically only), and no-repeat (where the image is not repeated).

In this chapter, you will use repeat-y, as shown in following listing, to force the image to repeat vertically down the page.

body
{
background-image: url(chapter6.jpg);
background-repeat: repeat-y;
}

Adding background-position

Values for the background-position property include percentage (such as 0 100%), length (such as 2px 20px), and keywords (such as left top). In each case, the horizontal position is specified first, and then the vertical position. The values 0% 0% will position the upper-left corner of the image in the upper-left corner of the box’s padding edge. Values of 0 100% will position the bottom-left corner of the image in the bottom-left corner of the box’s padding edge. Values of 2px 20px will position the top-left corner of the image 2px in from the left edge of the box and 20px down from the top of the box.

If only one percentage or length value is given, it sets the horizontal position only and the vertical position will be 50%. If two values are given, the horizontal position comes first. Combinations of length and percentage values are allowed (such as 50% 2cm). Negative positions are also allowed (such as 20px 10px).

For this chapter, you will use percentage values of 100% 0, which will place the image in the right and top of the element. The code is shown in following listing.

body
{
    background-image: url(chapter6.jpg);
    background-repeat: repeat-y;
    background-position: 100% 0;
}

The image will now repeat down the right edge of the <body> element.

Adding padding

The final step will be to add padding to the <body> element to push the text away from the background-image. This can be achieved using the shorthand padding declaration padding: 1em 80px 1em 1em; as shown in following listing.

body
{
    background: url(chapter6.jpg) repeat-y 100% 0;
    margin: 0;
    padding: 1em 80px 1em 1em;
}

This will place 1em of padding on the top, bottom, and left of the <body> and 80px on the right edge. The results can be seen in below figure.

Posted in Basics of CSS...

Leave a comment

Chapter 5: Padding, Borders, and Margins…

Jul 14

Posted by farukhaidar

Basic Element Boxes

Block level elements are normally displayed as blocks with line breaks before and after. Examples of block level elements include paragraphs, headings, divs, and block quotes.

Inline elements are not displayed as blocks. The content is displayed in lines and there are no line breaks before and after. Examples of inline elements include emphasized text, strong text, and links. Examples of both block and inline elements are shown in below figure.

All block level and inline elements are boxes that use the box model. Both types of elements can be styled with box model properties such as margin, background-color, background-image, padding, and border as shown in below figure.

Some box model properties, such as height and width, do not apply to inline elements. Also, margin and padding applied to an inline element will affect content on either side, but not content above or below.

Setting Box Width

The width of an element is applied to the content area. Other measurements, such as padding, border, and margins, are added to this width.

For example, if an element is specified with width: 200px;, the content area is 200px wide. If padding, border, or margin are applied to the same element, their measurements are added to the overall width.

However, Internet Explorer 5 for Windows (and Internet Explorer 6 for Windows in some circumstances) will use a different method to set widths for boxes. If padding and border are applied to an element, their measurements are subtracted from the overall width. This is shown in below figure.

Margins

Margins can be applied to the outside of any block level or inline element. They create space between the edge of an element and the edge of any adjacent elements.

Margins can be applied to individual sides of a box as shown in following listing.

p { margin-top: 0; }
p { margin-right: 2em; }
h2 { margin-bottom: 3em; }
h3 { margin-left: 1em; }

Margins also can be applied using a single shorthand property. If one margin value is specified, it applies to all sides of an element as shown in following listing.

p { margin: 1em; }

If two values are specified, the top and bottom margins are set to the first value and the right and left margins are set to the second as shown in following listing.

p { margin: 1em 0; }

If three values are specified, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third as shown in following listing.

p { margin: 1em 0 2em; }

If four values are specified, they apply to the top, right, bottom, and left as shown in following listing.

p { margin: 1em 2em 2em 1em; }

Padding

Padding can be applied to the outside edges of the content area of any block level or inline element. Padding creates the space between the edge of the element and its content.

Like margins, padding can be applied to individual sides of a box as shown in following listing.

p { padding: 1em; }
h1 { padding-top: 0; }
h2 { padding-right: 2em; }
h2 { padding-bottom: 3em; }
h3 { padding-left: 1em; }

Padding also can be applied using a single shorthand property. If one padding value is specified, it applies to all sides of an element as shown in following listing.

p { padding: 1em; }

If two values are specified, the top and bottom margins are set to the first value and the right and left margins are set to the second as shown in following listing.

p { padding: 1em 0; }

If three values are specified, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third as shown in following listing.

p { padding: 1em 0 2em; }

If four values are specified, they apply to the top, right, bottom, and left as shown in following listing.

p { padding: 1em 2em 2em 1em; }

The border properties specify the width, color, and style of the border of an element. Shorthand border properties include border-top, border-bottom, border-right, border-left, and border as shown in following listing.

p { border-top: 1px solid red; }
p { border-right 1px solid red; }
p { border-bottom: 1px solid red; }
p { border-left: 1px solid red; }
p { border: 1px solid red; }

Posted in Basics of CSS...

Leave a comment

Chapter 4: Applying Styles…

Jul 14

Posted by farukhaidar

Applying Inline Styles

Inline styles can be applied directly to elements in the HTML code using the style attribute. However, inline styles should be avoided wherever possible because the styles are added to the HTML markup. This defeats the main purpose of CSS, which is to apply the same styles to as many pages as possible across your website using external style sheets. Styles that are applied inline can cause additional maintenance across a website because multiple pages might need changing rather than one CSS file.

An example of an inline style is shown in following listing.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
        “http://www.w3.org/TR/html4/strict.dtd”>
<html lang=”en”>
<head>
    <meta http-equiv=”content-type” content=”text/html;
    charset=utf-8″>
    <title>Chapter 4</title>
</head>
<body>
<p style=”font-family: arial, helvetica, sans-serif; margin:
1em;padding: 1em; background-color: gray; width: 10em;”>
    Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit…
</p>
</body>
</html>

Using Header Styles

Header styles also can be used to style the <p> element. The CSS rules can be placed in the head of the document using the style element. Like inline styles, header styles should be avoided where possible because the styles are added to the HTML markup rather than in external CSS files.

There are cases where header styles might be the preferred option in specific instances, such as a CSS rule that is specific to one page within a large website. Rather than add this rule to an overall CSS file, a header style may be used.

An example of a header style is shown in following listing. The type= “text/css” attribute must be specified within the style element in order for browsers to recognize the file type.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
    “http://www.w3.org/TR/html4/strict.dtd”>
<html lang=”en”>
<head>
    <meta http-equiv=”content-type” content=”text/html;
    charset=utf-8″>
    <title>Chapter 4 – listing</title>
<style type=”text/css” media=”screen”>
    p
    {
        font-family: arial, helvetica, sans-serif;
        margin: 1em;
        padding: 1em;
        background-color: gray;
        width: 10em;
    }
</style>
</head>
<body>
<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit…
</p>
</body>
</html>

Using External Style Sheets

External style sheets are the most appropriate method for styling documents. If styles need to be changed, the modifications can take place in one CSS file rather than all HTML pages. To change the header style to an external style, move the rule set to a new CSS file as shown in following listing.

p
{
    font-family: arial, helvetica, sans-serif;
    margin: 1em;
    padding: 1em;
    background-color: gray;
    width: 10em;
}

Next, link to this style sheet from your HTML file using the link element as shown in following listing.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
        “http://www.w3.org/TR/html4/strict.dtd”>
<html lang=”en”>
<head>
    <meta http-equiv=”content-type” content=”text/html;
    charset=utf-8″>
    <title>Chapter 4</title>
    <link rel=”stylesheet” href=”style.css” type=”text/css”
    media=”screen”>
</head>
<body>
<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit…
</p>
</body>
</html>

@import Styles

Header and external style sheets also can import other style sheets using the @import rule as shown in following listing. The @import rule must be placed before all other rules in the header or external style sheet.

@import “advanced.css”;

p
{
    font-family: arial, helvetica, sans-serif;
    margin: 1em;
    padding: 1em;
    background-color: gray;
    width: 10em;
}

Posted in Basics of CSS...

Leave a comment

Chapter 3: Selectors…

Jul 14

Posted by farukhaidar

Class Selectors

Class selectors can be used to select any HTML element that has been given a class attribute.

<body>
<div id=”content”>
    <h1>
      Heading here
    </h1>
    <p>
      Lorem ipsum dolor sit amet.
    </p>
    <p>
      Lorem ipsum dolor <a href=”#”>sit</a> amet.
    </p>
</div>
<div id=”nav”>
    <ul>
      <li><a href=”#”>item 1</a></li>
      <li><a href=”#”>item 2</a></li>
      <li><a href=”#”>item 3</a></li>
    </ul>
</div>
<div id=”footer”>
  Lorem ipsum dolor <a href=”#”>sit</a> amet.
</div>
</body>

In the above HTML sample, there are two HTML elements with class attributes<p> and <a href=”#”>. For example, to select all instances of the intro class, the .intro selector is used as shown in following listing.

.intro
{
font-weight: bold;
}

You also can select specific instances of a class by combining type and class selectors. For example, you might want to select the <p> and the <a href=”#” class=”intro”> separately. This is achieved using p.intro and a.intro as shown in following listing.

p.intro
{
color: red;
}

a.intro
{
color: green;
}

ID Selectors

ID selectors are similar to class selectors. They can be used to select any HTML element that has an ID attribute. However, each ID can be used only once within a document, whereas classes can be used as often as needed.

In this chapter, IDs are used to identify unique parts of the document structure, such as the content, navigation, and footer.

In the HTML sample shown in there are three IDs: <div id=”content”>, <div id=”nav”>, and <div id=”footer”>. To select <div id=”nav”>, the #nav selector is used as shown in following listing.

#nav
{
color: blue;
}

Classes can be used as many times as needed within a document. IDs can be applied only once within a document. If you need to use the same selector more than once, classes are a better choice.

Descendant Selectors

Descendant selectors are used to select elements that are descendants of another element.

For example, in the HTML sample shown in , three <a> elements are descendants of the <li> elements. To target these three <a> elements only, and not all other <a> elements, a descendant selector can be used as shown in following listing. This selector targets any <a> element that is nested inside an <li> element.

li a
{
color: green;
}

Descendant selectors do not have to use direct descendant elements. For example, the <a> element is a descendant of <div id=”nav”> as well as the <li> element. This means that #nav a can be used as a selector as well.

#nav a
{
color: red;
}

Descendant selectors also can include multiple levels of descendants to be more specific as shown in following listing.

#nav ul li a
{
color: green;
}

Universal Selectors

Universal selectors are used to select any element. For example, to set the margins and padding on every element to 0, * can be used as shown in following listing.

*
{
margin: 0;
padding: 0;
}

Universal selectors also can be used to select all elements within another element as shown in following listing. This will select any element inside the <p> element.

p *
{
color: red;
}

Advanced Selectors

Child selectors are used to select an element that is a direct child of another element (parent). Child selectors will not select all descendants, only direct children. For example, you might want to target an <em> that is a direct child of a <div>, but not other <em> elements that are descendants of the <div>. The selector is shown in following listing.

div > em
{
color: blue;
}

Adjacent sibling selectors will select the sibling immediately following an element. For example, you might want to target an <h3> element, but only <h3> elements that immediately follow an <h2> element. This is a commonly used example because it has a real-world application. There is often too much space between <h2> and <h3> elements when they appear immediately after each other. The selector is shown in following listing.

h2 + h3
{
margin: -1em;
}

Attribute selectors are used to select elements based on their attributes or attribute value. For example, you might want to select any image on an HTML page that is called “small.gif” as shown in following listing.

img[src=”small.gif”]
{
border: 1px solid #000;
}

Pseudo-elements enable you to style information that is not available in the document tree. For instance, using standard selectors, there is no way to style the first letter or first line of an element’s content. However, the content can be styled using pseudo-elements as shown in following listing.

p:first-line
{
font-weight: bold;
}

p:first-letter
{
font-size: 200%; font-weight: bold;}

Posted in Basics of CSS...

Leave a comment

Raja_puri

Faruk Haidar

Category Archives: Basics of CSS…

Styling the List

Styling the <ul> Element

Styling the <li> Element

Styling the <a> Element

Styling the :hover Pseudo Class

Styling the List

Styling the <ul> Element

Styling the <a> Element

Adding a Hover Effect

Styling the <li> Element

Basic Table

Adding Accessibility Features

Styling the Caption

Styling the <table> Element

Styling the <th> and <td> Elements

Styling the <tr> Element

Styling the <th> Element

Creating Alternate Row Colors

Links and Pseudo-Classes

Using Classes with Pseudo-Classes

Styling Links with Background Images

Removing Underlines and Applying Borders

Increasing the Active Area of Links

Styling the Heading

Adding Color, Font Size, and Weight

Setting Text Options

Applying Padding and Borders

Adding a Background Image

Removing Font Elements

Styling the <p> Element

Styling the First Paragraph

Converting to Shorthand

Adding background-image

Setting background-repeat

Adding background-position

Adding padding

Basic Element Boxes

Setting Box Width

Margins

Padding

Applying Inline Styles

Using Header Styles

Using External Style Sheets

@import Styles

Class Selectors

ID Selectors

Descendant Selectors

Universal Selectors

Advanced Selectors

Recent Posts

Recent Comments

Archives

Categories

Meta