Session 6 - CSS Part 2
Last session we covered some of the CSS that can be used to enhance the visual appeal of a web page. We looked at colours and some tools that can be used to select colours and colours schemes.
We used the CSS box model to add borders, padding and margins to BLOCK level elements.
We looked at the special CSS properties for links and tables.
In this session we will continue with CSS, cover some more styling properties and also some positioning properties.
For example, list items,<li>, are block elements as each one starts a new line. The following HTML shows a standard list.
<html>
<head>
<title>Sample CSS</title>
<style type="text/css">
body{background-color: #FCE4FA}
h2 {background-color:#AC63E4;
padding:20px;
border-width:20px;
border-color: #4C0146;
border-style: solid;
margin:30px;
width:300px}
ul {list-style-type: square;}
</style>
</head>
<body>
<h1>HTML/CSS Box Model in Action</h1>
<h2>This is Content</h2>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
<li>Pears</li>
<li>Strawberries</li></ul>
</body>
</html>
Add some styling:
li {display: inline;
text-align: center;
background-color: #85c1e9;
border-color: #283747;
border-width: 5px;
border-style: solid;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
and you get:
<div id="menulist">
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
<li>Pears</li>
<li>Strawberries</li></ul></div>
and the Style information
ul {list-style-type: none;}
#menulist {background-color: #85c1e9 ;
width: 650px;
padding: 5px;}
li {display: inline;
text-align: center;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
Produces:
In the same way, we can force inline elements to display as block elements.
The following code shows the use of the <a> element to create a simple menu. The <a> element is usually an inline element.
<html>
<head>
<title>Sample CSS</title>
<style type="text/css">
body{background-color: #FCE4FA}
#menulist {background-color: #85c1e9 ;
width: 150px;
padding: 5px;
float: left;}
#contentarea {margin-left: 170px}
a {display: block;
padding:10px;
background-color: #f0b27a;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;
background-color: #f4d03f; }
</style>
</head>
<body>
<h1>HTML/CSS Box Model in Action</h1>
<div id="menulist">
<a href="https://www.petrescue.com.au/">Petrescue</a>
<a href="https://www.rspca.org.au/">RSPCA</a>
<a href="https://dogshome.com/">Lost Dogs Home</a>
<a href="https://www.lortsmith.com/">Lort Smith</a>
</div>
<div id="contentarea">
<h2>This is Content</h2>
<p>Content area content area Content area content area Content area content area Content area content area Content area content area
Content area content area Content area content area Content area content area Content area content area Content area content area
Content area content area Content area content area Content area content area Content area content area Content area content area
Content area content area Content area content area Content area content area Content area content area Content area content area
</p>
</div>
</body>
</html>
The web page would look like the following:
<html>
<head>
<title>Sample CSS</title>
<style>
img {float: left;
margin-right:10px;}}
</style>
</head>
<body>
<h1>Float in Action</h1>
<div id="contentarea">
<h2>This is Content</h2>
<img src="JedCouch.jpg" width="400">
<p>Content area content area Content area content area Content area content area Content area content area Content area content area
Content area content area Content area content area Content area content area Content area content area Content area content area
Content area content area Content area content area Content area content area Content area content area Content area content area
Content area content area Content area content area Content area content area Content area content area Content area content area
</p>
</div>
</body>
</html>
This will display a page that looks like the following:
We used the CSS box model to add borders, padding and margins to BLOCK level elements.
We looked at the special CSS properties for links and tables.
In this session we will continue with CSS, cover some more styling properties and also some positioning properties.
Display
The Display property allows you to change an inline element into a block element and vice versa.For example, list items,<li>, are block elements as each one starts a new line. The following HTML shows a standard list.
<html>
<head>
<title>Sample CSS</title>
<style type="text/css">
body{background-color: #FCE4FA}
h2 {background-color:#AC63E4;
padding:20px;
border-width:20px;
border-color: #4C0146;
border-style: solid;
margin:30px;
width:300px}
ul {list-style-type: square;}
</style>
</head>
<body>
<h1>HTML/CSS Box Model in Action</h1>
<h2>This is Content</h2>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
<li>Pears</li>
<li>Strawberries</li></ul>
</body>
</html>
Add some styling:
li {display: inline;
text-align: center;
background-color: #85c1e9;
border-color: #283747;
border-width: 5px;
border-style: solid;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
and you get:
Using <Div> and <Span>
The same example using <div><div id="menulist">
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
<li>Pears</li>
<li>Strawberries</li></ul></div>
and the Style information
ul {list-style-type: none;}
#menulist {background-color: #85c1e9 ;
width: 650px;
padding: 5px;}
li {display: inline;
text-align: center;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
Produces:
In the same way, we can force inline elements to display as block elements.
The following code shows the use of the <a> element to create a simple menu. The <a> element is usually an inline element.
<html>
<head>
<title>Sample CSS</title>
<style type="text/css">
body{background-color: #FCE4FA}
#menulist {background-color: #85c1e9 ;
width: 150px;
padding: 5px;
float: left;}
#contentarea {margin-left: 170px}
a {display: block;
padding:10px;
background-color: #f0b27a;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;
background-color: #f4d03f; }
</style>
</head>
<body>
<h1>HTML/CSS Box Model in Action</h1>
<div id="menulist">
<a href="https://www.petrescue.com.au/">Petrescue</a>
<a href="https://www.rspca.org.au/">RSPCA</a>
<a href="https://dogshome.com/">Lost Dogs Home</a>
<a href="https://www.lortsmith.com/">Lort Smith</a>
</div>
<div id="contentarea">
<h2>This is Content</h2>
<p>Content area content area Content area content area Content area content area Content area content area Content area content area
Content area content area Content area content area Content area content area Content area content area Content area content area
Content area content area Content area content area Content area content area Content area content area Content area content area
Content area content area Content area content area Content area content area Content area content area Content area content area
</p>
</div>
</body>
</html>
The web page would look like the following:
Floating Images
The following code will float an image to the left with the content text on the right hand side of the image<html>
<head>
<title>Sample CSS</title>
<style>
img {float: left;
margin-right:10px;}}
</style>
</head>
<body>
<h1>Float in Action</h1>
<div id="contentarea">
<h2>This is Content</h2>
<img src="JedCouch.jpg" width="400">
<p>Content area content area Content area content area Content area content area Content area content area Content area content area
Content area content area Content area content area Content area content area Content area content area Content area content area
Content area content area Content area content area Content area content area Content area content area Content area content area
Content area content area Content area content area Content area content area Content area content area Content area content area
</p>
</div>
</body>
</html>
This will display a page that looks like the following:
Comments
Post a Comment