A short taster session into the fundamental technologies powering the world wide web.
Pair Programming: CSS
In this session we will be working in small groups on a small seperate project. We will be creating drawings using just the power of HTML and CSS that we have recently learnt.
Pair programming is a software development technique where two developers work at one computer. One developer writes code and the other checks each line and offers help. The two developers switch roles frequently.
To diplay a div
There are three CSS properties that you must set to display a <div> element.
- width
- height
- background-color
We'll do this now, for instance:
<head>
<style>
#square {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="square">
</div>
</body>
<!DOCTYPE>, <html>, <head> and <body> tagsposition: relative;
Before we can create shapes and draw interesting objects with CSS we need to know how to position our elements. We'll then be able to move the shapes around on screen to combine simple shapes into more complicated ones.
To position an element, we can set a CSS property called position to a value of relative;. This means we want to position an element relative to its normal position.
Once we have set a position to relative, we can access four more css properties, top, left, bottom, right. You can use these properties to control (in pixels) how far an item should be moved.
<head>
<style>
#square {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="square">
</div>
</body>
This moves the #square 100px both in from the left and down from the top. 100px relative to its normal position.
More shapes
There are lots of shapes that you can create using just CSS, all relying on clever tricks. Below are some of the simpler ones.
#rectangle {
width: 200px;
height: 50px;
background-color: blue;
}
#circle {
width: 100px;
height: 100px;
border-radius: 50px;
background-color: green;
}
#oval {
width: 200px;
height: 100px;
background: red;
border-radius: 50%;
}
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid gray;
}
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid lightseagreen;
}
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid khaki;
border-bottom: 50px solid transparent;
}
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid orangered;
border-bottom: 50px solid transparent;
}
There are yet more avaliable here!