Scribd
Upload
9 views

Introduction to Css II

Uploaded by

kofikvng20
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
9 views

Introduction to Css II

Uploaded by

kofikvng20
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 76

ICT453: Internet Technologies &

Web Design

Cascading Style Sheets (CSS) II

Ghana Telecom University College


Lecturer - Lempogo Forgor
2013
Selector Type
 Tag
redefines the look of a specific tag
 E.g. body {background-color: #000000;}

 Class
can apply to any tag
 E.g. .indent{margin-right:5%;margin-left: 5%;}
 In HTML, <p class=“indent”>

 Advanced
IDs, pseudo-class selectors
 E.g. #myId {color: #38608A;}}

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Classes and IDs
 Class and id selectors are used to define styles in your
document that are independent of elements.
 Classes can be used to define styles for any number of
elements and for any number of occurrences of elements
in a document.
 The id attribute occurs only once in a document, so it
should not be used to declare styles for a number of
elements.
 For example
 if you know that a certain element in a document will be used
to uniquely identify the document, but you are not sure which
element it will be in each document, you can use the id
selector to generically reference the unique element
independent of the document itself.

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Class Selector Syntax
Style Sheet
.class_example {
color : red
}

HTML document reference

<p class=“class_example”>
ID Selector Syntax
Style Sheet
#id_example {
color : black
}

HTML document reference

<p id=“id_example”>
Using class and id Selectors
 Classes can also be assigned to individual elements to
allow more control over formatting.
 This is done by placing the name of an element in front of
the period in a class style declaration.
 For example, the following defines class formatting styles
that apply only to the <p> element:
p{ color: black }
p.red_text { color: red }
p.cyan_text { color: cyan}
 These declarations set font colors for the <p> element
depending on which class is defined in the element.
 If no class attribute is specified, then the declaration for
