Tishk International University

Faculty of Engineering
Computer Engineering Department

Cascading Style Sheets (CSS) – Part 2

Musa M. Ameen
Web Programming I (CMPE 341)
4
Week 4
Fall 2024/25
Outline
✓ Text properties
✓ Border properties
✓ Padding property
✓ Margin property
✓ Length units

2
Objectives
✓ Understand the syntax and meaning of the text properties and their values.
✓ Understand the syntax and meaning of the border properties and their values.
✓ Understand the syntax and meaning of the padding properties and their values
✓ Understand the syntax and meaning of the margin properties and their values

3
Main Textbook Source
Web Programming with HTML5, CSS, and JavaScript, John Dean

✓ Chapter 3 Cascading Style Sheets (CSS)

4
text-align property
The text-align property specifies the horizontal alignment for a block of text.
Here are the valid values for the text-align property:

If you use justify for the text-align property, the browser stretches all the lines in a block of text,
except for the block of text’s bottom line. The bottom line uses left justification. That behavior
mimics what you see for paragraphs in newspapers and magazines, and that’s why justify is
used primarily for p elements.
5
Example

6
text-decoration property
The text-decoration property specifies something decorative that is added to text.
Here are the valid values for the text-decoration property:

Because underlining is so common, you should memorize the following technique for
generating an underline:
.underlined {text-decoration: underline;}

7
Example

8
text-transform property
The text-transform property controls the text’s capitalization.
Here are the valid values for the text-transform property:

What’s the point of text-transform? Why not just use the desired case in the original HTML
code? You might want to provide uppercase and lowercase buttons on your web page that
allow users to dynamically change the page so it displays all uppercase or all lowercase.

9
Example

10
text-indent property
The text-indent property specifies the size of the indentation of the first line in a block of
text.
The block’s second and third lines (and so on) are unchanged; that is, they do not get
indented.
The most appropriate way to specify a value for the text-indent property is to use em units.
Here’s an example type selector rule that uses the text-indent property:

p {
text-indent: 4em;
}
11
Example

12
border-style property
The border-style property specifies the type of border that surrounds the matched element.
Here are the valid values for the border-style property:

Here’s an example class selector rule that uses the border-style property to draw a dashed
border:
.coupon {border-style: dashed;}
We used “coupon” for the class selector because we want the matched element to look like a
coupon, with a traditional dashed border surrounding it. 13
border-width property
The border-width property specifies the width of the border that surrounds the matched
element. There are quite a few values allowed for the border-width property.
Here are the most appropriate ones:

If you ever use the border-width property, remember to use it in conjunction with the border-
style property.
If you forget to provide a border-style property, then the default border-style value kicks in, and
the default value is none. With a border-style value of none, no border will be displayed.
Forgetting the border-style property is a very common bug.
CSS pixel values use px units. As with all the other CSS size values, CSS pixel values are
relative. If a user reduces the monitor’s resolution or zooms in on his or her browser, then each
CSS pixel expands, and elements that use CSS pixel units will likewise expand.
14
border-width property
It’s pretty rare to need different widths for the different border sides, but be aware that the
feature does exist. If you specify four values for the border-width property, the four values get
applied to the border’s four sides in clockwise order, starting at the top. For example:
.boxed {
border-style: solid;
border-width: 4px 2px 0px 2px;
}
Note what happens when you apply the preceding CSS rule to the following HTML code
fragment:
My idol is <span class="boxed">Tim Berners-Lee</span>. He rocks!

15
border-color property
The border-color property specifies the color of the border that surrounds the matched
element.
There’s no new syntax to learn for the border-color property because it uses the same values
as the color property and the background-color property.
Remember the types of values that those properties use? Color values can be in the form of a
color name, an RGB value, an RGBA value, an HSL value, or an HSLA value.
For the border-color property to work, you must use it in conjunction with a border-style
property.
That should sound familiar because we said the same thing about the border-width property.
In order to change the border’s color or change the border’s width, you must have a visible
border, and that’s done by using a border-style property

16
Example

17
Element Box, padding Property, margin Property
Borders have no gaps inside or outside of them. Sometimes that’s appropriate, but usually
you’ll want to introduce gaps to make the elements look comfortable, not cramped.
To introduce gaps around an element’s border, you need to take advantage of the element’s
element box.
Every web page element has an element box
associated with it. As you can see in the figure, an
element box has a border, padding inside the border,
and a margin outside the border.

For most elements, but not all, the default border,

You can adjust the widths with the border-width,

18
padding and margin properties
The padding property specifies the width of the area on the interior of an element’s border.
The margin property specifies the width of the area on the exterior of an element’s border.
Usually, the most appropriate type of value for the padding and margin properties is a CSS
pixel value. Here’s an example CSS rule that uses padding and margin properties:
.label {border: solid; padding: 20px; margin: 20px;}
Just as with the border-width property, you can specify different padding widths for the four
different sides. You can use multiple values with one padding property.
Or you can use separate padding side properties—padding-top, padding-right, padding-
bottom, and padding-left. Likewise, you can specify different margin widths for the four
different sides. You can use multiple values with one margin property. Or you can use separate
margin side properties—margin-top, margin-right, margin-bottom, and margin-left.
The margin and padding properties allow negative values. While a positive value forces two
elements to be separated by a specified amount, a negative value causes two elements to
overlap by a specified amount.
19
Example that uses padding and margin properties

20
When to Use the Different Length Units
In this lecture, we introduced various CSS units that are used for specifying the size, distance,
or length of something.
Specifically, we described em, px, %, and several absolute units such as pc, in, cm, and so
forth. All those units are called length units.
What follows is a summary of when to use each of the different length units:
➢ Use em for font-related properties (like font-size).
➢ Use px for properties that should be fixed for a given resolution, even if the element’s font
size changes or even if the containing element’s size changes. Typically, that means using
px for things like border properties and layout.
➢ Use % for properties that should grow and shrink with the size of the containing element
(like margins for the body element).
➢ Use absolute units sparingly—only when a fixed size is essential and the target device
has a high resolution.

21
References
✓ Dean, J. (2018). Web programming with HTML5, CSS, and JavaScript. Jones &
Bartlett Learning.
✓ CSS Working Group. (2022). What is CSS?. https://www.w3.org/Style/CSS
✓ MDN web docs from Mozilla Developer Group. (2023). CSS reference.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

22