Scribd
Upload
2 views87 pages

Chapter 3 CSS

The document provides an overview of Cascading Style Sheets (CSS), detailing its purpose in web design and how it can be embedded in HTML. It explains the three levels of style sheets: inline, document, and external, along with various selector forms such as simple, class, id, and contextual selectors. Additionally, it covers property-value forms and examples of how to apply different styles to HTML elements using CSS.

Uploaded by

lujainalkousheh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views87 pages

Chapter 3 CSS

The document provides an overview of Cascading Style Sheets (CSS), detailing its purpose in web design and how it can be embedded in HTML. It explains the three levels of style sheets: inline, document, and external, along with various selector forms such as simple, class, id, and contextual selectors. Additionally, it covers property-value forms and examples of how to apply different styles to HTML elements using CSS.

Uploaded by

lujainalkousheh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

The University of Jordan

Chapter 3 Cascading Style Sheets


Cascading Style Sheets

• Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended
to simplify the process of making web pages presentable.
• CSS provide the means to control and change presentation of HTML documents.
• CSS is not technically HTML, but can be embedded in HTML documents.
• CSS is a syntactic mechanism for specifying style information and allow you to impose a
standard style on a whole document, or even a whole collection of documents.

The University of Jordan


Levels of Style Sheets

• There are three levels of style sheets, including inline, document, and external.
• Inline style sheets apply to the content of a single HTML element.
• Document-level style sheets apply to the whole body of a document.
• External style sheets can apply to the bodies of any number of documents.
• When more than one style sheet applies to a specific tag in a document, the lowest
level style sheet has precedence.

The University of Jordan


Levels of Style Sheets
• Inline style specifications appear within the opening tag and apply only to the content
of that element.
<h1 style="color:blue; text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
• Document-level style specifications appear in the document head section and apply
to the entire body of the document.
<head>
<style>
body {background-color: linen;}
h1 {color: maroon; margin-left: 40px;}
</style>
</head>

The University of Jordan


Levels of Style Sheets

• External style sheets are in separate files and can change the look of an entire website
by changing just one file!
<head>
<link rel="stylesheet" href="[Link]">
</head>
• External style can be stored on any computer or server on the Web.
• The <link> tag is used to specify external style sheets, and must appear in the head.
• Within <link>, the rel attribute is used to specify the relationship of the linked-to
document to the document in which the link appears.
• The href attribute of <link> is used to specify the URL of the style sheet document.

The University of Jordan


Style Specification Formats

• The format of a style specification depends on the level of style sheet.


• Inline style specifications appear as values of the style attribute of a tag.
• The general form is:
• style = "property_1 : value_1; property_2 : value_2;...; property_n :
value_n ;"
For Example:
<h1 style="color:blue; text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

The University of Jordan


Style Specification Formats

• Document style specifications appear as the content of a style element within the header of
a document.
• The general format:
<style type = "text/css">
rule_list
</style>
• The type attribute of the <style> tag tells the browser the type of style specification, which is
text/css for CSS.
For Example:
<style type="text/css"> body {background-color: linen;}
h1 {color: maroon; margin-left: 40px;} </style>

The University of Jordan


Style Specification Formats

• Each style rule in a rule list has two parts:


• Selector, which specifies the element or elements affected by the rule.
• List of property-value pairs.
<style type="text/css"> body {background-color: linen;}
h1 {color: maroon; margin-left: 40px;} </style>

Selector property-value pairs


• The general form: selector {property_1 : value_1; property_2 : value_2;...;
property_n:value_n;}

The University of Jordan


Style Specification Formats

• To create a comment in CSS use /* to start the comment and */ to end


the comment.
<style type = "text/css">
/* Styles for the initial paragraph */
...
/* Styles for other paragraphs */
...
</style>

The University of Jordan


Selector Forms

• The selector can have a variety of forms:


• Simple Selector Forms.
• Class Selectors.
• Generic Selectors.
• id Selectors.
• Contextual Selectors.
• Pseudo Classes.
• The Universal Selector.

The University of Jordan


Simple Selector Forms
• Simple Selector Forms are the simplest selector form is a single element name,
such as h1.
• In this case, the property values in the rule apply to all occurrences of the named
element.
• If we have the same selector used in the body many time, the same property
values will be used for all.
<head>
<style>
body {background-color: linen;}
h1 {color: maroon; margin-left: 40px;}
</style>
</head>
<body>
<h1>This is first heading</h1>
<h1>This is second heading</h1>
</body>
The University of Jordan
Class Selectors

