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>
<!-- Our HTML/CSS for Styling Tables follows -->
<html lang="en">
<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="https://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.
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.
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
Homepage
Top