Aligning Inline Elements Vertically

The vertical-align property is meant for aligning inline elements to a common element on the same line. For example, you might want to align text to the top, middle, baseline, or bottom  of larger text or image on the same line.

These are the valid property-value pairs:

vertical-align:top — Align to the top of the line. If the height of the line is taller than the common element, this location is higher than vertical-align:text-top. If the line height is the same, top and text-top are the same location.

vertical-align:text-top — Align to the top of text characters with accents such as á and Á. This location is the same whether the characters actually have accents or not.

vertical-align:middle — Align to the middle of the letter x.

vertical-align:baseline — Align to the baseline, which is the bottom of characters that do not have descenders such as the letter A.

vertical-align:bottom – Align to the bottom of the line. If the height of the line is lower than the common element, this location is lower than vertical-align:text-bottom. If the line height is the same, top and text-bottom are the same location.

vertical-align:text-bottom — Align to the bottom of the text, which includes the bottom of characters that have descenders such the letter g. This location is the same whether the characters actually have descenders or not.

Example 1

This example aligns text to the text-top, middle, baseline, and text-bottom of the common element, which is a graphic followed by large text in white with a blue background. Characters with accents and descenders are used so you can see how they align. Example 2 shows how they align with top and bottom are used in place of text-top and text-bottom.

CSS

Note that the line height (80px) t is taller than the common element (60px) , and in this e