• Class selectors are used to allow different occurrences of the same element to
use different style specifications.
• A style class is defined in a style element by giving the style class a name, which
is attached to the element's name with a period.
<head><style>
body {background-color: linen;}
h1.heading1{color: maroon; margin-left: 40px;}
h1.heading2{color: blue;margin-left: 100px;}
</style></head>
<body>
<h1 class="heading1">This is first heading</h1>
<h1 class="heading2">This is second heading</h1>
</body>
The University of Jordan
Generic Selectors
• Sometimes it is convenient to have a class of style specifications that applies to the
content of more than one kind of element.
• This is done by using a generic class, which is defined without an element name in its
selector.
<head><style>
body {background-color: linen;}
.sale{color: maroon; margin-left: 40px;}
</style></head>
<body>
<h1 class="sale">This is first heading</h1>
<h2 class="sale">This is second heading</h1>
</body>

The University of Jordan


id Selectors
• An id selector allows the application of a style to one specific element.
• The general form of an id selector is: #specific-id {property-value list}
<head><style>
body {background-color: linen;}
#heading1{color: maroon; margin-left: 40px;}
#heading2{color: red; text-align: right}
</style></head>
<body>
<h1 id="heading1">This is first heading</h1>
<h2 id="heading2">This is second heading</h1>
</body>

The University of Jordan


Contextual Selectors
• Contextual Selectors can specify, in several different ways, that the style
should apply only to elements in certain positions in the document.
• The simplest form of the contextual selector is the descendant selector.
• Element B is a descendant of element A if it appears in the content of A.
• In this situation, A is the ancestor of B.
• The general form is: ancestor(A) descendant(B) {property-value list}
<head><style>
body {background-color: linen;}
h1 em{color: blue;} Change the em color only
</style></head> when appear inside h1
<body>
<h1>This is <em>first </em> heading</h1>
<h2> This is <em>first </em> heading </h2>
</body> The University of Jordan
Contextual Selectors

<head><style>
body {background-color: linen;}
ol li{color: blue;}
</style></head>
<body>
<ol>
<li> 1st item
<ul>
<li> Nested item </li>
</ul></li>
<li> 2nd item </li>
</ol>
</body>
The University of Jordan
Contextual Selectors
<head><style>
body {background-color: linen;}
ol ul{color: blue;}
</style></head>
<body>
<ol>
<li> 1st item
<ul>
<li> Nested item </li>
</ul>
</li>
<li> 2nd item </li>
</ol>
</body>

The University of Jordan


The Universal Selector

• The universal selector, denoted by an asterisk (*), applies its style to


all elements in a document.

<head><style>
body {background-color: linen;}
*{color: blue}
</style></head>
<body>
<p> This <strong> is <em> Example</em> </strong> </p>
<h1> this is heading</h1>
</body>

The University of Jordan


CSS Selectors Example

• Requirements
• You are designing a simple • Create a complete HTML page with internal CSS that
personal profile webpage. The demonstrates the following:
page contains: • Simple Selectors (e.g., h1, p)
• Class Selector
• A main heading with your name
• Generic Selector (same class used on different elements)
• A navigation section with two links
• ID Selector
• Two paragraphs describing the person • Contextual Selector (e.g., nav a)
• One highlighted message box • Universal Selector (*)
• A short list
• One input field

The University of Jordan


CSS Selectors Example
• <!DOCTYPE html>
• <html><head> <body>
• <title>Profile Page</title> <h1 id="mainTitle">John Doe</h1>
• <style>
<p>
• /* Universal Selector */
• * {font-family: Arial;}
<a href="#">Home</a>
• /* Simple Selectors */ <a href="#">About</a>
• h1 {color: darkblue;} </p>
• p {color: gray;}
<p>Hello, this is my profile page.</p>
• /* ID Selector */
• #mainTitle {text-align: center;}
<p class="box">This paragraph is highlighted.</p>
• /* Class Selector */ <p class="box">This is a message box.</p>
• .box {background-color: lightyellow; padding: 5px;} <ul>
• /* Generic Selectors */
<li>Reading</li>
• [Link] {font-style: italic;}
• /* Contextual Selector */
<li>Traveling</li>
• p a {text-decoration: none; color: green;} </ul>
• ul li{font-weight: bold;} </body></html>
• </style></head>

