Internet Computing
CSS (Part 1)
Content
2
CSS
What is CSS?
3
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files
Styles Solved a Big Problem
What is CSS?
4
CSS removes the presentation attributes from the
structure allowing reusability, ease of maintainability,
and an interchangeable presentation layer.
HTML was never meant to be a presentation
language. Proprietary vendors have created tags to add
presentation to structure.
<font>
<b>
<i>
CSS allows us to make global and instantaneous changes
easily.
CSS Syntax
5
selector/element {
property: value;
}
Example
p {color:red;text-align:center;}
CSS Comments
6
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 begins with "/*", and ends with "*/",
like this:
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
selector
7
The selector can
an identifier,(id)
class
single XHTML element (body, div, etc)
a grouping of elements
Single XHTML element
8
Specify the style(s) for a single XHTML element.
body {
margin: 0;
padding: 0;
border-top: 1px solid #ff0;
}
Example
https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_elem
ent
Grouping of elements
9
Allows you to specify a single style for multiple
elements at one time.
h1, h2, h3, h4, h5, h6 {
font-family: “Trebuchet MS”, sans-serif;
}
Example
https://www.w3schools.com/css/tryit.asp?filename=trycss_grouping
Class Selector
10
The class selector is used to specify a style for a group
of elements. Unlike the id selector, the class selector is
most often used on several elements.
This allows you to set a particular style for any HTML
elements with the same class.
The class selector uses the HTML class attribute, and is
defined with a "."
Example
https://www.w3schools.com/css/tryit.asp?filename=trycs
s_syntax_class
Id Selector
11
The id selector is used to specify a style for a single,
unique element.
The id selector uses the id attribute of the HTML
element, and is defined with a "#"
Example
https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_id
Selectors
12
Identifier or class? What are the differences?
An identifier is specified only once on a page and has a higher
inheritance specificity than a class.
A class is reusable as many times as needed in a page.
Use identifiers for main sections and class for sub-sections of
your document
Advanced CSS Selectors
13
Descendant Selector
body h1 { }
#navigation p {}
Child Selectors
div ol > p {}
Universal Selector
* {}
• Attribute Selectors
a[href=“http://home.org”]
Pseudo-Class Selectors
a:active {}
#nav:hover {}
Using Style Sheets
14
External Style Sheet
<link rel=“stylesheet” type=“text/css” href=“location.css” />
Embedded/Internal Styles
<style type=“text/css”>
body {}
</style>
Inline Styles
<p style=“font-size: 12px”>Lorem ipsum</p>
multiple external style sheets can be referenced inside
a single HTML document
External Style Sheet Example
15
CSS Code
body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }
HTML Code
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is gray because we changed it with
CSS! </p>
</body>
</html>
Embedded/Internal Styles Example
16
CSS Code
<html>
<head>
<style type="text/css">
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>White text on a black background!</p>
</body>
</html>
Inline Styles Example
17
CSS Code
<html>
<head>
</head>
<body>
<p style="background: blue; color: white;">A new background
and font color with inline CSS</p>
</body>
</html>
Common Inline CSS Mistakes
18
When using CSS inline, you must be sure not to use
quotations within your inline CSS. If you use
quotations the browser will interpret this as the end of
your style value.
CSS Code
<p style="background: url("yellow_rock.gif");">
This is broken</p>
<p style="background: url(yellow_rock.gif);">
This is workin'</p>
Multiple Style Sheets
19
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.
For example, an external style sheet has these
properties for the h3 selector:
H3 { color:red; text-align:left; font-size:8pt; }
an internal style sheet has these properties for the h3
selector
H3 { text-align:right; font-size:20pt; }
internal style sheet also links to the external style sheet
the properties for h3:
color:red; text-align:right; font-size:20pt;
Cascading order
20
What style will be used when there is more than one
style specified for an HTML element?
Generally speaking we can say that all the styles will
"cascade" into a new "virtual" style sheet by the
following rules, where number four has the highest
priority:
Browser default
External style sheet
Internal style sheet (in the head section)
Inline style (inside an HTML element)
CSS Background
21
The background of your website is very important.
CSS background properties are used to define the
background effects of an element.
CSS properties used for background effects:
background-color
background-image
background-repeat
background-attachment
background-position
Background Color
22
Specifies the background color of an element
<html>
<head>
<style type="text/css">
body { background-color:#b0c4de; }
</style>
</head>
<body>
<h1>My CSS web page!</h1>
<p>Hello world! This is a W3Schools.com example.</p>
</body>
</html>
Background Color
23
The background color can be specified by -
name - a color name, like "red"
RGB - an RGB value, like "rgb(255,0,0)"
Hex - a hex value, like "#ff0000"
CSS Code
h4 { background-color: white; }
p { background-color: #1078E1; }
ul { background-color: rgb( 149, 206, 145); }
Background Image
24
Specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire
element.
<html>
<head>
<style type="text/css">
body {background-image:url(‘abc.gif');}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
background-repeat
25
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
Possible values are
repeat-x : repeated only horizontally
repeat-y : repeated only vertically
no-repeat : not repeated horizontally or vertically
background-position
26
The position of the image is specified by the
background-position property
background-position:right top;
background-attachment
27
You may choose to have your background scroll
naturally, or to have it in a fixed position.
The background-attachment property allows you to
set fixed and scrolling background images
textarea.noScroll {
background-image: url(smallPic.jpg);
background-attachment: fixed;
}
textarea {
background-image: url(smallPic.jpg);
background-attachment: scroll;
}
Background - Shorthand property
28
It is also possible to specify all the properties in one
single property. This is called a shorthand property.
The shorthand property for background is simply
"background":
body {background:#ffffff url('img_tree.png') no-repeat right top;}
order of the property values are:
background-color
background-image
background-repeat
background-attachment
background-position
It does not matter if one of the property values are missing, as long as the ones
that are present are in this order.
summary
29
Property Values
background-attachment Scroll/ fixed/ inherit
color-rgb/ color-hex/ color-name/ transparent/
background-color
inherit
background-image url(URL)/ none/ inherit
left top/ left center/ left bottom/ right top/
right center/ right bottom/ center top/
background-position
center center/center bottom/ x% y%/
xpos ypos/inherit
background-repeat repeat/repeat-x/repeat-y/no-repeat/inherit
30
CSS Font
CSS Font
31
CSS font properties define the font family, boldness,
size, and the style of a text
CSS Font Families
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 the
Verdana ends of characters
Monospace Courier New All monospace characters have the same width
Lucida Console
Font Family
32
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.
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 font-family: "Times
New Roman".
Example
33
<html>
<head>
<style type="text/css">
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman
font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body>
</html>
Font Style
34
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)
Example
p.normal {font-style:normal;}
p.italic {font-style:italic;}
Font Size
35
The font-size property sets the size of the text.
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
If you do not specify a font size, the default size for normal text, like
paragraphs, is 16px (16px=1em).
Set Font Size with Pixels
36
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
The example above allows Firefox, Chrome, and
Safari to resize the text, but not Internet Explorer.
Set Font Size With Em
37
To avoid the resizing problem with Internet Explorer,
many developers use em instead of pixels.
The em size unit is recommended by the W3C.
1em is equal to the current font size.
The default text size in browsers is 16px. So, the default
size of 1em is 16px.
Example
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
Font Weight
38
If you want to control the weight of your font (its
thickness), using font weight is the best way to go
about it.
It is recommended that you only use font-weight in
multiples of 100 (e.g. 200, 300, etc) because any less
and you probably will not see any difference.
The values range from 100 (thin)-900 (thick).
Example
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
Font Variant
39
CSS Font Variant allows you to convert your font to
all small caps.
Example
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
CSS Text
40
While CSS Font covers most of the traditional ways
to format your text, CSS Text allows you to control
the spacing, decoration, and alignment of your text.
Text Color
41
The color property is used to set the color of the text.
The color can be specified by:
name - a color name, like "red"
RGB - an RGB value, like "rgb(255,0,0)"
Hex - a hex value, like "#ff0000"
The default color for a page is defined in the body
selector.
Example
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
Text Decoration
42
The text-decoration property is used to set or remove
decorations from text.
The text-decoration property is mostly used to remove
underlines from links for design purposes:
a {text-decoration:none;}
text-decoration allows you to add horizontal lines
above, below, or through your text.
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
Text Indent
43
CSS text-indent is a great way to indent your
paragraphs without having to use preformatted HTML
tags, (<pre>), or inserting spaces manually ( ).
You may define your indentation with exact values or
percentages.
Example
p { text-indent: 20px; }
h5 { text-indent: 30%; }
Text Alignment
44
The text-align property is used to set the horizontal
alignment of a text.
Text can be centered, or aligned to the left or right, or
justified.
When text-align is set to "justify", each line is stretched
so that every line has equal width, and the left and
right margins are straight.
Example
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
Text Transformation
45
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.
Example
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
White Space
46
The white-space attribute allows you to prevent text
from wrapping until you place a break <br /> into your
text.
Example
p { white-space: nowrap; }
Word spacing
47
With the CSS attribute word-spacing you are able to
specify the exact value of the spacing between your
words.
Word-spacing should be defined with exact values
Example
p { word-spacing: 10px; }
Letter spacing
48
With the CSS attribute letter-spacing you are able to
specify the exact value of the spacing between your
letters.
Letter-spacing should be defined with exact values.
Example
p { letter-spacing: 3px; }
49
CSS Links
Links
50
Links can be style with any CSS property (e.g. color, font-
family, background-color).
Special for links are that they can be styled differently
depending on what state they are in.
The four links states are:
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
When setting the style for several link states, there are
some order rules:
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover
Example
51
<html>
<head>
<style type="text/css">
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
</head>
<body>
<p><b><a href="default.asp.html" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order
to be effective.</p>
</body>
</html>
52
CSS Lists
CSS Lists
53
Lists come in two basic flavors: unordered and
ordered.
However, CSS allows for more list customization than
HTML -- to the extent that even images can be used as
bullet points for unordered 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
Different List Item Markers
Example
54
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
Values for Unordered Lists
55
Value Description
None No marker
Disc Default. The marker is a filled circle
Circle The marker is a circle
Square The marker is a square
Values for Ordered Lists
56
Value Description
Armenian The marker is traditional Armenian numbering
Decimal The marker is a number
decimal-leading-zero The marker is a number padded by initial zeros (01, 02, 03, etc.)
The marker is traditional Georgian numbering (an, ban, gan,
Georgian
etc.)
lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek The marker is lower-greek (alpha, beta, gamma, etc.)
lower-latin The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)
upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)
upper-latin The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)
CSS Lists with Images
57
To specify an image as the list item marker, use the list-
style-image property:
Example
ul
{
list-style-image: url('sqpurple.gif');
}
Sample:
http://www.w3schools.com/css/tryit.asp?filename=try
css_list-style-image
CSS List Position
58
With CSS, it is possible to alter the indentation that
takes place with your list items.
Example
ul { list-style-position: inside; }
ol { list-style-position: outside; }
Sample:
http://www.w3schools.com/css/tryit.asp?filename=t
rycss_list-style-position
List - Shorthand property
59
When using the shorthand property, the order of the
values are:
list-style-type
list-style-position (for a description, see the CSS properties table
below)
list-style-image
Example
ul { list-style: decimal inside url(“notHere.gif");}
Sample:
http://www.w3schools.com/css/tryit.asp?filename=trycss_l
ist-style
End
60
