HTML and CSS Reference
In-Depth Information
What Role Does It Play?
For our purposes, CSS3 will act as the visual layer. It will give the app its “skin” and provide that polished aesthetic
we're after and create small, non-essential effects to enhance the user experience for those who are using browsers
that support them.
How Does It Work?
CSS is linked into the HTML document via a
link
tag in the document's
head.
It is then parsed by the browser to
apply style rules to the elements contained in the markup. This topic assumes basic knowledge of CSS, so we'll be
covering only the new features of CSS3 that you'll be using in the application.
eXerCISe 2-2: aDD CSS tO the paGe
let's continue with our code from exercise 2-1 and add some Css to the page. start by creating a new folder
called
styles
in the same folder as the htMl file, and create a new file in
styles
called
02.css
.
Next, add a
<link>
tag to the htMl file we created in exercise 02-01 in the
<head>
section. this will load our
Css file:
<head>
<meta charset="utf-8" />
<title>Realtime Web Apps – Exercise 02-01</title>
<link rel="stylesheet" href="styles/02.css" />
</head>
the Css file is empty right now, so let's add a few rules to give our htMl some style. We'll include some Css3
for extra flair as well:
/*
* Exercise 02-02, Realtime Web Apps
*
* @author Jason Lengstorf <jason@copterlabs.com>
* @author Phil Leggetter <phil@leggetter.co.uk>
*/
html { background: #efefdc; }
body {
width: 660px;
margin: 40px auto;
background: #def;
border: 2px solid #779;
/* Creates two shadow effects: outer and inner */
-webkit-box-shadow: 0 1px 6px #88a, inset 0 -1px 10px white;
-moz-box-shadow: 0 1px 6px #88a, inset 0 -1px 10px white;
-o-box-shadow: 0 1px 6px #88a, inset 0 -1px 10px white;
Search WWH ::
Custom Search