The University of Jordan


Property-Value Forms

• CSS includes a large number of different properties, arranged in


categories.
• The most commonly used categories are: fonts, lists, alignment of text,
margins, colors, backgrounds, and borders.
• The complete details of all properties and property values can be
found at:
[Link]

The University of Jordan


Property-Value Forms
• Property values can appear in a variety of forms.
<head><style>
body {background-color: linen;}
p{
color: blue; /* keyword value */
font-size: 20px; /* length value */
width: 50%; /* percentage value */
opacity: 0.7; /* number value */
}
</style></head>
<body>
<p>This is a simple CSS example.</p>
</body>

The University of Jordan


Property-Value Forms
Value Type Description Example Example CSS
Keyword Predefined word values red, bold, block color: red;

Number followed by a unit (no


Length 20px, 1.5em, 5cm margin: 10px;
space)

Percentage Number followed by % 50%, 120% width: 80%;

Numeric (Unitless) Integer or decimal without unit 1, 1.5, 0.8 opacity: 0.8;

Color (Hex) # followed by 6 hex digits #43AF00 color: #43AF00;

Color (RGB) rgb() with values 0–255 rgb(255,0,0) color: rgb(255,0,0);

background-image:
URL url() referencing a file url("[Link]")
url("[Link]");

transform:
Function Built-in CSS function rotate(45deg)
rotate(45deg);

More than one value in one


Multiple Values 10px 20px margin: 10px 20px;
property
The University of Jordan
Property-Value Forms
• Keyword values are not case sensitive, so Small, SmAlL, and SMALL
are all the same as small.
<head><style>
body {background-color: linen;}
p{
font-size: SMALL; /* Same as small */
color: ReD; /* Same as red */
}
</style></head>
<body>
<p>This is a simple CSS example.</p>
</body>

The University of Jordan


Property-Value Forms
• A number value can be either an integer or a sequence of digits with a decimal point
and can be preceded by a sign(+ or -).
<head><style>
body {background-color: linen;}
p.a {
letter-spacing: +1px; /* Positive value */
}
p.b {
letter-spacing: -1px; /* Negative value */
}
</style></head>
<body>
<p class="a">This text has positive spacing.</p>
<p class="b">This text has negative spacing.</p>
</body>

The University of Jordan


Property-Value Forms
• Length values are specified as number values that are followed immediately by a two-character abbreviation of a
unit name.
• There can be no space between the number and the unit name.
• The possible unit names are px, for pixels; in, for inches; cm, for centimeters; mm, for millimeters; pt, for points (a
point is 1/72 inch); and pc, for picas, which are 12 points. *{font-size: 2in}
<head><style>
body {background-color: linen;}
p{
font-size: 20px; /* 20 pixels */
margin-left: 2em; /* 2 em units */
width: 50cm; /* 50 centimeters */
}
</style></head>
<body>
<p>This paragraph uses length values.</p>
</body>

The University of Jordan


Property-Value Forms
• Percentage values are used to provide a measure that is relative to the previously used
measure for a property value.
• Percentage values are numbers that are followed immediately by a percent sign (%).
*{font-size: 200%}
<head><style>
body {background-color: linen;}
*{
font-size: 200%;
}
</style></head>
<body>
<p>This paragraph uses length values.</p>
</body>

The University of Jordan


