Other PropertiesS2C Home « Other Properties

Our Journey into the world of CSS is drawing to a close but we still have a final few properties to discuss. In this lesson we learn about text direction and how to outline elements of any shape without impacting the box model.

Text Direction CSS Properties

direction

Specifies the base writing direction of blocks, embeddings and overrides, table columns and incomplete lines of justified text for the Unicode bidirectional algorithm.

unicode-bidi

Used in conjunction with the direction CSS property for handling bidirectional text.

Outline CSS Properties

outline

Shorthand CSS property for specifying the outline colour, outline style and outline width for an element.

outline-color

Specify the outline color for an element.

outline-style

Specify the outline style for an element.

outline-width

Specify the outline width for an element.

When using outlines we can outline any element, not just rectangular boxes as with borders. When specifying a colour, style or width for an outline, that property applies to all sides of the outline, unlike borders where you can specify individual attributes for each side. Outlines are just laid on top of an element and have no impact on the element width or height.

Lets see some examples of the above CSS properties to see what they do.

Open up the file with Notepad we created and tested in Lesson 7: The Printed Page.

You saved the file to your computer in the C:\_CSSAdvanced folder as lesson_7_csspage.html

Copy and paste the following code into the reopened file, overwriting the existing text.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for Styling Tables follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Advanced CSS - Lesson 8 - Other Properties</title>

<style type="text/css">
/* Change text direction */
.para1 {
  direction: rtl;
}
/* Change text direction and lettering */
.para2 {
  direction: rtl;
  unicode-bidi: bidi-override;
}
/* Set outline for focus */
input:focus  {
  outline: thin solid red 
}
/* Set outline for active */
textarea:active  {
  outline: medium solid green 
}
</style>
</head>

<body>
<h1>Text Direction and Outline CSS Properties</h1>
<h2>The direction and unicode-bidi CSS property</h2>
<p>A sentence with default direction - ltr</p>
<p class="para1">A sentence with overridden direction - rtl</p>
<p class="para2">A sentence with overridden direction - rtl - also bidi overridden</p>
<h2>Looking at the CSS outline Property</h2>
<p>Please fill in our Pie Survey:</p>
<form action="http://server2client.com/htmlintermediate/simpleform.html"  method="get">
  <p>Name:<input type="text" name="name" /></p>
  <p>Which pie do you prefer?:</p>
  <p><input type="radio" name="pie" checked="checked" value="Chicken" id="chicken" />
     <label for="chicken">Chicken</label></p>
  <p><input type="radio" name="pie" value="Fish" id="fish" />
     <label for="fish">Fish</label></p>
  <p><input type="radio" name="pie" value="Shepherds" id="shepherds" />
     <label for="shepherds">Shepherds</label></p>
  <p>Other stuff you wanna tell us about pies:</p>
  <p><textarea rows="3" cols="30" name="comments"></textarea></p>
  <p>Submit your information:</p>
  <p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>

Save the file in the C:\_CSSAdvanced folder as lesson_8_csspage.html and close the Notepad.

save other properties

Viewing Our Saved File

From the C:\_CSSAdvanced folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

Click on the form fields to see the effects of the outline tab with the styles used.

other properties

Reviewing The Code

The direction CSS property moves text to the right of the screen, useful for languages that read from the right to left.

The unicode-bidi CSS property moves text to the right of the screen and also reverses the lettering.

Outlines are useful for forms and highlighting an element that is in focus.

Lesson 8 Complete

That is it for CSS properties, we have covered every CSS visual property in the 2.1 specification. Try setting individual outlines for colour, style and width by introducing some new styles

Related Tutorials

CSS Basic Tutorials- Lesson 9 - Borders

What's Next?

To conclude the CSS Advanced Tutorials section, we bring all we have learnt together in a web page utilizing the knowledge we have gathered from this section.

CSS Reference

Text Direction CSS Properties

The direction CSS Property

The unicode-bidi CSS Property

Outline CSS Properties

The outline CSS Property

The outline-color CSS Property

The outline-style CSS Property

The outline-width CSS Property

go to home page Homepage go to top of page Top