SKM 2423 Introduction to

Web Programming
Introduction to CSS – part 3

Nur Fatin Nabila binti Mohd Rafei Heng

Outline: CSS- Part 3
• CSS Text – color, alignment, decoration, transformation, indentation,
direction
• CSS Fonts- font-family, font-style, font-size, font-weight, font-variant
• Embedded Style (aka Internal style)
• External style
• CSS Backgrounds- color, image, position
• CSS Box Model
• CSS Lists
• CSS Tables
• Exercise
CSS Text
• The color property is used to set the color of the text.
• Note: For W3C compliant CSS: If you define the color property, you must also
define the background-color.

Styling with CSS

CSS Colors
• Colors in CSS are most often specified
by:
• a valid color name - like "red"
• an RGB value - like "rgb(255, 0, 0)"
• a HEX value - like "#ff0000“
• HTML and CSS supports 140 standard
color names.
• See complete list of HTML colors at:
www.w3schools.com/colors/colors_names.asp

Styling with CSS

CSS Colors

Styling with CSS

Text Alignment
• The text-align property is used to set the horizontal alignment of a text

Styling with CSS

Text Alignment
• When the text-align property is set to "justify", each line is stretched so that every line
has equal width, and the left and right margins are straight (like in magazines and
newspapers)

Styling with CSS

Text Decoration
• The text-decoration property is used to set or remove decorations from text.
• The value text-decoration: none; is often used to remove underlines from links

Styling with CSS

Text Transformation
• The text-transform property is
used to specify uppercase and
lowercase letters in a text.
• It can be used to turn everything
into uppercase or lowercase
letters, or capitalize the first
letter of each word

Styling with CSS

Text Indentation
• The text-indent property is used to specify the indentation of the first line of a text

Styling with CSS

Letter Spacing
• The letter-spacing property is used to specify the space between the
characters in a text:

h1 {
letter-spacing: 3px;
}

h2 {
letter-spacing: -3px;
}

Styling with CSS

Line Height
• The line-height property is used to specify the space between lines

p.small {
line-height: 0.8;
}

p.big {
line-height: 1.8;
}

Styling with CSS

Text Direction
• The direction property is used to change the text direction of an element

Styling with CSS

CSS Fonts
• The CSS font properties define the font family, boldness, size, and the
style of a text.
• In CSS, there are two types of font family names:
• generic family - a group of font families with a similar look (like "Serif" or
"Monospace")
• font family - a specific font family (like "Times New Roman" or "Arial")
Generic family Font family Description
Serif Times New Roman Serif fonts have small lines at the ends on some characters
Georgia
Sans-serif Arial "Sans" means without - these fonts do not have the lines at
Verdana the ends of characters

Monospace Courier New All monospace characters have the same width
Lucida Console
Styling with CSS
 p {
Font Family }
font-family: "Times New Roman", Times, serif;

• The font family of a text is set with the font-family property.

• The font-family property should hold several font names as a "fallback"

system.
• If the browser does not support the first font, it tries the next font, and so on.
• Start with the font you want, and end with a generic family, to let the browser pick a
similar font in the generic family, if no other fonts are available.

• If the name of a font family is more than one word, it must be in quotation
marks, like: "Times New Roman".
• More than one font family is specified in a comma-separated list
Styling with CSS
Font Style
• The font-style property is mostly
used to specify italic text.
• This property has three values:
• normal - The text is shown
normally
• italic - The text is shown in italics
• oblique - The text is "leaning"
(oblique is very similar to italic,
but less supported)

Styling with CSS

Font Size
• The font-size property sets the size of the text.
• Do not use font size adjustments to make paragraphs look like headings, or headings look
like paragraphs.
• Always use the proper HTML tags, like <h1> -<h6> for headings and <p> for paragraphs.
• The font-size value can be an absolute, or relative size.
• Absolute size:
• Sets the text to a specified size
• Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
• Absolute size is useful when the physical size of the output is known
• Relative size:
• Sets the size relative to surrounding elements
• Allows a user to change the text size in browsers
Styling with CSS
Font Size in Pixels
• Setting the text size with pixels gives you full control over the text size

h1 {
font-size: 40px;
}

h2 {
font-size: 30px;
}

p {
font-size: 14px;
}
Styling with CSS
Font Size in Em
• To allow users to resize the text (in
the browser menu), h1 {
• Many developers use em instead of font-size: 2.5em; /* 40px/16=2.5em */
pixels. }
• The em size unit is recommended by
the W3C. h2 {
font-size: 1.875em; /* 30px/16=1.875em
• 1em is equal to the current font size. */
• The default text size in browsers is }
16px.
• So, the default size of 1em is 16px. p {
• The size can be calculated from pixels font-size: 0.875em; /* 14px/16=0.875em
to em using this */
}
formula: pixels/16=em

Styling with CSS

Font Weight
• font-weight property specifies the
“boldness” of text.
• Possible values are:
• bold
• normal(the default)
• bolder(bolder than bold text)
• lighter(lighter than normal text)
• Boldness also can be specified with
multiples of 100, from 100 to 900
(e.g., 100, 200, …, 900).
• Text specified as normal is equivalent
to 400, and
Styling with CSS
Font Variant
• The font-variant property
specifies whether or not a text
should be displayed in a small-
caps font.
• In a small-caps font, all lowercase
letters are converted to
uppercase letters.
• However, the converted
uppercase letters appears in a
smaller font size than the original
uppercase letters in the text.
Styling with CSS
Background Color
• The background-color property specifies the background color of an
element