Property-Value Forms
• Color property values can be specified as color names, as six-digit hexadecimal numbers, or in RGB form.
• Color names: specify the color name. red, blue.
• Hexadecimal numbers: must be preceded with pound sign (#) and the number of the color. #43AF00
• RGB: is just the word rgb followed by a parenthesized list of three decimal numbers in the range of 0 to
255 or three percentage values. rgb(255, 0, 255)
<head><style>
body {background-color: linen;}
[Link] { color: red; }
[Link] { color: #43AF00; }
[Link] { color: rgb(255, 0, 255); }
</style></head>
<body>
<p class="name">Color name example</p>
<p class="hex">Hex color example</p>
<p class="rgb">RGB color example</p>
</body>

The University of Jordan


Example

• You are designing a simple webpage for University of Jordan.


Your task is to demonstrate different CSS property–value forms in one complete example.
• The page must include: A main heading with the university name, A paragraph describing
the university, A colored content box, and A paragraph with a different text color.
• Your CSS must clearly demonstrate the following:
• The general property–value form (property: value;)
• Keyword values (e.g., center, uppercase, blue)
• Number values (integer or decimal numbers)
• Percentage values
• Color property values in different formats

The University of Jordan


Example
<style>
/* Property–Value Form */
body { background-color: linen;}
/* Keyword Values */
h1 { text-align: center; text-transform: uppercase; color: blue;}
/* Number Values */
[Link] {line-height: 1.5; letter-spacing: 2px;}
/* RGB Color Value */
[Link] {color: rgb(255, 0, 0);}
</style></head>
<body>
<h1>University of Jordan</h1>
<p class="description"> The University of Jordan is one of the leading public universities in the country. </p>
<p class="box"> This box demonstrates percentage values and hexadecimal color. </p>
<p class="rgbText"> This paragraph uses an RGB color value. </p>
</body></html>

The University of Jordan


Conflicting Styles – Priority
• Not all style rules come from the same source.
• CSS gives different priority levels depending on where the style is defined.
• If no styles are written by the author, the browser applies its internal default style sheet (called the user
agent style sheet).
• Users can also define their own custom styles (user style sheet).
• However, the author’s style sheet usually overrides both.
• Inline styles have the highest priority among normal rules because they are written directly inside the
HTML element.
<head><style>
h1 { color: purple; }
</style></head>
<body>
<h1 style="color: blue;">Heading</h1>
</body>

The University of Jordan


Conflicting Styles – Specificity
• When conflicting rules come from the same source, CSS uses specificity to decide which
rule wins. Specificity refers to how specific or detailed a selector is.
• A selector that targets an element more precisely has more weight.
• For example, a rule targeting all paragraphs (p) is less specific than a rule targeting a
paragraph with a specific ID (#intro).
<head><style>
p { color: red; }
#intro { color: blue; }
</style></head>
<body>
<p id="intro">Welcome</p>
</body>

The University of Jordan


Conflicting Styles – Rule Order

• If two rules have the same priority and the same specificity, the rule that appears last in
the style sheet wins. This is called the “last one wins” principle.
<head><style>
p { color: red; }
p { color: blue; }
p { color: green; }
</style></head>
<body>
<p>Welcome</p>
</body>

The University of Jordan


Font Properties
• The font properties are among the most commonly used of
the style-sheet properties.
• Virtually all HTML documents include text, which is often
used in a variety of different situations.
• This creates a need for text in many different fonts, font
styles, and sizes.

The University of Jordan


Font Families

• The font-family property is used to specify a list of font names.


• The browser uses the first font in the list that it supports.
• For example, consider the following property: font-family: Arial, Helvetica, Futura
• This tells the browser to use Arial if it supports that font.
• If it does not support Arial, it should use Helvetica if it supports it.
• If the browser supports neither Arial nor Helvetica, it should use Futura if it supports it.
• If the browser does not support any of the specified fonts, it will use an alternative of
its choosing.

The University of Jordan


Font Sizes

• The font-size property does what its name implies; its value specifies the size of the font.
• There are two categories of font-size values: absolute and relative.
• In the absolute category, the size value could be given as a length value in points, picas, or
pixels, or as a keyword.
<head><style>
body {background-color: linen;}
*{font-size: 0.5in;}
</style></head>
<body>
<p> This <strong> is <em> Example</em> </strong> </p>
</body>

The University of Jordan


Font Sizes
• The relative size values are smaller and larger, which adjust the font size relative to
the font size of the parent element.
<head><style>
body {background-color: linen;}
em{font-size: larger;}
</style></head>
<body>
<p> This <strong> is <em> Example</em> </strong> </p>
</body>

The University of Jordan


Font Styles

• The font-style property is usually used to specify italic. font-style: italic

<head><style>
body {background-color: linen;}
p{font-style: italic;}
</style></head>
<body>
<p> This <strong> is <em> Example</em> </strong> </p>
</body>

The University of Jordan


Font Weights

• The font-weight property is used to specify the degree of boldness. font-weight: bold
body {background-color: linen;}
p{font-weight: bold}
</style></head>
<body>
<p> This is <em> Example</em> </p>
</body>

• The bolder and lighter values are taken as relative to the level of boldness of the
parent element. {font-weight: lighter} {font-weight: bolder}

The University of Jordan


Font Weights

• Specific numbers also can be given in multiples of 100 from 100 to 900, where 400 is
the same as normal and 700 is the same as bold.
<head><style>
body {background-color: linen;}
p{font-weight: 900}
</style></head>
<body>
<p> This is <em> Example</em> </p>
</body>

The University of Jordan


Text Decoration
• The text-decoration property is used to specify some special features of text.
• The available values are line-through, overline, underline, and none, which is the default.
<head><style>
body {background-color: linen;}
p.a{text-decoration: none}
p.b{text-decoration: overline}
p.c{text-decoration: underline}
p.d{text-decoration: line-through}
</style></head>
<body>
<p class="a"> This is Example 1 </p>
<p class="b"> This is Example 2 </p>
<p class="c"> This is Example 3 </p>
<p class="d"> This is Example 4 </p>
</body>
The University of Jordan
Text Spacing

• The letter-spacing property controls the amount of space between the letters in words.
• The possible values of letterspacing are normal or any length property value.
• Positive values increase the letter spacing; negative values decrease it.
<head><style>
body {background-color: linen;}
p.a{letter-spacing: +1px}
p.b{letter-spacing: -1px}
</style></head>
<body>
<p class="a"> This is Example 1 </p>
<p class="b"> This is Example 2 </p>
</body>

The University of Jordan


Text Spacing

• The space between words in text can be controlled with the word-spacing property,
whose values are normal or any length value.
<head><style>
body {background-color: linen;}
p.a{word-spacing: +5px}
p.b{word-spacing: -3px}
</style></head>
<body>
<p class="a"> This is Example 1 </p>
<p class="b"> This is Example 2 </p>
</body>

The University of Jordan


Text Spacing

• The space between lines of text can be controlled with the line-height property.
<head><style>
body {background-color: linen;}
p.a{line-height: 10px}
p.b{line-height: 50px}
</style></head>
<body>
<p class="a"> This is Example 1.1 <br/> This is Example 1.2 </p>
<p class="b"> This is Example 2.1 <br/> This is Example 2.2 </p>
</body>

The University of Jordan


Text Capitalization
• The text-transform property changes the capitalization of text only when it is displayed in the browser, while the
original text remains unchanged in the code.
• The text-transform property accepts several values. The default value is none, which displays the text exactly as it is
typed.
• The value capitalize changes the first letter of each word to uppercase. The value lowercase converts all letters to
lowercase, while uppercase converts all letters to uppercase. Another value, full-width, displays characters in full-
width form when available, although it is not widely supported across browsers.
<head><style>
[Link] { text-transform: uppercase; }
[Link] { text-transform: lowercase; }
[Link] { text-transform: capitalize; }
</style></head><body>
<p class="upper">University of Jordan</p>
<p class="lower">UNIVERSITY OF JORDAN</p>
<p class="cap">university of jordan</p>
</body>

The University of Jordan


Alignment of Text
• The text-indent property can be used to indent the first line of a paragraph.
• This property takes either a length or a percentage value. text-indent: 1cm
<head><style>
body {background-color: linen;}
[Link]{text-indent: 1cm}
</style></head>
<body>
<p class="ind"> Now is the time for all good Web developers to begin
using cascading style sheets for all presentation
details in their documents. No more deprecated tags
and attributes, just nice, precise style sheets. </p>
</body>

The University of Jordan


Alignment of Text

• The text-align property, for which the most commonly used keyword values are
left, center, right, and justify, is used to arrange text horizontally.
<head><style>
body {background-color: linen;}
p.tx1{text-align: left}
p.tx2{text-align: center}
p.tx3{text-align: right}
p.tx4{text-align: justify}
</style></head>
<body>
<p class="tx1"> This is 1st Example </p>
<p class="tx2"> This is 2nd Example </p>
<p class="tx3"> This is 3rd Example </p>
<p class="tx4"> This is 4th Example </p>
</body>
The University of Jordan
Alignment of Text
• The float property is used to specify that text should flow around some element,
often an image or a table.
• The possible values for float are left, right, and none, which is the default.
• For example, suppose we want an image to be on the right side of the display
and have text flow around the left side of the image. To specify this condition, the
float property of the image is set to right.

The University of Jordan


Alignment of Text

<head>
<style>
body { background-color: linen;}
img { float: right;
margin-left: 10px; /* space between image and text */}
</style>
</head>
<body>
<p> <img src="[Link]" alt="Not Found" width="120" /></p>
<p> University of Jordan is one of the leading public universities in Jordan,
known for academic excellence and research development.</p>
</body>
The University of Jordan
Color
• Over the last decade the issue of color in Web documents has become
much more settled.
• In the past, one had to worry about the range of colors client machine
monitors could display, as well as the range of colors browsers could
handle.
• Now, there are few color limitations with the great majority of client
machine monitors and browsers.

The University of Jordan


Color Properties

• Color property values can be specified as color names, as six-digit


hexadecimal numbers, or in RGB form.
• Color names: specify the color name. red, blue.
• Hexadecimal numbers: must be preceded with pound sign (#) and the number of the
color. #43AF00
• RGB: is just the word rgb followed by a parenthesized list of three decimal numbers
in the range of 0 to 255 or three percentage values. rgb(255, 0, 255)

The University of Jordan


Color names

• Color names: specify the color name. red, blue. {color: red;}
<head><style>
body {background-color: linen;}
p {color: red;}
</style></head>
<body>
<p> This is Example</p>
</body>

The University of Jordan


Color names

The University of Jordan


Hexadecimal numbers

• Hexadecimal numbers: must be preceded with pound sign (#) and the number of the
color. #43AF00
<head><style>
body {background-color: linen;}
p {color: #43AF00;}
</style></head>
<body>
<p> This is Example</p>
</body>

The University of Jordan


Hexadecimal numbers

The University of Jordan


RGB

• RGB: is just the word rgb followed by a parenthesized list of three decimal numbers in
the range of 0 to 255 or three percentage values. rgb(255, 0, 255)
<head><style>
body {background-color: linen;}
p {color: rgb(200,100,100)}
</style></head>
<body>
<p> This is Example</p>
</body>

The University of Jordan


RGB

The University of Jordan


Color Properties

• The background-color property is used to set the background color of an element,


where the element could be the whole body of the document.
<head><style>
body {background-color: linen;}
p {color: rgb(200,100,100); background-color: black}
</style></head>
<body>
<p> This is Example</p>
</body>

The University of Jordan


List Properties

• Two presentation details of lists can be specified in HTML documents:


• the shape of the bullets in an unordered list.
• the sequencing values in an ordered list.
• The list-style-type property is used to specify both of these.
• If list-style-type is set for a ul or an ol tag, it applies to all the list items
in the list. ul {list-style-type: square;}

The University of Jordan


List Properties

• The list-style-type property of an unordered list can be set to disc (the default), circle,
square, or none.
• A disc is a small filled circle. ul {list-style-type: disc;}
• Circle is an unfilled circle. ul {list-style-type: Circle;}
• Square is a filled square. ul {list-style-type: square;}

The University of Jordan


List Properties
• If a list-style-type is set for an li tag, it only applies to that list item.
<head><style>

body {background-color: linen;}


li.i1 {list-style-type: disc;}
li.i2 {list-style-type: Circle;}
li.i3 {list-style-type: Square;}
</style></head>
<body>
<ul>
<li class="i1"> 1st Item </li>
<li class="i2"> 2nd Item </li>
<li class="i3"> 3rd Item </li>
</ul>
</body>

The University of Jordan


List Properties

• The list-style-type property can be used to specify the types of sequence values in ol.
• For one ordered list: ol {list-style-type: upper-roman;}
• For nested ordered list level 2: ol ol {list-style-type: upper-alpha;}
• For nested ordered list level 3: ol ol ol {list-style-type: upper-alpha;}
• Possible sequencing value types for ordered lists:

The University of Jordan


<head> <style>
/* Level 1 ordered list */

Example ol {list-style-type: upper-roman;


/* Level 2 ordered list */
ol ol {list-style-type: upper-alpha;}
/* Level 3 ordered list */
ol ol ol {list-style-type: decimal;}
</style></head><body>
<ol>
<li>First Item
<ol>
<li>Sub Item
<ol>
<li>Sub Sub Item</li>
</ol>
</li>
</ol>
</li>
<li>Second Item</li>
</ol></body>
The University of Jordan
The Box Model

• Virtually all document elements can have borders with various styles, such as color
and width.
• The space between the content of an element and its border, known as padding.
• The space between the border and an adjacent element, known as the margin.

The University of Jordan


Borders
• Every element has the border-style property, which controls whether the element's content has a border and also
specifies the style of the border. {border-style: dotted}
• CSS provides several different border styles, among them dotted, dashed, solid, and double. The default value
for border-style is none.
<head><style>

body {background-color: linen;}


[Link]{border-style: dotted}
[Link]{border-style: dashed}
[Link]{border-style: solid}
[Link]{border-style: double}
</style></head> <body>
<strong class="first">This is example </strong> <br/><br/>
<strong class="second">This is example </strong><br/><br/>
<strong class="third">This is example </strong><br/><br/>
<strong class="fourth">This is example </strong><br/><br/>
</body> The University of Jordan
Borders

• The styles of one particular side of an element can be set with border-top-style, border-bottom-
style, border-left-style, or border-right-style.
<head><style>
body {background-color: linen;}
[Link]{border-top-style: dotted; border-bottom-style: dashed; border-left-style: solid; border-right-
style: double}
</style></head>
<body>
<strong class="first">This is example </strong>
</body>

The University of Jordan


Borders

• The border-width property is used to specify the thickness of a border.


• Its possible values are thin, medium, thick, or a length value, which is in pixels.
<head><style>
body {background-color: linen;}
[Link]{border-style:solid; border-width: thin}
</style></head>
<body>
<strong class="first">This is example </strong>
</body>

The University of Jordan


Borders

• The width of one particular border of an element can be specified with border-top-width, border-
bottom-width, border-left-width, or border-right-width.
<head><style>
body {background-color: linen;}
[Link]{border-style:solid; border-top-width:thin; border-bottom-width:medium; border-left-
width:thick; border-right-width:0.1px}
</style></head>
<body>
<strong class="first">This is example </strong>
</body>

The University of Jordan


Borders
• The color of a border is controlled by the border-color property.
• The individual borders of an element can be colored differently through the properties border-top-
color, border-bottom-color, border-left-color, or border-right-color.
• There is shorthand for setting the style properties of all four borders of an element, border.
<head><style>
body {background-color: linen;}
[Link]{border: 5px solid blue;}
</style></head>
<body>
<strong class="first">This is example </strong>
</body>

The University of Jordan


Borders

• The cells of a table can have borders, like any other element.
• Border can specify for all cells and separately.
<head><style>
body {background-color: linen;}
th {border: thin solid black;}
</style></head> <body>
<table>
<tr>
<th> 1st cell</th>
<th> 2nd cell</th>
<th> 3rd cell</th>
</tr>
</table>
</body> The University of Jordan
Borders
<head><style>
body {background-color: linen;}
</style></head>
<body>
<table>
<tr>
<th style="border: thin solid black"> 1st cell</th>
<th style="border: thick dotted black"> 2nd cell</th>
<th style="border: thin solid red"> 3rd cell</th>
</tr>
</table>
</body>

The University of Jordan


Margins and Padding
• The padding is the space between the content of an element and its border.
• The margin is the space between the border of an element and its neighbors.
• The margin properties are named margin, and can be applied for four sides: margin-left,
margin-right, margin-top, and margin-bottom.
• The padding properties are named padding, and can be applied for four sides: padding-left,
padding-right, padding-top, and padding-bottom.
<head><style>

body {background-color: linen;}


[Link]{border-style: dotted; margin: 10px}
[Link]{border-style: dashed; padding: 20px}
</style></head>
<body>
<strong class="first">This is example </strong> <br/><br/>
<strong class="second">This is example </strong><br/><br/>
</body> The University of Jordan
Background Images

• The background-image property is used to place an image in the


background of an element. background-image: url()
<head><style>
body {background-image: url([Link]);}
</style></head>
<body>
</body>

The University of Jordan


Background Images

• In the example, notice that the background image is replicated as necessary to fill the area
of the element.
• This replication is called tiling.
• Tiling can be controlled with the background-repeat property, which can take the value
repeat (the default), no-repeat, repeat-x, or repeat-y.
• The no-repeat value specifies that just one copy of the image is to be displayed.
• The repeat-x value means that the image is to be repeated horizontally.
• repeat-y means that the image is to be repeated vertically.
• The position of a nonrepeated background image can be specified with the background-
position property, which can take a large number of different values. The keyword values
are top, center, bottom, left, and right

The University of Jordan


Background Images

<head><style>
body {background-color: linen; background-image: url([Link]);
background-repeat: no-repeat}
</style></head>
<body>
</body>

The University of Jordan


Links

• Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
<head><style>
body {background-color: linen;}
a { color: red;}
</style></head>
<body>
<a href="[Link]
</body>

The University of Jordan


Links
• Links can be styled differently depending on their state, including:
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked
<head><style>
body {background-color: linen;}
a:link { color: red;}
a:visited {color: green;}
a:hover {color: orange;}
a:active {color: blue;}
</style></head>
<body>
<a href=" [Link] ">W3School</a>
</body>

The University of Jordan


Text Decoration (Link)

• The text-decoration property can be used for links, but is mostly used to remove underlines from
links:
<head><style>
body {background-color: linen;}
a:link { color: red; text-decoration: none;}
a:hover {color: orange; text-decoration: overline}
a:visited {color: green; text-decoration: none}
a:active {color: blue; text-decoration: underline}
</style></head>
<body>
<a href="[Link]
</body>

The University of Jordan


CSS Tables
• Additionally to what we learn about the table borders, more properties can be used to modify your
tables.
• To get just one border between table cells, we set the table property border-collapse to collapse
<head><style>
body {background-color: linen;}
table{border-collapse: collapse}
th {border: thin solid black;}
</style></head>
<body>
<table>
<tr>
<th> 1st cell</th>
<th> 2nd cell</th>
<th> 3rd cell</th>
</tr>
</table>
The University of Jordan
</body>
Tables and box width

• If you need to change the width property for table or box should be used.
<head><style>
body {background-color: linen;}
table{border-collapse: collapse; width: 100%}
th {border: thin solid black;}
p{border: thin solid black; width: 50%;}
</style></head>
<body>
<table><tr>
<th> 1st cell</th>
<th> 2nd cell</th>
<th> 3rd cell</th></tr></table>
<p> This is a box </p>
</body> The University of Jordan
Table and box background

• The tables and boxes background color can be changed to any color using background-color
property.
<head><style>
body {background-color: linen;}
table{border-collapse: collapse; width: 100%}
th {border: thin solid black; background-color: red}
p{border: thin solid black; width: 50%; background-color: orange}
</style></head>
<body>
<table><tr>
<th> 1st cell</th>
<th> 2nd cell</th>
<th> 3rd cell</th></tr></table>
<p> This is a box </p>
The University of Jordan
</body>
The <span> and <div> Tags

• In many situations, we want to apply special font properties to less


than a whole paragraph of text.
• For example, it is often useful to have a word or phrase in a line
appear in a different font size or color.
• The <span> tag is designed for just this purpose.
• Unlike most other tags, there is no default layout for the content of
<span>.

The University of Jordan


The <span> and <div> Tags

• So, in the following example, the word total is not displayed differently from the rest of the
paragraph:
<head><style>
body {background-color: linen;}
p{border: thin solid black; width: 100%; background-color: orange}
</style></head>
<body>
<p>It sure is fun to be in <span> total </span> control of text</p>
</body>

The University of Jordan


The <span> and <div> Tags

• The purpose of <span> is to change property values of part of a line of content, as in the following
example:
<head><style>
body {background-color: linen;}
p{border: thin solid black; width: 100%; background-color: orange}
.SP{color: white; font-size: 0.5in}
</style></head>
<body>
<p>It sure is fun to be in <span class="SP"> total </span> control of text</p>
</body>

The University of Jordan


The <span> and <div> Tags
• The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a
container for HTML elements
<head><style>

body {background-color: linen;}

.div1{border: thin solid black; width: 100%; background-color: orange}

.div2{border: thick dashed blueviolet; width: 50%; background-color: brown}

</style></head> <body>

<div class="div1">

<h2>First Div Header</h2>

<p>We are in the first div</p>

</div>

<div class="div2">

<h2>Second Div Header</h2>

<p>We are in second div</p>

</div> </body>

The University of Jordan


The University of Jordan

You might also like