Colour, Alignment and Direction
The café opens a second branch in Dubai, and the menu page gets an Arabic version. Arabic runs right to left, so "align to the left" is suddenly the wrong instruction. The properties in this lesson decide what colour text is and which way it lines up, and the modern ones adapt to the language for you.
The rule
colorpaints text;text-alignlines it up from the start; direction comes from the HTML.
color sets the text colour (and, by default, the colour of borders and text decorations). It is inherited, so setting it on a container colours everything inside unless a child sets its own:
.dish {
color: #2b2d42;
}
.price {
color: seagreen;
}Every piece of text in a card is dark slate, except the price, which has its own rule.
text-align lines up the text and other inline content inside a block: start, end, left, right, center or justify. It moves the lines within the box, not the box itself.
startandendfollow the writing direction: in Englishstartis the left edge; in Arabic or Hebrew it is the right edge.leftandrightare fixed, whatever the language.
Direction of the text itself should be set in the HTML with the dir attribute, because it is part of the content's meaning, not its style:
<html lang="ar" dir="rtl">CSS has a direction property, but the recommendation is to leave it to dir and use it in CSS only for rare cases where the markup cannot say it.
The shortcut
Write start and end, not left and right, unless something really must stay on one physical side. Then the same stylesheet works for every language.
The goal
Prices should hug the far edge of each card, away from where reading begins.
Drills
Answer fast — trust the rule.
.dish has color: navy. The h3 inside it has no colour rule. What colour is the dish name?
On a page with dir="rtl", where does text-align: start put the text?
A p with a fixed width has text-align: center. What is centred?
Where should the direction of an Arabic page be declared?
Remember
colorpaints text and is inherited by everything inside.- Prefer
text-align: startandend; they follow the writing direction. - Declare direction in HTML with
dir;text-alignonly lines up content inside a box.