the <p> element of black is applied.
class and id Selectors Example
div.box{margin-top:50px;background-color:yellow;
color:#000090;border-style: double; padding:10px; border-
color:#000090; }
p { font-size:16pt; }
p.description{color:#000099;background-color:#cccccc; font-
style: italic; }
#identifier{ color:red; }
.right { text-align: right; }
* { color:#333333; font-family:arial; font-size:10pt; }
h1{ font-size:30pt; text-align:center; font-style:italic; }
h2{ font-size:18pt; text-align:left; font-style:italic; }
h3{ font-size:16pt; text-align:left; font-style:italic; }
<!DOCTYPE html>
class and id Selectors Example
<html lang="en"> <head> <title> CSS Example 2</title>
<link rel="stylesheet" href="example1.css" type="text/css">
</head> <body>
<h1> Course Description </h1>
<div class="box">
<div class="right">
<strong> Course Name: </strong> <span style="color:red"> Internet Technologies
</span> and Web Design <br>
</div> <strong> Course Code: </strong> ICT 453 <br>
<strong> Lecturer: </strong> Mr. Forgor Lempogo <br>
<strong> Class Meets: </strong> Mondays and Wednesdays <br> </div>
<h2 id="identifier"> Course Description: </h2>
<p class="description"> The purpose of this course is to give students the knowledge
and skills to build creative, interactive, and well-designed Web sites. </p>
<h3> Prerequisites
<ul><li> ICT 112 </li> <li> ICT 233 </li> </ul>
</body>
Property Inheritance
 We looked at nesting elements in the HTML5 notes.

 Elements that are contained within other elements


are said to be children of the outer elements, and the
outer elements are referred to as parents of the
nested elements.
 This hierarchy of elements is applied to CSS in the
form of property inheritance.
 Property inheritance means the properties that are
defined for parent elements are passed along to child
elements, unless the child element overrides the
property.
Round Corners in CSS3
 Prior to CSS3, being able to put a radiused (i.e.,
rounded) corner on a box element required some
fairly complex JavaScript or some very carefully
positioned graphics along with some nested <div>
elements.

 With CSS3, this requires only a single line in your


style sheet to accomplish.
Round Corners in CSS3
 The most basic form of the syntax is:

border-radius: 10px;
 The above syntax would style the element to which it
applied to have each corner of the box styled with 10
pixel radius corners.

 The usual box shorthands apply

 except that instead of top, right, bottom, left


(the usual order of the box sides),
 the order is top-left, top-right, bottom-right,
bottom-left, because it refers to corners, not sides.
Round Corners in CSS3
r v

 Until now the values specified are assumed to be the radius


of a circle. This is illustrated by the diagram on the left
above.
 To set elliptical corners to the element, two radii are
specified separated by a backslash as in:
border-radius:10px/20px;
 The first value is the horizontal radius, the second the
vertical radius.
Round Corners in CSS3
 If you want to set both the horizontal and vertical
radius differently on every corner you can write:

border-radius: 10px 6px 4px 12px / 20px 12px 6px 14px;

 where the first four numbers represent the horizontal radii and

the second set of four number represents the vertical radii.


Round Corners in CSS3
 Note that you do not need the border of the element
to be visible to use radiused corners
 the element’s background color will display the
rounding without the border itself being displayed.
 Note that radiused corners do not clip the content in
the box.
So an image that might normally be in the corner of the
box will still be there sticking out into the curved corner.
CSS3 – Radiused Corners

border-radius: 150px;
border-radius: 15px; width: 150px;
width: 150px;
CSS3 – Radiused Corners

border-radius: 35px/75px;
border-radius: 15px/35px; width: 150px;
width: 150px;
Box Shadows in CSS3
 Shadows on HTML element boxes are another example of an effect
that in the days before CSS3, used to take all kinds of graphics,
<div> elements, and patience to produce.
 With CSS3, again, only a single line is required to produce the effect.

 The basic syntax is:

box-shadow: 4px 4px 5px 8px #AAA inset;


 The order of the attributes is:

 horizontal offset

 vertical offset

 blur

 spread

 color

 shadow inside border (The default is outside).


Box Shadows in CSS3
 Minimally you must supply the horizontal offset, vertical
offset, and color, which produces a hard-edged shadow of
the specified width and color.

 If you use negative values for right and bottom, then the
shadow appears at the left and top, respectively.

 Some examples appear on the next page:


box-shadow: 4px 4px 8px 6px #aaa; box-shadow: -4px -4px 8px #aaa;
box-shadow: 4px 4px; box-shadow:4px 4px 5px #777 inset, -
4px -4px 5px #ccc inset;
CSS for Webpage Layout
Advantages of Using CSS For Page Layout
 When CSS is used to configure page layout in addition to formatting, all
the following advantages of using CSS for formatting are enhanced:
 Greater typography control.
 This includes font size, line spacing, letter spacing, indents, margins,
and element positioning without using tables.
 Style is separate from structure.
 The formatting and page layout can be configured and stored
separately from the content section of the Web page document.
 When the styles are modified, the HTML remains intact.
 Potentially smaller documents.
 Since both the formatting and page layout are separate from the
document, the actual HTML documents should be smaller.
 Easier site maintenance.
 Again, if the styles or page layout need to be changed it may be
possible to complete the modifications by changing only the style sheet.
Advantages of Using CSS For Page Layout (cont.)
 Increased page layout control.
 CSS used in conjunction with modern standards-compliant
browsers provides a variety of positioning options along with an
ability to overlap elements.
 This gives the Web developer more control over the layout
compared to the traditional use of tables.
 Increased accessibility.
 Pages designed using tables for layout are easy to view with a
traditional browser but can be very tedious when using a screen
reader or other assistive technology.
 By reserving the use of tables for their intended purpose of
organizing tabular information and using CSS for page layout – the
pages become more accessible.
 Ability to define styles for multiple media types.
 Since presentation is separated from content, CSS can be used to
set a separate style for printing, or possible use of a screen reader.
Disadvantages of Using CSS For Page Layout
 Lack of support by older browsers.
Note that as time passes, this will become less and
less of a disadvantage to the use of CSS3.

 Productivity drop.
Developers who are already proficient at developing
Web pages using tables for the layout will see
productivity drop (temporarily) as they learn about
CSS3 techniques and properties.
Positioning Content Using CSS
 In normal flow, the browser renders and places each block
content beneath the previous in the order that they appear
in the HTML5 source code.

 We can use CSS to augment this by specifying exactly


where we want to place a particular content on the page.

 We use either the


 absolute pixel location,
 location relative to where the element would normally display,
 floating on the page.
Relative Positioning
 Relative positioning is used to change the location
of an element slightly, relative to where it would
otherwise appear in normal flow.
 Use the position:relative property along with
either a left, right, and/or top property.
The left property configures the position of the
element in relation to the left side of the browser
window.
The right property configures the position of the
element in relation to the right side of the browser
window.
The top property configures the position of the
element in relation to the top of the document area in
the browser window.
Relative Positioning
<!DOCTYPE html>
<html lang="en"> <head> <title> CSS Example 2</title>
<style type="text/css">
h1{ background-color:#cccccc; padding:5px; color:#000000;}
#mycontent{ position:relative; left:40px; font-family:arial; }
</style>
</head>
<body>
<h1> Relative Positioning </h1>
<div id="mycontent">
<p> This Paragraph uses CSS relative positioning to place 40
this text 40px from the left side </p>
</div>
</body>
</html>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
Absolute Positioning
 Absolute positioning is used to specify the location of
an element precisely in a browser window.
 Use the position:absolute property along with
either a left, right, and/or top property need to
configure the placement.
The left property configures the position of the element
in relation to the left side of the browser window.
The right property configures the position of the
element in relation to the right side of the browser
window.
The top property configures the position of the element
in relation to the top of the document area in the browser
window.
Absolute Positioning
<!DOCTYPE html>
<html lang="en"> <head> <title> CSS Example 2</title>
<style type="text/css">
h1{ background-color:#cccccc; padding:5px; color:#000000;}
#mycontent{position:absolute; left:200px; top:100px;font-famiy:arial;
width:300px; height:250px;background:orange;border:1px yellow
double;}
</style>
</head>
<body>
<h1> Absolute Positioning </h1>
<div id="mycontent">
<p> This Paragraph uses CSS relative positioning to place 200px this
text 40px from the left side and 100px from the top </p>
</div>
</body>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
</html>
Absolute Positioning
 When working with absolute positioning it is
important to be aware that elements not absolutely
positioned will be rendered using normal flow by the
browser.
 Elements that are absolutely positioned are rendered
outside of normal flow.
Absolute Positioning
<!DOCTYPE html>
<html lang="en"> <head> <title> CSS Example 2</title>
<style type="text/css">
h1{ background-color:#cccccc; padding:5px; color:#000000;}
#mycontent{position:absolute; left:200px; top:100px;font-famiy:arial;
width:300px; height:250px;background:orange;border:1px yellow double;}
</style>
</head> <body>
<h1> Absolute Positioning </h1>
<div id="mycontent">
<p> This Paragraph uses CSS relative positioning to place 200px this text 40px
from the left side and 100px from the top </p>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
</ul>
</body> </html>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
The float Property
 Elements that seem to float on the right or left side
of either the browser window or another element
are often configured using the float property.
 The browser renders these element using normal
flow, and then shifts them as far as possible within
their container (usually either the browser window
or a <div>) to either the right or left. Other
content will flow around the float.
 To stop this flow, use the clear property.
The float Property
<!DOCTYPE html>
<html lang="en"> <head> <title> CSS float</title>
<style type="text/css">
h1{ background-color:#cccccc; padding:5px; color:#000000; }
p { font-family:Arial, sans-serif;}
.10left{ padding:10px; font-family:Arial, sans-serif; }
#picture{ float:right; margin:0 0 5px 0; border:solid;}
</style>
</head><body>
<p><img id="picture" src="Penguins.jpg" height="300" width="300">
<h1> Floating an Image </h1>
<p class="10left"> This Paragraph uses CSS float to place place an
image on the left side of text </p>
<p class="10left"> This Paragraph uses CSS float to place place an
image on the left side of text </p>
</body>
ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor
</html>
Practice Problems
1. Experiment with the CSS box model and the
absolute positioning property to produce a
webpage that looks similar to the one shown on
the next page. All of these boxes were rendered
using absolute positioning, none were rendered in
normal flow. Also experiment with allowing the
boxes to be positioned using normal flow and
rearrange their order of appearance in the XHTML
markup and notice how the rendering differs.
Then experiment with a mixture of absolute
positioning and normal flow and see what
happens to the rendering.
Practice Problems
2. Experiment with the CSS box model and the
absolute positioning property to produce a
webpage that looks similar to the one shown on
the next page. All of these boxes were rendered
using absolute positioning, none were rendered in
normal flow. Also experiment with allowing the
boxes to be positioned using normal flow and
rearrange their order of appearance in the XHTML
markup and notice how the rendering differs.
Then experiment with a mixture of absolute
positioning and normal flow and see what happens
to the rendering.
In this problem all the boxes are 100 x 100 pixels
in size.
Practice Problems
3. Modify your HTML/CSS from problem 2 so that it
looks like that shown on the next page. Box 10
in this case is the exact same width as the sum
of all the other boxes.
Basic Page Layout Concepts
Todays websites have column based layouts that
can fix their width at various defined sizes based on
the width of the user’s display.
This, of course, is targeting mobile devices.
Creating sites that can adapt to the largest and
smallest of screens in this fashion is known as
responsive design.
CSS easily aids this process
Tutorial - Creating Columns

In this tutorial, We will use CSS to create a three-


column layout.
Once you understand the concepts of how its
done, you can create layouts with as many
columns as you’d like.
We will use colored backgrounds for each of the
columns in the layouts with some dummy content.
The <div> Tag

• Defines a division or section


in an HTML document

• Visually, allows us to make


containers that can be
formatted
Without any <div> tags

<html>
<head></head>
<body>
<h2>Fun with Div Tags and CSS</h2>

<p>Aloha!</p>

<p>Let’s play with div tags. These tags create divisions within a web
page that can be formatted using style elements. </p>

</body>
</html>
<!DOCTYPE html>
CREATING COLUMNS
<html>
<head> </style>
</head>
<style>
<body>
#header {
<div id="header">
background-color:black;
<h1>City Gallery</h1>
color:white; </div>
text-align:center;
padding:5px; <div id="nav">
} London<br>
#nav {
Paris<br>
Tokyo<br>
line-height:30px;
</div>
background-color:#eeeeee;
height:300px; <div id="section">
width:100px; <h2>London</h2>
float:left; <p>
padding:5px; London is the capital city of England. It is the most populous city in the
United Kingdom,
}
with a metropolitan area of over 13 million inhabitants.
#section {
</p>
width:350px;
<p>
float:left; Standing on the River Thames, London has been a major settlement
padding:10px; for two millennia,
} its history going back to its founding by the Romans, who named it
Londinium.
#footer {
</p>
background-color:black;
</div>
color:white;
clear:both; <div id="footer">
text-align:center; Copyright © W3Schools.com
padding:5px; </div>
}
</body>
</html>
Creating Columns - HTML
Creating Columns - CSS
Creating Columns - Results
Creating Columns - Results
 By fixing the width of the wrapper and applying auto