div{border: 1px solid #00008b; font-size:60px;}
*.main{background-color: #00008b; color:#ffffff; line-height:80px;}
*.text{font-size:18px;}
*.top{vertical-align:text-top;}
*.middle{vertical-align:middle;}
*.baseline{vertical-align:baseline;}
*.bottom{vertical-align:text-bottom;}

HTML

<div>
<span class="main">
<img src="kangarooflowerthumbsmall.gif" />
ÁáxXg</span>
<span class="top text">áÁ</span>
<span class="top text">Top</span>
<span class="middle text">Middle</span>
<span class="baseline text">Baseline</span>
<span class="bottom text">Bottom</span>
</div>

Example 2

This example aligns text to the middle and baseline of the common element, which is a graphic followed by large text in white with a blue background.  It also uses top and bottom to align the text to the top and bottom on the line, which is taller and lower than the common element. Characters with accents and descenders are used so you can see how they align. Notice that aligning to top and bottom align higher and lower, respectively, than text-top and text-bottom in Example 1.

CSS

div{border: 1px solid #00008b; font-size:60px;}
*.main{background-color: #00008b; color:#ffffff; line-height:80px;}
*.text{font-size:18px;}
*.top{vertical-align:top;}
*.middle{vertical-align:middle;}
*.baseline{vertical-align:baseline;}
*.bottom{vertical-align:bottom;}

HTML

<div>
<span class="main">
<img src="kangarooflowerthumbsmall.gif" />
ÁáxXg</span>
<span class="top text">áÁ</span>
<span class="top text">Top</span>
<span class="middle text">Middle</span>
<span class="baseline text">Baseline</span>
<span class="bottom text">Bottom</span>
</div>

Source Code

<html>
<head><title>Vertical Centering</title>
<style type='text/css'>
body{}
div{border: 1px solid #00008b; font-size:60px;}
*.main{background-color: #00008b; color:#ffffff; line-height:80px;}
*.text{font-size:18px;}
*.top{vertical-align:top;}
*.middle{vertical-align:middle;}
*.baseline{vertical-align:baseline;}
*.bottom{vertical-align:bottom;}
</style>
</head>
<body>

<div>
<span class="main">
<img src="kangarooflowerthumbsmall.gif" />
ÁáxXg</span>
<span class="top text">áÁ</span>
<span class="top text">Top</span>
<span class="middle text">Middle</span>
<span class="baseline text">Baseline</span>
<span class="bottom text">Bottom</span>
</div>
</body>
</html>

November 30, 2009 at 8:00 am Leave a comment

Indenting Text

The text-indent property provides an easy way to indent or outdent the first line of a paragraph, table cell, division, heading, or list item. Combining text-indent and a negative value with left padding creates an outdent.

CSS

/* indents first line */
*.indent{text-indent:60px;} 

/* indents entire paragraph on the left and right */
*.fullparaindent{padding-left:60px; padding-right:60px;}

/* outdents first line */
*.outdent{text-indent:-60px;}

HTML

<p class="indent">

The word cryptography comes from the Greek words kryptos meaning hidden and graphein meaning writing. Cryptography is the study of hidden writing, or the science of encrypting and decrypting text.

</p>

<p class="fullparaindent">

Nineteenth century scholars decrypted ancient Egyptian hieroglyphics when Napoleon’s soldiers found the Rosetta Stone in 1799 near Rosetta, Egypt. Its inscription praising King Ptolemy V was in three ancient languages: Demotic, hieroglyphics, and Greek. The scholars who could read ancient Greek, decrypted the other languages by translating the Greek and comparing the three inscriptions.

</p>
<p class="fullindent outdent">

In the twentieth century world of computer networks, messages are digitally encrypted on the sending side and decrypted on the receiving side using cryptographic services and algorithms. Algorithms are mathematical techniques or rules that apply a cryptographic service to a message. Cryptographic services include hashing a message, encrypting and decrypting a message, and signing or verifying the signature on a message. A message digest object uses a hashing algorithm to make a hash digest of the original message, key pairs use a key algorithm compatible with the hashing algorithm to encrypt and decrypt the message, and a signature object uses the key pairs to sign and verify the signature on a message.

</p>

What it Looks Like

Adding a Spacer

If you want to add a space within inline content, you can do that with a spacer:

CSS

*.spacer{margin-left:10px;}

HTML

<p>

&rarr; The Java Cryptography Architecture (JCA) framework in the Java Development Kit (JDK) 1.2 provides a full range of cryptographic services and algorithms to keep messages sent over the network secure. &rarr; The framework is extensible and interoperable. &rarr; Not only can you add cryptographic service implementations by different vendors to the framework, but, for example, the signature service implementation by one vendor will work seamlessly with the signature service implementation by another vendor as long as both vendors’ implementations use the same signature algorithm. &rarr; Given how implementations can vary from vendor to vendor, the flexibility built into the JCA framework lets you choose an implementation that best meets your application requirements.

</p>

What it Looks Like

Code

<html>
<head><title>Text Indent</title>
<style type=’text/css’>

body{padding:10px; border:1px solid #00008b;}
*.indent{text-indent:60px;}
*.fullindent{padding-left:60px; padding-right:60px;}
*.outdent{text-indent:-60px;}
*.spacer{margin-left:10px;}

</style>
</head>
<body>

<p>
The word cryptography comes from the Greek words kryptos meaning hidden and graphein meaning writing. Cryptography is the study of hidden writing, or the science of encrypting and decrypting text.
</p>

<p>
Nineteenth century scholars decrypted ancient Egyptian hieroglyphics when Napoleon’s soldiers found the Rosetta Stone in 1799 near Rosetta, Egypt. Its inscription praising King Ptolemy V was in three ancient languages: Demotic, hieroglyphics, and Greek. The scholars who could read ancient Greek, decrypted the other languages by translating the Greek and comparing the three inscriptions.
</p>

<p>
In the twentieth century world of computer networks, messages are digitally encrypted on the sending side and decrypted on the receiving side using cryptographic services and algorithms. Algorithms are mathematical techniques or rules that apply a cryptographic service to a message. Cryptographic services include hashing a message, encrypting and decrypting a message, and signing or verifying the signature on a message. A message digest object uses a hashing algorithm to make a hash digest of the original message, key pairs use a key algorithm compatible with the hashing algorithm to encrypt and decrypt the message, and a signature object uses the key pairs to sign and verify the signature on a message.
</p>

<p>
&rarr; The Java Cryptography Architecture (JCA) framework in the Java Development Kit (JDK) 1.2 provides a full range of cryptographic services and algorithms to keep messages sent over the network secure. → The framework is extensible and interoperable. → Not only can you add cryptographic service implementations by different vendors to the framework, but, for example, the signature service implementation by one vendor will work seamlessly with the signature service implementation by another vendor as long as both vendors’ implementations use the same signature algorithm. → Given how implementations can vary from vendor to vendor, the flexibility built into the JCA framework lets you choose an implementation that best meets your application requirements.
</p>

<p>
Read the full article, monica/articles/crypto/”>Cryptography: The Ancient Art of Secret Messages
</body>
</html>

Read the full article, Cryptography: The Ancient Art of Secret Messages

November 23, 2009 at 12:00 am 4 comments

Vertical Centering

It’s possible, although a little tricky, to center text or an image along the vertical axis of the page or within a box. Centering text and images horizontally is easily done with the text-align:center setting, which is used in the examples below for that exact purpose. The discussion focuses on achieving the vertical centering.

On the Page

Centering something on the page uses absolute positioning so you can set values for the parent in relation to the top and left sides of the viewport.

Vertically Centered Text

In this example text is vertically centered on the page inside an absolutely positioned box.

CSS

The text is moved to the middle of the page vertically by setting top:50%, and is moved to the center of the page by setting width:100% and text-align:center.  I included the box border so it is easier to see what is happening on the page.

body{font-size:14px;}
*.box{position:absolute; width:100%; border: 1px solid #8b0000;
  top:50%; left:0; text-align:center;}

HTML

The box and positioning settings are applied to the parent div of the text to get the vertical centering.

<div class="box">Vertically Centered Text</div>

What it Looks Like

Vertically Centered Image

An image is done the same way as the text, except that instead of text, you provide an image.

CSS

body{font-size:14px;}
*.box{position:absolute; width:100%;
  border: 1px solid #8b0000;
  top:50%; left:0; right:0; text-align:center;}

HTML

<div class="box">
<img src="kangarooflowerthumbsmall.gif" height="38px"
 width="50px" />
</div>

What it Looks Like

Within a Box

Centering something within a box on the page involves a fixed height and width and some calculations to work out the top margin setting to push the text or image down far enough so it is centered vertically.

Vertically Centered Text

To vertically center text within a box requires font-size, box height, box width, and margin-top settings preferably in the same units so you can make calculations to figure out how far down you need to push the text from the top of the box. I used pixels for the example.

The box has a border so you can see how the text centers within it. You can use this method to create buttons, boxes, divisions, and so on.

CSS

The text is nested within a fixed height and width box. The textbox is set to 100% height and width of it’s parent. The margin-top value is calculated for the textbox by halving the fixed height of the parent (200px/2px = 100px) and subtracting half the height of the font-size (100px – 7px  = 93 px), and subtracting the border width (93px – 1 px = 92px).

Note: Both box2 and textbox must use absolute positioning to work in Internet Explorer.

body{font-size:14px;}
*.box2{position:absolute; height:200px; width:200px; border:1px solid #8b0000;}
*.textbox{position:absolute; text-align:center;  margin-top:92px;
  height:100%; width:100%;}

HTML

The textbox is nested within the fixed height and width parent box. The margin-top setting of the textbox centers it vertically within its parent box.

<div class="box2">
<div class="textbox">Vertically Centered Box Text
</div>
</div>

What it Looks Like

Vertically Centered Image

An image is done the same way as the text, except that instead of text, you provide an image and the margin-top calculation does not take the border into account because the image sits inside the border.

CSS

The margin-top value is half the parent height (200px/2px = 100px) minus half the height of the image (100px – 19px = 81px).

Note: Both box2 and textbox must use absolute positioning to work in Internet Explorer.

body{font-size:14px;}
*.box2{position:absolute; height:200px; width:200px; border:1px solid #8b0000;}
*.imagebox{position:absolute; text-align:center;  margin-top:81px;
  height:100%; width:100%;}

HTML

<div class="box2">
<div class="imagebox">
<img src="kangarooflowerthumbsmall.gif" height="38px" width="50px" />
</div>
</div>

What it Looks Like

Code

Source Code

<html>
<head><title>Vertical Centering</title>
<style type='text/css'>

body{font-size:14px;}
*.box{position:absolute; width:100%; border: 1px solid #8b0000;
 top:50%; left:0;  text-align:center; }
 
*.box2{position:absolute; height:200px; width:200px; border:1px solid #8b0000;}
*.textbox{position:absolute; text-align:center;  margin-top:92px; height:100%; width:100%;}
*.imagebox{position:absolute; text-align:center; margin-top:81px; height:100%; width:100%;}

</style>
</head>
<body>

<div>
Vertically Centered Text
 <!-- <img src="kangarooflowerthumbsmall.gif" height="38px" width="50px" /> -->
</div>


<div>
<div>
Vertically Centered Box Text
</div>
</div>

<div>
<div>
<img src="kangarooflowerthumbsmall.gif" height="38px" width="50px" />
</div>
</div>


</body>
</html>

 

November 18, 2009 at 12:00 am 3 comments

Centering

Have you ever struggled with centering text, elements, or both? It can be a little tricky, but knowing a few basics can help you get the page to look exactly the way you want it to look. This blog explains how.

Centered Body Page Text

If you want all text on the page centered, add text-align:center to the body style.

CSS

The following page body styles centers white text within the left and right margins. The left margin is 100px and the right margin is auto by default because it is not specified.

body{color:#ffffff; font-family:arial; background-color:#969696;
     margin-left:100px; text-align:center;}

HTML

This is what the HTML looks like:

<h1>Centering</h1>

<p>
The pullover and cardigan sweater instructions assume you have an intermediate knowledge of crochet or knitting. This means you know how to work to gauge, increase, decrease, match pieces, and sew pieces together. If you have this background, it is not difficult to design your own pullover sweater to fit the way you want. You will need an old sweater that fits you the way you want, a stitch you like, yarn you like that works with the stitch, and a little know-how.
</p>

And it renders like this with headings and text centered within the page margins:

bodycenter

Centered Element Text

You can also use the text-align:center style to center text within a specific element, rather than the whole page.

CSS

The following style settings move the text-align:center style from the body tag to it’s own textbox style. The body page has a left and right margin of 10 pixels in this example.

body{color:#ffffff; font-family:arial; background-color:#969696;
     margin:10px; }
*.textbox{text-align:center;}

HTML

This is what the HTML looks like:

<h1>Centering</h1>

<div class=”textbox”>
The pullover and cardigan sweater instructions assume you have an intermediate knowledge of crochet or knitting. This means you know how to work to gauge, increase, decrease, match pieces, and sew pieces together. If you have this background, it is not difficult to design your own pullover sweater to fit the way you want. You will need an old sweater that fits you the way you want, a stitch you like, yarn you like that works with the stitch, and a little know-how.
</div>

And it renders like this with a left-aligned heading and text centered within the text box. The text box does not have left and right margin settings so it stretches the width of the page, but sits within the page left and right margins of 10 pixels.

textboxcenter

Centered Elements

You can size and center an element on the body page or within another element. There are two basic approaches to centering any element:

1. Specify the width and let the browser calculate the left and right margins:

*.center{border: 1px solid #000000;
  padding:3px; text-align:center;
  width: 200px; margin-left:auto; margin-right:auto;}
centerelement

2. Specify the margins and let the browser calculate the width:

*.center1{border: 1px solid #000000;
  padding:3px;  text-align:center;
  width: auto; margin-left:100px; margin-right:100px;}
centerelement1

You can center an element within another element. This examples horizontally centers text within a textbox that is horizontally centered within a parent box that is horizontally centered on the page.

CSS

*.center{border: 1px solid #00008b; padding:30px; height:auto; width:50%;
 margin-left:auto; margin-right:auto;}

*.textbox{border: 1px solid #000000; padding:3px;
 height:auto; width:auto; text-align:center;}

HTML

<div class=”center”>
<div class=”textbox”>
The pullover and cardigan sweater instructions assume you have an intermediate knowledge of crochet or knitting. This means you know how to work to gauge, increase, decrease, match pieces, and sew pieces together. If you have this background, it is not difficult to design your own pullover sweater to fit the way you want. You will need an old sweater that fits you the way you want, a stitch you like, yarn you like that works with the stitch, and a little know-how
</div>
</div>

And it looks like this:

concentric

If you change the parent box to use absolute or fixed positioning, you can use left, right, top, and/or bottom to position it against the respective border of the view port if you used fixed positioning or of its parent if you used absolute positioning.

CSS

In this example, the parent uses fixed positioning with the bottom:0 property so the concentric elements and text sit  on the bottom border of the view port. You can read about positioned elements by browsing the Positioning Elements category of this blog.

*.center{position:fixed; bottom:0; left:0; border: 1px solid #00008b; padding:30px; height:auto; width:50%;
 margin-left:auto; margin-right:auto;}

*.textbox{border: 1px solid #000000; padding:3px;
 height:auto; width:auto; text-align:center;}

HTML

<div>
<div>
The pullover and cardigan sweater instructions assume you have an intermediate knowledge of crochet or knitting. This means you know how to work to gauge, increase, decrease, match pieces, and sew pieces together. If you have this background, it is not difficult to design your own pullover sweater to fit the way you want. You will need an old sweater that fits you the way you want, a stitch you like, yarn you like that works with the stitch, and a little know-how
</div>
</div>

And it looks like this:

anchored

November 3, 2009 at 12:00 am 1 comment

Styling Background Images

Background images are positioned behind elements with the background property.  The background property has the following style values that can be specified in one line and in any order like this:

*.image{background:none transparent repeat left top scroll;}

or with property-value pairs  in any order, like this:

*.image{background-image:none; background-color:transparent;
background-repeat:repeat; background-position:left top;
background-attachment:scroll;}

Default Settings

The background values all have default settings as described here and covered in more detail below.

  • none: no image
  • transparent: no background color
  • repeat: the background image tiles in the x and y directions
  • left top: the tiling starts in the top-left corner and goes from left to right one row at a time
  • scroll: the image scrolls with the element when the  viewport has scroll bars.

Background Image

The default is no background image. A background image is specified with a URL as follows:

*.image{background-image:url("theimage.extension");}

CSS

These CSS style declarations create a containing block for an image that tiles the full height and width of the block.

div{height:100%; width:100%;}
*.image{background-image:url("kangarooflowerthumb.gif");}

HTML

<div class="image">
</div>

How it Looks

This screen capture shows a portion of the page. In reality, the CSS settings have the background image tiling the entire height and width of the page because the height and width of the div are both set to 100%.

tiled

Background Color

It’s always a good idea to specify a background color in case the image does not load. The background color should work with the text color so you do not end up with a very-hard-to-read page with something like a very light blue text against a white background. You can also use a background color in place of a background image or to complement the background image. In any case, always keep in mind how the page will look if the image does not load for some reason or another.

This example shows white text against a medium gray background color. I’ll add the image in the next section, but you can see that if the image does not load the text is perfectly readable against the background color.

CSS

Text color is white (#ffffff) and page background color is medium gray (#969696).

body{color:#ffffff; font-family:arial; background-color:#969696;
     margin:0;}
div{height:100%; width:100%; padding:10px;}
*.text{width:80%;}

HTML

<div class=”text”>
Red and green kangaroo paws are native to Perth, Western Australia, where the weather tends to be warm all year round. I remember the first time I saw them.  It must have been exactly the right time of year because hundreds were blooming in a Eucalyptus grove in the middle of Kings Park. Their soft, velvety red and green “fur” fascinated me, and when I moved back to the United States and eventually bought a house, I wanted to try to grow them. San Jose, California, has an extreme climate, but I have succeeded in growing them outside in pots placed in a protected area.
</div>

How it Looks

bgcolor

Position & Repeat Along Y-Axis

In this section, I’ll add the background image, make it repeat vertically along the y-axis, and position it to the right of the text.

CSS

The repeat-y value tells the browser to repeat the image  in a column along the y-axis. The positioning values of top right mean the image rendering starts with the top-right corner of the image flush with the top-right corner of the viewport and repeats down along the y-axis.

body{color:#ffffff; font-family:arial; background-color:#969696;
     margin:0;}
*.art{background-image: url("kangarooflowerthumb.gif");}
*.repeat{background-repeat:repeat-y;}
*.position{background-position:top right;}
div{height:100%; width:100%; padding:10px;}
*.text{width:80%;}

HTML

<div class=”art repeat position”>
<div class=”text”>
Red and green kangaroo paws are native to Perth, Western Australia, where the weather tends to be warm all year round. I remember the first time I saw them. It must have been exactly the right time of year because hundreds were blooming in a Eucalyptus grove in the middle of Kings Park. Their soft, velvety red and green “fur” fascinated me, and when I moved back to the United States and eventually bought a house, I wanted to try to grow them. San Jose, California, has an extreme climate, but I have succeeded in growing them outside in pots placed in a protected area.</div>
</div>

How it Looks

repeat

Attachment

The default value for attachment is scroll, which means the image scrolls with its containing block. That means, if you resize the page so that you get scroll bars along the bottom or the side and scroll, the image and text scroll together. If you change the value to fixed (background-attachment:fixed), the image is attached to the viewport. This means that if you resize the page so that you get scroll bars, the text scrolls over the image.

CSS

body{color:#ffffff; font-family:arial; background-color:#969696;
     margin:0;}
*.art{background-image: url("kangarooflowerthumb.gif");}
*.repeat{background-repeat:repeat-y;}
*.position{background-position:top right; }
*.attach{background-attachment:fixed;}
div{height:100%; width:100%; padding:10px;}
*.text{width:80%;}

HTML

<div class=”art repeat position”>
<div class=”text”>
Red and green kangaroo paws are native to Perth, Western Australia, where the weather tends to be warm all year round. I remember the first time I saw them. It must have been exactly the right time of year because hundreds were blooming in a Eucalyptus grove in the middle of Kings Park. Their soft, velvety red and green “fur” fascinated me, and when I moved back to the United States and eventually bought a house, I wanted to try to grow them. San Jose, California, has an extreme climate, but I have succeeded in growing them outside in pots placed in a protected area.</div>
</div>

How it Looks

attachfixed

Final Code

See my web site for more information on Kangaroo Paws.

<head><title>Using Background Images</title>
<style type='text/css'>
body{color:#ffffff; font-family:arial; background-color:#969696;
     margin:0;}
*.art{background-image: url("kangarooflowerthumb.gif");}
*.repeat{background-repeat:repeat-y;}
*.position{background-position:top right; }
*.attach{background-attachment:fixed;}
div{height:100%; width:100%; padding:10px;}
*.text{width:80%;}
</style>
</head>
<body>
<div class="art position repeat">
<div class="text">

Red and green kangaroo paws are native to Perth, Western Australia, where the weather tends to be warm all year round. I remember the first time I saw them.  It must have been exactly the right time of year because hundreds were blooming in a Eucalyptus grove in the middle of Kings Park. Their soft, velvety red and green “fur” fascinated me, and when I moved back to the United States and eventually bought a house, I wanted to try to grow them. San Jose, California, has an extreme climate, but I have succeeded in growing them outside in pots
placed in a protected area.

</div>
</div>
</body>
</html>

October 21, 2009 at 12:00 am 1 comment

Styling Attributes

Have you ever wanted to style a specific attribute?  For example, you could make all tables using the border attribute have a border with a given color. This way, each table could have a different border width, but the border would be the same color. Or you could do something like make every image with a title attribute have the same margin and padding settings.

This blog explains two ways to style attributes.

Example 1

This example shows how you could give a number of tables with borders of different widths  the same color border with one line of CSS.

CSS

The first line uses square brackets around the border attribute on a table to specify a green border  and a light gray background. The next two lines specify styles that apply to all table and table column (td) elements.

table[border] {border-color:#008b00; background-color:#cccccc;}
table{width:30%; height:15%;}
td{text-align:center;}

Table Code

This is what the table code looks like.

Table 1 has a 2px border plus all the table styles specified in the CSS. Because table as the border attribute, the border and background color settings are applied to the table.

<table border="2px">
<tr><th>Head 1</th><th>Head 2</th></tr>
<tr><td>Row 1 Col 1</td><td>Row 2 Col 2</td></tr>
</table>

Table 2 has a 4px border plus all the table styles specified in the CSS including the border attribute styles:

<table border="4px">
<tr><th>Head 1</th><th>Head 2</th></tr>
<tr><td>Row 1 Col 1</td><td>Row 2 Col 2</td></tr>
</table>

What it Looks Like

You get two tables with the same style settings that allows for the border width to be set directly on the table, and thereby specific to each table, but styled consistently with one line of CSS.

tableborderattribute

Example 2

Maybe you have a lot of tables with 2px and 4px borders and you want to style all the 2px borders one way and all the 4px borders another. You can do that by using the syntax that lets you select on a specific word.

This example shows you how to make all 2px borders green with a light gray background and all 4px borders red with a light gray background.

CSS

The first two lines use square brackets around the border attribute on a table to specify the  border  background colors. They also include the tilde-equals (~=) syntax to say that every border attribute that includes the word, 2px, has the specified  set of styles and every border attribute that includes the word, 4px, has a different set of styles.

table[border~="2px"] {border-color:#008b00; background-color:#cccccc;}
table[border~="4px"] {border-color:#8b0000; background-color:#cccccc;}
table{width:30%; height:15%;}
td{text-align:center;}

Table Code

Same as before:

<table border="2px">
<tr><th>Head 1</th><th>Head 2</th></tr>
<tr><td>Row 1 Col 1</td><td>Row 2 Col 2</td></tr>
</table>

<table border="4px">
<tr><th>Head 1</th><th>Head 2</th></tr>
<tr><td>Row 1 Col 1</td><td>Row 2 Col 2</td></tr>
</table>

What it Looks Like

The 2px table border is green and the 4px table border is red.

tablebordertwoattributes

October 8, 2009 at 12:00 am 5 comments

CSS Selectors & Elements

This blogs explains how to use type, class, and ID to style elements within a document. It also explains how you can select elements according to whether they are descendants, children, or siblings of other elements.

Type

The type is the element itself, such as p or h1. For example, the below CSS declarations states that all elements of type p are indented on the left by 15px and all elements of type h1 are blue.

p{margin-left:15px;
h1{color:#00008b;}

<p>This paragraph is idented by 15px on the left.</p>
<h1>This heading is Blue</h1>

Class

A class is a CSS style description of a group of elements that might be the same kind or of mixed kinds. For example, the below CSS declaration states that all paragraph elements of in the class green have green text and any element assigned to the class centered has centered text.

p.green{color:#009900;}
*.centered{text-align:center;}

<p class="green">
This paragraph has green text
</p>

<p class=”centered”>

This paragraph has centered text.

</p>

<p class=”green centered”>

This paragraph has green centered text.

</p>

ID

An ID uniquely identifies an element. An ID is assigned to one element only, and any element should have zero or one ID, but not two or more IDs. An ID can also be used as an anchor that can be targeted by other links or used to access and manipulate a specific element from JavaScript or a document processor.

#.abstract{margin-left:10px; margin-right:10px;}

<p id=”abstract”>This paragraph is identified as the abstract for the document. A JavaScript program can locate it and do something like add this paragraph to a list of abstracts for a series of documents. The paragraph is indented 10px on the left and right.</p>

Cascade Order

When multiple selectors select the same element, the styles from each selector are applied. In the case where the styles conflict, the higher cascade order prevails. IDs prevail over classes and classes prevail over types. If you use multiple style sheets in one document, ID selectors prevail over all classes and types in all style sheets.

*.bluetext{color:#000099;}
#.abstract{margin-left:10px; margin-right:10px; color:#990000;}

<p id=”abstract” class=”bluetext”>In this case the paragraph has both an ID and a class and each specifies a setting for the text color. Class says the color is blue and ID says the color is red. The color specified by the ID takes precedence because it has a higher cascade order.</p>

*.bluetext{color:#000099;}
*.abstract{margin-left:10px; margin-right:10px; color:#990000;}

<p class=”abstract bluetext”>In this case both abstract and bluetext are classes and have equal cascade order. The text is red because abstract is listed after bluetext in the styles.</p>

Group Selectors

You can apply the same styles to a group of selectors by separating the selectors with a comma. In this example all p, ol, and ul elements use the Arial font.

p, ol, ul, li{font-family:arial;}

Position Selectors

You can apply styles according to whether an element is a descendant, child, or sibling of another element.

Descendant

A descendant can be a child, grandchild, great-grandchild, etc. The following CSS declaration says make all descendants of div that are in the bluetext class, blue.

div *.bluetext{color:#000099;}

<p class=”bluetext”>In this case the p element is assigned to the class
bluetext, but the text is black, not blue. This is because bluetext has to be assigned
to an element that is a descendent of div.
</p>

<div>
<p class=”bluetext”>The text is now blue because element p is in the blue
text class *and* a descendant of div.

</p>

Child

To select the direct child only — no grandchildren or any of their descendants — use the greater-than sign. A child element is the immediate or direct descendant of another element. For example, all <li> elements in an unordered list are children of the <ul>. But any anchors on the <li> elements are not children of the <ul>. They are children of the <li> element.

This CSS style declaration says make all hyperllnks that are children of li red with no text decoration:

li > a{tect-decoration:none; color:red;}

Note: this does not work in Internet Explorer.

Using the above CSS style, this XHTML:

<ul>
  <li>Item 1</li>
  <li><a href="">Item 2</a></li>
  <li>Item 3</li>
</ul>

Looks like this:

  • Item 1
  • Item 2
  • Item 3

First Child

If you want to select and style only the first child and none of its siblings, append first-child to the element like this:

li:first-child > a{text-decoration:none; color:red;}

Note: this does not work in Internet Explorer.

Using the above CSS style declaration, this code:

<ul>
  <li><a href="">Item 1</a></li>
  <li><a href="">Item 2</a></li>
  <li><a href="">Item 3</a></li>
</ul>

looks like this where only the first list item is red with no text decoration:

  • Item 1
  • Item 2
  • Item 3

Sibling

Siblings are elements that are right next to each other. They are also called adjacent elements. For example, paragraphs typically follow (are sibllings to) headings and bulleted or ordered lists typically follow (are siblings to) paragraphs. So, this CSS style declaration says that any p element that immediately follows an h2 element is blue:

h2 + p{color:#00008b;}

Note: this does not work in Internet Explorer.

Using the above CSS style declaration, this code:

<h2>Styling Siblings</h2>
<p>This paragraph is blue because it immediately follows an h2.</p>

Looks like this:

Styling Siblings

This paragraph is blue because it immediately follows an h2.

October 1, 2009 at 12:00 am 3 comments

Older Posts


Recent Posts

Blog Stats

  • 61,868 hits

Archives


Follow

Get every new post delivered to your Inbox.