Arduino Ethernet Shield - part 12
CSS Introduction
Created on: 22 March 2013
Part 12 of the Arduino Ethernet Shield Web Server Tutorial
We first looked at HTML in this tutorial which has to do with structuring the content of a web page into paragraphs, headings, form controls, etc.
We now look at CSS (Cascading Style Sheets). CSS controls the appearance of the content on a web page. CSS acts on the HTML tags to change attributes of the text or elements between the HTML tags. For example, the font type, colour and size of a paragraph of text can be changed. CSS can also be used to position HTML elements on a web page.
In this part of the tutorial, we will look at only the basics of CSS so that the newcomer to CSS can get an idea of what CSS can do and what CSS looks like. Further CSS will be explained as it is used in this tutorial.
A CSS Example
In this example, CSS markup is used to style a page so that it appears as follows:
HTML and CSS Markup
The HTML and CSS markup that produces the above web page can be seen below.
Including the CSS
In this example the actual CSS markup is included in the HTML page. The CSS is inserted between opening and closing <style> tags. The style tags are placed in the <head> part of the HTML file.
There are two other methods of including CSS in an HTML file:
1) In-line – the CSS is inserted into the HTML tags.
2) An external style sheet – all the CSS is written in an external file and included at the top of the HTML file.
Examining the CSS
The CSS that is used in this example is shown on its own here:
Header Text
The first part of the CSS applies styles to the <h1> part of the HTML code. The styles between the opening and closing braces after h1 in the above listing will be applied to every h1 header on the web page.
The line of CSS code below sets the font type to courier. If courier is not found on the system, then courier-new will be used. If courier-new is not found on the system then any serif font will be used.
font-family: courier, courier-new, serif;
The next two lines set the size of the h1 font and the font colour.
The last style that is applied to h1 headers is to put a two pixel wide (2px) solid blue line below the header text.
Paragraph Text
The next style in the CSS markup is applied to paragraph text (<p>). The styles between the opening and closing braces after p are applied to all paragraph text on the web page.
A font type and size are specified first. The colour of the paragraph text is specified using a RGB hexadecimal number.
Overriding a Style
In the HTML, a paragraph has been given a class name. This name is any name that the person writing the HTML and CSS chooses:
<p class="red_txt">This text is red.</p>
By creating a CSS class style called red_txt, the paragraph style can be overridden for all paragraphs that are marked as of the red_txt class.
.red_txt {
color: red;
}
In this case, only the colour of the paragraph is overridden because it is the only style specified in the CSS red_txt class.
When writing a CSS class, the name must start with a full-stop as in .red_txt and as shown above.
Changing the Style of a Single Word
To change the style of a single word in a paragraph, the word must first be isolated by using HTML code. The following line of HTML uses the <span> tag to isolate a single word. It then applies the same style from the red_txt class to the single word.
<p>This paragraph has one word that uses <span class="red_txt">red</span> text.</p>
Further CSS Learning
This has been a very brief introduction to CSS and was intended only to show you what CSS is, what it does and what it looks like.
There are very many more styles that can be applied to a large range of HTML tags. In fact there are whole books dedicated to CSS.
If you would like to learn more about CSS, then search for a more in-depth CSS tutorial on the Internet or pick up a good CSS book.
Running the CSS Example
To load the above CSS example to the Arduino web server, just put the HTML and CSS code into a file called index.htm and copy it to a micro SD card. Insert the micro SD card into the Arduino Ethernet shield card socket and then load the sketch from the Arduino SD card web server.
To save you from having to type out the above code, it has been included here so that it can be copied and pasted:
<!DOCTYPE html>
<html>
<head>
<title>Arduino SD Card Web Page</title>
<style type="text/css">
h1 {
font-family: courier, courier-new, serif;
font-size: 20pt;
color: blue;
border-bottom: 2px solid blue;
}
p {
font-family: arial, verdana, sans-serif;
font-size: 12pt;
color: #6B6BD7;
}
.red_txt {
color: red;
}
</style>
</head>
<body>
<h1>Arduino SD Card Page with CSS</h1>
<p>Welcome to the Arduino web page with CSS styling.</p>
<p class="red_txt">This text is red.</p>
<p>This paragraph has one word that uses <span class="red_txt">red</span> text.</p>
</body>
</html>
Comentários
Postar um comentário