horizontal margins to it, as shown in the CSS, the layout
will be centered in the window.
 Its height can increase freely as more content is added to
it (see next page rendering with more content added to
the first paragraph - browser window not resized from
previous version).
 The article element inside the wrapper div simply
behaves like any unwidthed block-level element and
expands horizontally to fill the wrapper.
Add Columns
 We will add a second column of navigational elements to
the left side of the page.
 we need to float the wrapper containers for the two
columns in order to get them to sit side by side.
 the width of the two containers must equal the width of
the wrapper (150+810=960), and floating them causes
them to sit side by side to form two columns.
 Each column is as long as its content.

 Other columns can be added in that manner


Add Columns - HTML
Add Columns - HTML
Add More Columns
 We will add the third column, which will play the role of an
aside in our three-column layout.
 Once again, we will need to adjust the width of the
article column to make room for the new aside
content column.
 the total horizontal width must equal 960 pixels, so we’ll
leave the navigational content at 150 pixels, and make
the aside content 210 pixels wide.
960 – 150 – 210 = 600 pixels for the new width of the
article (main) column.
 We now have the framework in place for a three-column
layout.
Add More Columns
Adding a Header and a Footer
 Most multi-column layouts have a full-width header and
footer, so let’s add them to our layout next.

 As before, the block-level elements will default to full-


