Spring 23-24
Semester 4
Web Technology
Dr. Rodaina Abdelsalam
Cascading Style Sheets
CSS
CSS
CSS stands for Cascading Style Sheets
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look
and formatting) of a document written in a markup language.
Its most common application is to style web pages written in HTML and XHTML
CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup
language) from document presentation, including elements such as the layout, colors, and fonts.
This separation can improve content accessibility, provide more flexibility and control in the specification of
presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in
the structural content (such as by allowing for table less web design).
CSS
CSS is a style language that defines layout of HTML documents
Styles are normally saved in external .css files.
External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by
editing one single file!
CSS
CSS Syntax
A CSS rule has two main parts: a selector and a declaration
block.
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated
by semicolons.
Each declaration includes a CSS property name and a value, separated by a
colon. The property is the style attribute you want to change. Each
property has a value.
Multiple CSS declarations are separated with semicolons, and declaration
blocks are surrounded by curly braces.
CSS
CSS Example
To make the CSS more readable, you can put one declaration on each line, like this:
CSS
CSS Comments
Comments are used to explain your code, and may help you
when you edit the source code at a later date.
Comments are ignored by browsers.
A CSS comment is placed inside the <style> element, and starts
with /* and ends with */
CSS
Ways to Insert CSS
When a browser reads a style sheet, it will format the document according to it.
Three Ways to Insert CSS
External style sheet
Internal style sheet
Inline style sheet
CSS
External style sheet
An external style sheet is ideal when the style is applied to many pages.
With an external style sheet, you can change the look of an entire Web site by
changing one file.
Each page must link to the style sheet using the <link> tag.
The <link> tag goes inside the head section.
Note: Do not leave spaces between the property value and the unit.
Example for correct way: margin-left:20px.
CSS
Internal style sheet
An internal style sheet should be used when a single
document has a unique style.
You define internal styles in the head section of an HTML page,
by using the <style> tag, like this:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
CSS
Inline style sheet
An inline style loses many of the advantages of style sheets by
mixing content with presentation.
To use inline styles you use the style attribute in the relevant
tag.
The style attribute can contain any CSS property.
The example shows how to change the color and the left
margin of a paragraph.
CSS
Multiple Style Sheets
If some properties have been set for the same selector in
different style sheets, the values will be inherited from the
more specific style sheet.
CSS
Multiple Style Sheets
Example:
An external style sheet has these properties for the h3 selector.
h3
{
color:red;
text-align:left;
font-size:8pt;
}
And an internal style sheet has these properties for the h3 selector:
h3
{
text-align:right;
font-size:20pt;
}
If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
color:red;
text-align:right;
font-size:20pt;
The color is inherited from the external style sheet and the text-alignment and the font-size is replaced
by the internal style sheet.
CSS
1. Styling Backgrounds
CSS background properties are used to define the background effects of an
element.
background property : Sets all the background properties in one declaration
CSS properties used for background effects:
a. background-color
b. background-image
c. background-repeat
d. background-position
CSS
1. Styling Backgrounds
a. background-color
The background-color property specifies the background color of an element.
The background color of a page is defined in the body selector.
CSS
1. Styling Backgrounds
a. background-color
CSS Colors
Colors in CSS can be specified by the following
Hexadecimal colors.
RGB colors.
RGBA colors.
HSL colors.
HSLA colors.
Predefined/Cross-browser color names.
CSS
1. Styling Backgrounds
a. background-color
CSS Colors
Hexadecimal colors.
Hexadecimal color values are supported in all major browsers.
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue)
hexadecimal integers specify the components of the color. All values must be between 0 and FF.
For example, the #0000ff value is rendered as blue, because the blue component is set to its highest value
(ff) and the others are set to 0.
Example for a red background
P{
background-color:#ff0000;
}
CSS
1. Styling Backgrounds
a. background-color
CSS Colors
HSL Colors
HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+.
HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of
colors.
An HSL color value is specified with: hsl(hue, saturation, lightness).
Hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue.
Saturation is a percentage value; 0% means a shade of gray and 100% is the full color.
Lightness is also a percentage; 0% is black, 100% is white.
Example for a light green background, with 65% saturation,
p{
background-color: hsl(120, 65%, 75%);
}
CSS
1. Styling Backgrounds
b. 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.
CSS
1. Styling Backgrounds
b. background-image
This example shows a bad combination of text and background image. The text is hardly readable:
Note: When using a background image, use an image that does not disturb the text.
CSS
1. Styling Backgrounds
b. background-image
By default, the background-image property repeats an image both horizontally and vertically.
Some images should be repeated only horizontally or vertically, or they will look strange, like this:
CSS
1. Styling Backgrounds
c. background-repeat
If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will
look better:
Tip: To repeat an image vertically, set background-repeat: repeat-y;
CSS
1. Styling Backgrounds
c. background-repeat
Showing the background image only once is also specified by the background-repeat property:
In the example above, the background image is placed in the same place as the text. We want to
change the position of the image, so that it does not disturb the text too much.
CSS
1. Styling Backgrounds
d. background-position
The background-position property is used to specify the position of the background
image.
CSS
2. Styling Text
This text is styled with some of the text formatting properties.
The heading uses the text-align, text-transform, and color properties.
The paragraph is indented, aligned, and the space between characters is specified.
CSS
2. Styling Text
a. Text Color
The color property is used to set the color of the text.
With CSS, a color is most often specified by:
a HEX value - like "#ff0000“
an RGB value - like "rgb(255,0,0)“
a color name - like "red"
The default color for a page is defined in the body selector.
CSS
2. Styling Text
a. Text Color
CSS
2. Styling Text
a. Text Color
In this example, we define both the background-color property and the color property:
CSS
2. Styling Text
b. Text Alignment
The text-align property is used to set the horizontal alignment of a text.
A text can be left or right aligned, centered, or justified.
The following example shows center aligned, and left and right aligned text (left
alignment is default if text direction is left-to-right, and right alignment is default if text
direction is right-to-left):
CSS
2. Styling Text
b. Text Alignment
CSS
2. Styling Text
b. 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 newspapers):
CSS
2. Styling Text
c. 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:
CSS
2. Styling Text
c. Text Decoration
The other text-decoration values are used to decorate text:
Note: It is not recommended to underline text that is not a link, as this often confuses
the reader.
CSS
2. Styling Text
d. 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:
CSS
3. Styling Font
Choosing the right font has a huge impact on how the readers experience a website.
The right font can create a strong identity for your brand.
Using a font that is easy to read is important.
It is also important to choose the correct color and text size for the font.
Generic Font Families
In CSS there are five generic font families:
Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic
look.
Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.
Cursive fonts imitate human handwriting.
Fantasy fonts are decorative/playful fonts.
All the different font names belong to one of the generic font families.
CSS
3. Styling Font
Generic Font Families
CSS
3. Styling Font
The CSS font-family Property
In CSS, we use the font-family property to specify the font of a text.
The font-family property should hold several font names as a "fallback" system, to
ensure maximum compatibility between browsers/operating systems. 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). The font names should be separated
with comma.
Note: If the font name is more than one word, it must be in quotation marks, like:
"Times New Roman".
CSS
3. Styling Font
Example: Specify some different fonts for three paragraphs:
CSS
3. Styling Font
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)
CSS
3. Styling Font
Font Size
The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you
should 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
Note: If you do not specify a font size, the default size for normal text, like
paragraphs, is 16px (16px=1em).
CSS
3. Styling Font
Font Size
Setting the text size with pixels gives you full control
over the text size:
Example
Tip: If you use pixels, you can still use the zoom tool
to resize the entire page.
CSS
3. Styling Font
Font Size
Set Font Size With Em. To allow users to resize
the text (in the browser menu), many
developers use em instead of pixels.
The default size of 1em is 16px.
Example
In this example, the text size in em is the same
as the previous example in pixels. However,
with the em size, it is possible to adjust the text
size in all browsers.
CSS
4. Styling Tables
a. Table Borders
To specify table borders in CSS, use
the border property.
The example below specifies a black border for <table>,
<th>, and <td> elements:
CSS
4. Styling Tables
a. Table Borders
Full-Width Table
The table above might seem small in some cases. If you
need a table that should span the entire screen (full-
width), add width: 100% to the <table> element:
Double Borders
Notice that the table in the examples above have
double borders. This is because both the table and the
<th> and <td> elements have separate borders.
CSS
4. Styling Tables
b. Collapse Table Borders
To remove double borders.
The border-collapse property sets whether the table
borders should be collapsed into a single border:
CSS
4. Styling Tables
b. Collapse Table Borders
If you only want a border around the table, only specify
the border property for <table>:
CSS
4. Styling Tables
c. Table Size
• The width and height of a table are defined by the width and height properties.
• To create a table that should only span half
To set the width of the table to 100%, and the
height of the <th> elements to 70px:
the page, use width: 50%:
<style>
<style>
table, td, th { table, td, th {
border: 1px solid black; border: 1px solid black;
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 50%;
} }
th { th {
height: 70px; height: 70px;
} }
</style> </style>
CSS
4. Styling Tables
d. Table Alignment
Horizontal Alignment
The 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.
CSS
4. Styling Tables
d. Table Alignment
Horizontal Alignment
• To left-align the content, force the alignment of <th> elements
• To center-align the content of <td> elements as well, to be left-aligned, with the text-align: left property
use text-align: center property
<head>
<head>
<style>
<style>
table, td, th {
table, td, th {
border: 1px solid black;
border: 1px solid black; }
} table {
table { border-collapse: collapse;
border-collapse: collapse; width: 100%;
width: 100%; }
} th {
td { text-align: left;
text-align: center; }
} </style>
</style> </head>
</head>
CSS
4. Styling Tables
e. Table Style
Table Padding
To control the space between the border and the content in a table, use
the padding property on <td> and <th> elements:
<style>
table, td, th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}
</style>