Styling with CSS

Background Color
• In the example below, the <h1>, <p>, and <div> elements have
different background colors:

Styling with CSS

Background Image
• The background-image property specifies an image to use as the
background of an element.
• By default, the image is repeated so it covers the entire element.

Styling with CSS

Background Image
• By default, the background-image property repeats an image both
horizontally and vertically

Original image

Styling with CSS

Background Image
• You can repeat background images only horizontally using:
background-repeat: repeat-x;
• Or only vertically:
background-repeat: repeat-y

Styling with CSS

Background Image
• Showing the background image only once is specified as:
background-repeat: no-repeat;
• The position of the image is specified by the background-position
property
background-position: right top;
• To specify that the background image should be fixed (will not scroll
with the rest of the page), use the background-attachment property
background-attachment: fixed;

Styling with CSS

Background Image Position
Value Description
left top If you only specify one keyword, the other value will be "center"
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

x% y% The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%.
The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default
value is: 0% 0%

xpos ypos The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units
can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You
can mix % and positions

Styling with CSS

Background Image Position

Styling with CSS

Fixed Background Image

Styling with CSS

Background - Shorthand property
• To shorten the code, it is also possible to specify all the background properties in one single
property, this is called a shorthand property

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

• When using the shorthand property the order of the property values is:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• It does not matter if one of the property values is missing, as long as the other ones are in this
order.
Styling with CSS
The CSS Box model
• All HTML elements can be considered as boxes.
• In CSS, the term "box model" is used when talking about design and layout.
• The CSS box model is essentially a box that wraps around every HTML element.
• It consists of: margins, borders, padding, and the actual content.

Content - The content of the box, where

text and images appear
Padding - Clears an area around the
content. The padding is transparent
Border - A border that goes around the
padding and content
Margin - Clears an area outside the
border. The margin is transparent
Styling with CSS
The CSS Box model
• The box model allows us to add a border around elements, and to
define space between elements.

margin

padding

Styling with CSS

 CSS Borders
• CSS controls the border using:
border-width, border-color and
border-style

Styling with CSS

CSS Borders
• With the CSS3 border-radius property, you can give any element "rounded corners"

Styling with CSS

CSS Borders
• If you specify only one value for the border-radius property, this
radius will be applied to all 4 corners.
• However, you can specify each corner separately if you wish. Here are
the rules:
• Four values: to top-left, top-right, bottom-right, bottom-left corner
• Three values: top-left, top-right and bottom-left, and bottom-right
• Two values: top-left and bottom-right corners, to top-right and bottom-left
corners
• One value: all four corners are rounded equally

Styling with CSS

CSS Borders

Styling with CSS

CSS Margins
• CSS has properties for specifying the margin for each side of an element:
• margin-top
• margin-right
• margin-bottom
• margin-left
• All the margin properties can have the following values:
• auto - the browser calculates the margin
• horizontally center the element within its container
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the parent element
• Tip: Negative values are allowed.
Styling with CSS
CSS Margins

Styling with CSS

CSS Padding
• Similar to CSS margin, but controls the inside the border of an element.

Styling with CSS

CSS Lists
• The CSS list properties allow you to:
• Set different list item markers for ordered lists
• Set different list item markers for unordered
lists
• Set an image as the list item marker
• Add background colors to lists and list items
• The list-style-type property specifies the
type of list item marker.
• The list-style-image property specifies an
image as the list item marker:
ul {
list-style-image: url('sqpurple.gif');
} Styling with CSS
CSS Tables
• Can use following properties:
properties function
border To specify table borders
width Set the width of a table
height Set the height of a table
text-align sets the horizontal alignment (like left, right, or center) of
the content in <th> or <td>
vertical-align sets the vertical alignment (like top, bottom or middle ) of
the content in <th> or <td>
padding To control the space between the border and the content in
a table, use the padding property on <td> and <th>
elements
background-color Set a background color for table
Table Width and Height
• Width and height of a table are defined by the width and height
properties.

Styling with CSS

Table Text Alignment
• text-align property sets the horizontal alignment (like left, right, or
center) of the content in <th> or <td>.
• By default, the content of <th> elements are center-aligned and the content
of <td> elements are left-aligned.
• vertical-align property sets the vertical alignment (like top, bottom, or
middle) of the content in <th> or <td>
• By default, the vertical alignment of the content in a table is middle

Styling with CSS

Table Text Alignment

Styling with CSS

Table Padding
• To control the space between the border and the content in a table,
use the padding property on <td> and <th> elements

Styling with CSS

Horizontal dividers and hover
• Add the border-bottom property to <th> and <td> for horizontal dividers
• Use the :hover selector on <tr> to highlight table rows on mouse over

Styling with CSS

Table Color and Striped rows

Each even row is colored grey

Styling with CSS

Self study
• Background-position
• CSS display
• Navigation Bar