width of their encompassing container, which is of course
the effect that we want.

 We will color their backgrounds differently here so it is


obvious where the various elements are being placed on
the page.
Adding a Header and a Footer
 The footer follows floated elements in the markup, so it
moves up as high as it can in the layout.
 To fix this problem we must make the footer clear any
elements on both its left and right sides.
 Note that in this case, clearing on the left only would work
equally well, as there are only floated left elements in this
case.
 In any case, the clear prevents the footer from moving up
above the bottom of the floated elements. The footer will
now set under whichever column is the longest.
Fixing Some Issues
While the layout on the previous page looks pretty
good, there are two obvious issues with it.
First the content is jammed against the edges of the
columns.
Second, the columns are only as tall as their content and
the layout would look better if they were all full height.
The first problem is handled with padding and
margins
Float Slips

 When working with content inside the columns, the


layout can become wider than its container, and the
right column will slip under the left column.

 Where the floated right column no longer has room to


sit next to the other, and slips down under the left
column.
Float Slips - Causes
 There are two ways this usually happens:

Adding horizontal margins and padding to the columns to


move their content away from the sides, increases the
width of the layout, and causes “float-slip”
Adding margins to the columns to create space between
them increases the width of the layout, and causes “float-
slip”
Adding large images, or long sequences of characters with
no spaces such as URLs, can force the column width to
exceed the layout width.
Float slip occurs
when adding 10px
top and bottom
padding and 20px
left and right
padding to the
<article>
element (center
column)
Preventing Float-Slip
 There are three ways to prevent the “float-slip”:

