By Lino Bertuzzi
What are CSS.
CSS (Cascading Style Sheets) in computer science, is a language used to define the formatting or layout of documents HTML, XHTML and XML in Web sites and related web pages. The rules for composing the CSS are contained in a set of guidelines (Recommendations) issued since 1996 by the "World widthe Web Consortium" (W3C).
The introduction of the CSS was necessary to separate content from formatting, and allow a programming more clear and easy to use, both for authors of HTML pages as for users, ensuring at the same time also the reuse of code and its easier maintainability.
Using the editor ADOBE DREAMWEAVER, if one knows the English language, the style sheet is quite easy. Let's write down one:
@charset "utf-8"; body { |
This file, saved as .css give instruction to the browser interpreter:
- <style type="text/css"> that must be use as the first instruction only if you write directly the instructions into the html page head. It says that the css is a text file.
- body { It indicates that formatting concerns the 'body' of the page. The brace indicates the beginning of the instructions. At the end, to indicate that the series of instructions is finished, close the brace.
- </style> must be used as LAST instruction only if you write directly the instructions into the html page head.To indicate the stylesheet's end one puts the closing TAG </ style>
- background-image: url(my_background_image.jpg); It indicates that here is used a picture (image) in the background - the one I use for the background of this site is my_background_image.jpg. the background image resides under the images' folder. The sign ; separates each instructions and indicates that a single instruction is closed.
- background-repeat: no repeat; our image has a resolution 1920 x 780 px despite a low weight [50 KB] and therefore doesn't need to be repeated (no repeat). Then come the instructions for the page's margin that you want to leave, measured in pixels [px] or% - here we put margins =0 . But we could put different margins, as follows, giving a value to each one.
- margin-left: 0px;
- margin-top: 0px
- margin-right: 0px;
- margin-bottom: 0px;
or simply margin: 0px;
in fact, supposing that margins are all the same, you can write one line, and the upper file becomes
@charset "utf-8"; </style> |
Now, before saying what we do for the image, before let's change only the page's color, and let's copy between <head> and </ head>. Let's add the font color too:
| @charset "utf-8"; /* CSS Document */ <style type="text/css"> body { background-color: #CC0000; margin: 0px; color:#FFFFFF } </style> |
One of the DREAMWEAVER utilities is that you're even allowed to choose the element's color clicking the table of colors. Let's open the previous page with a text editor and let's add styles, or let's copy and paste everything. Save with another name and same extension .htm, save such as pagina_2.htm that then we will open in the browser:
<html> <!--- comnon elements ---> <meta name="description" content="Let's take an example of structuring a web page step by step-entering the main metatags"> </head> <!--- bettween tag <body> and </body> let's write the page's content ----> <body>This is the line of sample text that appears in the body of page. Check what has changed from the previous page. that is the background color and the text color </body> |
NOTE: it is better to save the style sheet to make it re-usable. To do this you may want to make and save a text file, including instead of the heading <style type="text/css">.....>/style> that as follows.
@charset "utf-8";
/* CSS Document */
Then you'll save the text fille as .css with a name ( example: pagprinc.css) in this case, instead of all previous instructions regarding the style, between the <head> and </ head> one cann just enter the command:
<link href="css/pagprinc.css"rel="stylesheet" type="text/css" />
with which we refer to the file containing the style sheet that we have saved in the folder css / as pagprinc.css: The font color is white, the bottom of the page is red.