TUTORIAL 8:
Enhancing a Web Site with Advanced
CSS
SESSION 8.1.
OBJECTIVES
 Designing for the Mobile Web
 Testing a Mobile Design
 Configuring the Viewport
 Introducing Media Queries within HTML Documents
 Creating a Mobile Style Sheet
 Introducing Media Queries within CSS Files
 Designing for Portrait Orientation
 Designing for Landscape Orientation
DESIGNING FOR THE MOBILE WEB
TESTING ON MOBILE DEVICES
 Six Free Mobile Devices Emulators for testing your
site:
http://www.webdesignerdepot.com/2012/11/6-free-mobile-deviceemulators-for-testing-your-site/
CONFIGURING THE VIEWPORT
 Mobile devices can display pages written for the larger
screens found on desktop computers.
 The contents of a Web page are displayed within a window
known as the viewport.
 Visual viewport
 Layout viewport
CONFIGURING THE VIEWPORT
PRACTICE: CONFIGURING THE VIEWPORT
1. Open the tmc.htm file. Add the viewport
meta tag.
INTRODUCING MEDIA QUERIES WITHIN THE
HTML DOCUMENT
To create a media query for loading a style sheet,
add the media attribute
media = “devices and|or (features)”
to the link element, where devices is a list of
media devices, and features is a list of display
features and their values as found on those
devices
INTRODUCING MEDIA QUERIES WITHIN THE
HTML DOCUMENT
 To associate a style sheet with screen devices that are
less than or equal to a specific width, use the query
media = “screen and (max-width: value)”
where value is the maximum allowable width of the
screen’s viewport
 To associate a style sheet with screen devices that are
greater than or equal to a specific width, use the query
media = “screen and (min-width: value)”
where value is the minimum allowable width of the
screen’s viewport.
INTRODUCING MEDIA QUERIES WITHIN THE
HTML DOCUMENT
 To associate a style sheet with screen devices
that fall within a range of screen widths, use the
following query:
media = “screen and (min-width: value
and max-width: value)”
 To associate a style sheet with screen devices in
portrait or landscape mode, use the query
media = “screen and (orientation:
type)”
where type is either portrait or landscape.
PRACTICE: MEDIA QUERIES WITHIN HTML
1.
2.
3.
4.
Add a link to the tmceffects.css style sheet file, using the style sheet
for screen devices that have a minimum width of 501 pixels. Add the
same media query for the tmclayout.css style sheet file.
Use an Internet Explorer conditional comment for versions of IE
before version 9 to link to the tmclayout.css and tmceffects.css style
sheet for screen devices.
Many patients and visitors visit the TMC website using mobile
devices. Create a mobile version for TMC. Open tmcmobile.css from
your data file folder in your text editor. Enter your name and the date
in the comment section of the file, and then save tmcmobile.css.
Create a link to the tmcmobile.css file to be accessed by only screen
devices with maximum widths of 500 pixels.
CREATING A MOBILE STYLE SHEET
PRACTICE: CREATING A MOBILE STYLE SHEET
Within the tmcmobile.css file, add a style rule to hide the nav tag
within the header element, the image tag within the header
element, the main section, the aside and the footer.
2. Set the background color of the body to (107, 140, 80).
3. For the header element, create a style rule to:
 Change the background with the image file hospview.jpg placed
in the center-bottom of the background with no tiling
 Set the width to 100%
 Set the height to 150 pixels.
1.
PRACTICE: CREATING A MOBILE STYLE SHEET
4. The navigation list containing links to each of the departments at TMC
has the id depts. Create a style rule to set the width of this navigation
list to 100%.
5. For the h1 elements within the depts navigation list, create a style rule
to:
 Set the font size to 25 pixels
 Set the font color to white
 Set the margin to 15 pixels
 Center the text of the heading
INTRODUCING MEDIA QUERIES WITHIN CSS
 To apply a media query to a collection of style rules,
apply the @media rule
@media devices and|or (features) {
styles
}
in your style sheet, where styles is those styles
applied to the specified devices and features.
 To import a style sheet based on a media query,
apply the following @import rule:
@import url(url) devices and|or (features)
DESIGNING FOR PORTRAIT ORIENTATION
DESIGNING FOR LANDSCAPE ORIENTATION
PRACTICE: MEDIA QUERIES WITHIN CSS
The preceding styles will be applied by default to the page in portrait
orientation. Create an @media rule for the page in landscape orientation.
2. Add the following style rule for list items of the nav element with the
depts id displayed in landscape orientation:
 Set the width to 30%
 Float the list items on the left
 Set the margins to 5 pixels
3. For portrait orientation, the navigation list containing links to each of the
departments at TMC has the id depts. Create a style rule for the
navigation links to:
 Display the links as blocks and set their width to 100%
 Set the text color to white and align the text in the center
 Set the space between lines to 50px
1.
PRACTICE: MEDIA QUERIES WITHIN CSS
4. Along with the “portrait orientation” styles, create style rule for list items in the
depts navigation list to:
 Display the items as blocks
 Add the background image file arrow.png to the right-center of the background
with no tiling
 Set the width to 60% and the height to 50 pixels
 Add top and bottom margins of 5 pixels, and add left and right margins of auto
 Add a 1px solid white border and a radius of 10px