Reduce the stated width of the element by the total of the


horizontal margins, borders, and padding that are added
to it.
Apply the padding or margins to elements inside the
container instead of to the container itself (the nested div
approach).
Switch the way box sizing works by using the CSS3 box-
sizing property, like this: section { box-sizing:
border-box; }
Preventing Float-Slip – Solution 1
 Reset the width to offset the padding and borders

 Suppose that we add 20 pixels of padding to each side of a


600-pixel-wide column.
 To compensate for the added padding, you would need to
narrow the width of the column by 40 pixels to 560 pixels, and
then the right column would move back into position.
 Problem

 resetting the width of the layout every time you adjust the
margins or padding would get very tedious, and is thus not an
ideal situation.
 It is too easy to break the layout, even accidently, when
adjusting the padding and borders.
Preventing Float-Slip – Solution 2
 Apply padding and borders to elements inside the container

 As long as the elements do not have an explicit width, their


content will simply get narrower as margins or padding are
added to them.

 Problem

 A very large number of different content elements can appear


within a column and to change the distance of the content from
the edge of the container, you have to adjust that distance on
every content element, which is again tedious and invites
errors.
Preventing Float-Slip – Solution 2
 Using nested <div> approach to overcome the problem.

Add an unwidthed <div> inside the column that encloses


all the content elements, applying the borders and
padding to that element instead
This in effect contain the expansion of the margins,
borders and padding to within the enclosing <div>
element.
 The advantage

All content elements can be moved the same distance


away from the edge of the column with a single setting on
the inner <div> that is easily adjusted later if necessary.
Preventing Float-Slip – Solution 2
 Using nested <div> approach we can modify the layout
code to add a margin, border and padding to the inner div of
the center column.
 The relevant CSS and HTML are shown below:
Preventing Float-Slip – Solution 2
 Now that you see how the nested <div> approach works,
we’ll complete this step by adding nested <div>s to the
other two columns and removing the borders, padding, and
margins on the center column, to produce a final fixed-width
layout using the nested <div> approach.
 Notice the improvements with the added space around the
text in each of the columns.
 Also notice that I centered the text in the footer. I removed
some of the text from the footer so that this change is
apparent.
Preventing Float-Slip – Solution 3
 CSS3 has a new property that can be applied to any block-
level element in the markup.
 This new attribute is box-sizing:border-box.
 For firefox it is -moz-box-sizing:border-box;
 This property can be added to each of the three floated
columns,
 Padding and margins can be added to the box without
having to adjust the width of the columns to compensate,
nor do you have to add inner <div> elements.
Preventing Float-Slip – Solution 3
 When padding and margins are added to an element using
this property, the content is automatically squeezed down
instead.
 This property causes the same behavior of the columns as
the nested <div> technique, but now the markup is much
cleaner and there are no nested <div> elements to deal
with.
 The rendering of the document will look exactly the same as
was the case when the nested <div> approach was used,
but the markup will appear much cleaner.
Any Questions?

ICT453: Internet Technologies and Web Design - GTUC 2013 Delivery #Lempogo Forgor

You might also like