Arduino Ethernet Shield - part 18
CSS for Positioning, Sizing and Spacing
Created on: 11 April 2013
Part 18 of the Arduino Ethernet Shield Web Server Tutorial
Part 16 of this tutorial uses CSS to position HTML div elements that contain Arduino inputs and outputs. The CSS also sizes and spaces the div elements. This part of the tutorial explains the CSS used for positioning, sizing and spacing as used in part 16.
Making a HTML div Element Visible
The following basic web page consists of a paragraph of text inside a div element. The div is given a class name of txt_block and a CSS style is applied to the class.
<!DOCTYPE html>
<html>
<head>
<title>Arduino CSS Position, Size and Space</title>
</head>
<style>
.txt_block {
border: 1px solid red;
}
</style>
<body>
<h1>Arduino CSS Example 1</h1>
<div class="txt_block">
<p>A paragraph of text for this example.</p>
</div>
</body>
</html>
To make the div visible, a 1 pixel wide, solid red border is drawn around the div using the following CSS style:
border: 1px solid red;
This produces the following output in a web browser:
Another way to make the div visible is to change its background colour, e.g. to change the div to green:
background-color: green;
As can be seen in the above image, the div extends to the edge of the web browser. If the web browser is resized, the div will always extend the width of the browser with a small margin of empty space on either side.
Sizing the div
The div can be sized by applying CSS width and height styles to it. The HTML/CSS listing below adds sizing to the div.
<!DOCTYPE html>
<html>
<head>
<title>Arduino CSS Position, Size and Space</title>
</head>
<style>
.txt_block {
border: 1px solid red;
width: 140px;
height: 120px;
}
</style>
<body>
<h1>Arduino CSS Example 2</h1>
<div class="txt_block">
<p>A paragraph of text for this example.</p>
</div>
</body>
</html>
The above markup produces the following in a web browser:
The size of the div is now 140 pixels wide and 120 pixels high. In CSS px means pixels.
Padding the div
Padding is now applied to the left of the div so that there is a space between the left of the div and the text inside it.
<!DOCTYPE html>
<html>
<head>
<title>Arduino CSS Position, Size and Space</title>
</head>
<style>
.txt_block {
border: 1px solid red;
width: 140px;
height: 120px;
padding-left: 10px;
}
</style>
<body>
<h1>Arduino CSS Example 3</h1>
<div class="txt_block">
<p>A paragraph of text for this example.</p>
</div>
</body>
</html>
In the above markup, CSS padding of 10 pixels is applied as follows:
padding-left: 10px;
The result of adding the padding can be seen in this image:
Padding can be added to all sides of the div. Padding makes a space between the edge of the div and the inside of the div.
Padding for each side can be specified in CSS as follows:
padding-top: 5px; padding-right: 3px; padding-bottom: 7px; padding-left: 10px;
There is a shorter method of specifying padding shown here.
padding: 5px 3px 7px 10px;
When specifying the padding using the above method, the order of the padding sizes from left to right always apply to the div or other element being padded by starting at the top and moving clockwise.
In other words, the above line of code applies padding to the div in this order:
padding: top right bottom left;
Adding a Second div
We now add a second div that is formatted the same as the first div by using the same class name for the second div.
<!DOCTYPE html>
<html>
<head>
<title>Arduino CSS Position, Size and Space</title>
</head>
<style>
.txt_block {
border: 1px solid red;
width: 140px;
height: 120px;
padding-left: 10px;
}
</style>
<body>
<h1>Arduino CSS Example 4</h1>
<div class="txt_block">
<p>A paragraph of text for this example.</p>
</div>
<div class="txt_block">
<p>A second paragraph of text for this example.</p>
</div>
</body>
</html>
The above markup produces the following web page:
Positioning the divs
There are a number of different methods for positioning HTML elements on a web page using CSS. We will look at one method here.
To position the two divs next to each other, we will use the CSS float style as shown in this next markup lising.
<!DOCTYPE html>
<html>
<head>
<title>Arduino CSS Position, Size and Space</title>
</head>
<style>
.txt_block {
border: 1px solid red;
width: 140px;
height: 120px;
padding-left: 10px;
float: left;
}
</style>
<body>
<h1>Arduino CSS Example 5</h1>
<div class="txt_block">
<p>A paragraph of text for this example.</p>
</div>
<div class="txt_block">
<p>A second paragraph of text for this example.</p>
</div>
</body>
</html>
By adding the CSS float style, the two divs are now floating to the left of the web page. The causes the first div to be placed on the left of the page and the second div placed on the left of the page next to the first div.
float: left;
The above markup produces the following web page:
Spacing the divs
To add some space between the divs, we finally add a 20 pixel margin to the right of the divs as shown in the following listing.
<!DOCTYPE html>
<html>
<head>
<title>Arduino CSS Position, Size and Space</title>
</head>
<style>
.txt_block {
border: 1px solid red;
width: 140px;
height: 120px;
padding-left: 10px;
float: left;
margin-right: 20px;
}
</style>
<body>
<h1>Arduino CSS Example 6</h1>
<div class="txt_block">
<p>A paragraph of text for this example.</p>
</div>
<div class="txt_block">
<p>A second paragraph of text for this example.</p>
</div>
</body>
</html>
The above markup produces the following web page.
The margin uses the same format as the padding, except that the margin puts space between the edge of the div to the outside of the div.
margin-right: 20px;
Margins can be applied individually to each side of the div or other HTML element:
margin-top: 5px; margin-right: 3px; margin-bottom: 7px; margin-left: 10px;
And can also use the short format for specifying margins:
margin: 5px 3px 7px 10px;
Which applies to the HTML element in a clockwise order starting from the top:
margin: top right bottom left;
Further Reading
CSS is a big topic and there is a lot more to learn, in fact there are whole books dedicated to CSS.
If you would like to learn more about CSS or need to find out how to do something specific for your own Arduino web server project, then read a good CSS book or search for more information on the Internet.
Comentários
Postar um comentário