Cascading Style Sheets
1. CSS BACKGROUNDS
property description
a. background-color color to fill background
b. background-image image to place in background
c. background-position placement of BG image within element
d. background-repeat whether/how BG image should be repeated
e. background-attachment whether BG image scrolls with page
f. background shorthand to set all background properties
(a) background-color
• The background-color property specifies the
background color of an element.
– Example:
body {background-color:lightblue;}
• 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
background-color(2)
• In the example below, the h1, p, and div
elements have different background colors:
– Example
h1 {background-color: rgb(0,255,255);}
p {background-color:lightblue;}
div {background-color:#b0c4de;}
(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.
• By default, the background-image property
repeats an image both horizontally and vertically.
background-image (2)
body {
background-image: url(“dog.jpg");
}
CSS
• background image/color fills the ENTIRE element's content area
(c) background-repeat
body {
background-image: url(“dog.jpg");
background-repeat: repeat-x;
}
CSS
• can be repeat (default), repeat-x, repeat-y, or no-repeat
(d)background-position
body {
background-image: url("images/draft.jpg");
background-repeat: no-repeat;
background-position: 970px 20px;
} CSS
• value consists of two tokens, each of which can be top, left, right,
bottom, center, a percentage, or a length value in px, pt, etc.
• value can be negative to shift left/up by a given amount
2. CSS TEXT FORMATTING
CSS Text Properties
text-decoration: (none, underline, line-through) -- p{text-decoration: underline;}
letter-spacing: (pixels) -- p{letter-spacing: 5px;}
word-spacing: (pixels) -- p{word-spacing: 5px;}
text-align: (left, right, center, justified) -- p{text-align: center;}
text-indent: (pixels or percentage) -- p{text-indent: 5%;}
(a) Text Color
• 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: blue;}
h1 {color: #00ff00;}
h2 {color: rgb(255,0,0);}
CSS Text Color
(b) Text Align
• 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 (like in
magazines and newspapers).
• Example
h1 {text-align: center;}
p.date {text-align: right;}
p.main {text-align: justify;}
(c) Text Decoration
• 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:
Example
a {text-decoration: none;}
• It can also be used to decorate text:
Example
h1 {text-decoration: overline;}
h2 {text-decoration: line-through;}
h3 {text-decoration: underline;}
h4 {text-decoration: blink;}
(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.
• Example
– p.uppercase {text-transform: uppercase;}
– p.lowercase {text-transform: lowercase;}
– p.capitalize {text-transform: capitalize;}
3. CSS FONT PROPERTIES
property description
font-family which font will be used
font-size how large the letters will be drawn
font-style used to enable/disable italic style
font-weight used to enable/disable bold style
Complete list of font properties (http://www.w3schools.com/css/css_reference.asp#font)
(a) CSS Font Family
• 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.
• Note: If the name of a font family is more than one word, it must
be in quotation marks, like font-family: "Times New Roman".
• More than one font family is specified in a comma-separated list:
for instance:
p{font-family: "Times New Roman", Times, serif;}
(b) 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)
• Example
– p.normal {font-style: normal;}
– p.italic {font-style: italic;}
– p.oblique {font-style: oblique;}
(c) CSS 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.
(i) Set Font Size With Pixels
• Setting the text size with pixels, gives you full
control over the text size:
• Example
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
(ii) Set Font Size With Em
• 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.
• The size can be calculated from pixels to em using this formula: pixels/16=em
• 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 */
4. STYLING LINKS
• 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
• Example
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 */
(a) Text Decoration
• The text-decoration property is mostly used to
remove underlines from links:
• Example
– a:link {text-decoration: none;}
– a:visited {text-decoration: none;}
– a:hover {text-decoration: underline;}
– a:active {text-decoration: underline;}
(b) Background Color
• The background-color property specifies the
background color for links:
• Example
• a:link {background-color:#B2FF99;}
• a:visited {background-color:#FFFF85;}
• a:hover {background-color:#FF704D;}
• a:active {background-color:#FF704D;}
5. CSS LISTS
• Recall that in HTML, there are two types of
lists:
– UL - list items are marked with bullets
– OL- list items are marked with numbers or letters
Different List Item Markers
• The type of list item marker is specified with
the list-style-type property:
• Example
• 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;}
6. CSS TABLES
• 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:
– Example
• table, th, td{border: 1px solid black;}
CSS TABLES (2)
• You can set the following properties of a table:
• The border-collapse specifies whether the browser should
control the appearance of the adjacent borders that touch
each other or whether each cell should maintain its style.
• The border-spacing specifies the width that should
appear between table cells.
• The caption-side captions are presented in the <caption>
element. By default, these are rendered above the table in
the document. You use the caption-side property to control
the placement of the table caption.
CSS TABLES (3)
• The empty-cells specifies whether the border
should be shown if a cell is empty.
• The table-layout allows browsers to speed up
the layout of a table by using the first width
properties it comes across for the rest of a
column rather than having to load the whole
table before rendering it.
(a) Table Width and Height
• Width and height of a table is defined by the width
and height properties.
• The example below sets the width of the table to
100%, and the height of the th elements to 50px:
• Example
– table{width:100%;}
– th{height:50px;}
(b) Table Text Alignment
• The text in a table is aligned with the text-
align and vertical-align properties.
• The text-align property sets the horizontal
alignment, like left, right, or center:
• Example
– td{text-align: right;}
(c) Table Padding
• To control the space between the border and
content in a table, use the padding property on
td and th elements:
• Example
– td{padding:15px;}
(d) Table Color
• The example below specifies the color of the
borders, and the text and background color of
th elements:
• Example
table, td, th{border:1px solid green;}
th{background-color: green; color: white;}
(7) 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
HTML elements, and it consists of: margins, borders,
padding, and the actual content.
• The box model allows us to place a border around elements
and space elements in relation to other elements.
CSS Box Model
• Every rendered element in CSS occupies a
box:
CSS Box Model (2)
(a) Width and Height of an Element
• Important: When you specify the width and height properties of an
element with CSS, you are just setting the width and height of the content
area.
• To know the full size of the ELEMENT, you must also ADD the padding,
border and margin.
• The total width of the element in the example below is 300px:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
(b) CSS Border Width
• The border-width property is used to set the width of the
border.
• The width is set in pixels, or by using one of the three pre-
defined values: thin, medium, or thick.
• Note: The "border-width" property does not work if it is used
alone. Use the "border-style“ property to set the borders first.
• Example
p.one{border-style: solid; border-width:5px;}
p.two{border-style: solid; border-width: medium;}
(c)Border Color
• The border-color property is used to set the color of the border. The color
can be set by:
– * name - specify a color name, like "red"
– * RGB - specify a RGB value, like "rgb(255,0,0)"
– * Hex - specify a hex value, like "#ff0000“
• NB: The "border-color" property does not work if it is used alone. Use
the "border-style“ property to set the borders first.
• Example
– p.one{ border-style: solid; border-color: red;}
– p.two{border-style: solid; border-color:#98bf21;
• }
(d) CSS margin
• The margin clears an area around an element (outside the border).
• NB: The margin does not have a background color, and is completely transparent.
• The top, right, bottom, and left margin can be changed independently using
separate properties.
• To shorten the code, it is possible to specify all the margin properties in one
property. This is called a shorthand property.
• The shorthand property for all the margin properties is "margin":
• example
– margin:100px 50px;
HTML Code
<!Doctype html>
<html>
<head>
<title>CSS Practical</title>
<link rel = "stylesheet" type = "text/css" href="mystyle.css">
</head>
<body>
<div class="container wrapper">
<div id="top">
<h3>Cascading Style Sheets</h3>
</div>
HTML Code (2)
<div id = "intro">
<h4>What is CSS?</h4>
<img src = "css.png" height = "290" width = "780">
<p>CSS is short for Cascading Style Sheets. It is a language that
describes how HTML elements will be displayed on a webpage. Where
HTML will describe the content and structure of the page,
CSS describes the appearance, layout, and presentation of the
webpage.</p>
</div>
HTML Code (3)
<div id = "benefits">
<h4>Benefits of using CSS</h4>
<p><Some of the benefits of using CSS include:</p>
<ol>
<li>Easier coding</li>
<li>Consistency</li>
<li>Code reuse</li>
<li>Rich design and layout</li>
<li>Easier maintenance of webpages</li>
</ol>
</div>
HTML Code (4)
<div id = "apply">
<h4>Applying CSS to HTML</h4>
<p>CSS can be applied to HTML in 3 different ways
namely:</p>
<ul>
<li>Inline</li>
<li>Internally</li>
<li>Externally</li>
</ul>
</div>
HTML Code (5)
<div id="bottom">
<p>© University of Zimbabwe 2019</p>
</div>
</div> NB: This div closes the wrapper
</body>
</html>
CSS code
</* Stylesheet 1: */ #top, #intro, #benefits, #apply{
.container { border-radius: 4px;
margin: 4px;
xmin-width: 900px;
}
}
#top {
.wrapper { background-color:
position: relative; #4CAF50;
color: #ffffff;
overflow: auto;
padding: 5px;
}
CSS code (2)
#intro{ #benefits{
background-color: #000000; background-color: #32a4e7;
color: #ffffff;
padding: 10px;
padding: 10px;
margin: 0 210px; width: 190px;
color:#ffffff; bottom: 0;
} top: 0;
left: 0;
position: absolute;
text-align: left;
}
CSS code (3)
#apply{ #bottom {
background-color: #32a4e7; background-color: #4CAF50;
color: #ffffff;
color: #ffffff;
padding: 10px;
padding: 5px;
width: 190px;
bottom: 0; text-align: center;
top: 0; font-size: 70%;
right: 0; line-height: 14px;
float: right; }
position: absolute;
}
body{
background-color: rgb(135,206,250);
margin: 20px;
h3{
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:32px;
color: white;
}
h4{
text-align: center;
font-family: Georgia, "Times New Roman", Times,
serif;
color: white;
}
p, ol, ul{
font-style: italic;
font-size:11pt;
font-variant: normal;
font-weight: normal;
line-height: normal;
font-family: "Helvetica", sans-serif;
}
