Cascading Style Sheet (CSS)

  • primo
  • secondo
  • terzo
  • quarto

  • first
  • second
  • third
  • forth


We set as a background color CCFFFF, while for the tag h3 the background is set to white (FFFFFF) as seen in the tag title. For the two vertical lists I use squares and circles which can be obtained also without css. The addition of the background color, varying at each "li" requires instead the use of css. The two lists on the left of the page and the second figure (the roe-deer) on the right (from now on fig.2), are positioned with a (standard-html) table (of zero border) and width=100% such that the text begins below. Operating with ctrl+ and ctrl- from keyboard there is a rigid shift and no overlapp occurs. Instead the first figure on the right of the two lists (roa-deer and rook in friendship relation and from now on fig.1) is fixed with absolute position (150px from left and 100px from the top of the page) and does not moove operating from the keyboard with ctrl+ and ctrl-. Since it is set in the program in a line before the list and after the title it maskes the title and is masked by the list [The priority is set to standard value z-index:0, since using the lower priority z-index:-1 the fig.1 strangely disapears].
The horizontal list will be discussed in a moment, and go first to the snake figure which is shown to float on the right. The float command ( property) to float on the right (value) is essential. For the border is used a dotted black (line) of 5pt and the margin is set to 10px, 10px, 20px, 20px for (top, right, bottom, left ) in anticlockwise direction. These are again properties with their assigned values, and the selector for the deer and the snake we use the two images img.overf and img.x with overf and x defining the class (the name can be choosen freely). For figure with captions the selector is div which includes the image as well as the caption. This figure is inserted at this point.

double-head
snake
div is defined as div.x (I use again x as the name for the class to be referred to) as a selector while for the property and values have a border of 5pt (thin) solid black (line) enclosing both figure and caption. Here is fixed the total width as 151pt and the padding is 0px. The caption is text-aligned at the center and the background as seen is set to white. We put in evidence the words "selector", "property" and "value" with yellow. Here we use the span selector with background-color as property and yellow as value and hl (highlight) defining the class. In the same way the underline can be accomplished using h.und as a selector (where und is the class) with text-decoration as property and underline as a value. However we prefer to use the commands u (and /u) already available in html.
Warning! if you want to use css style do not use h2, h3 but simply h because this way you do not force to go into a next line!
Images (with small formats) can be inserted in the text like here and continue to write on the same line. In the same way the figure can be aligned not with the top as above but with the bottom as here. the top and bottom classes are defined by the property vertical-align and the text-top and text-bottom values respectively (there is no a command for the center).
The horizontal list ( denoted with class=hrzt) is instructive. In the ul tag use the "float" as property and "left" (starting point) as value. The "padding" ("left","top") specifies its position (border), and we add the "circle" value for the "list-style-type" property for fun. The "width:100%" specifies (as in the case of the table already mentioned) that this line is for the list alone and the text begins in the line below. The position:relative is referred to what above (table, but not fig.1 which is fixed!). The references in the ul list (first ref..., second ref.. etc) must float with the ul in the same way as circles. To do this use the "li" selector as li.hrzt (an "h" selector as h.hrzt would do the same job) which allows also to define a frame i.e. a space for the references (here we use a white right border border-right:1px, but choosing 0px it disappears) Color, text-decoration (here underline) of the elements, background color of the frame,padding and width (in em) are specified in the li.hrzt selector, but the essential point is to spacify again the "float:left" as in ul.hrzt selector.
A more fancy example of the horizontal list for the links is shown here. We use them to show the order in which they have to be inderted in the head of the program.They are


that is: the link "a" goes before all the others. Follows the link "a:visited", the "a:hover" and the "a:active" in order. Normally the "a" link appears which here is defined with a purple background. If you put the mouse on it get the "a:hover" which here is red. Here only "a" and "a:hover" are defined and in the following way. The "li.hrzt" of the previous horizontal list is here substituted with "a", the Hyper link. This is defined through a class (here lkc to remind linkcolor). The selector "a.lkc" has the float:left property and value as for the previous list. In the same way let the "ul" element and the "a" element to float to the left. The "li" elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on a single line from left to right. The "ul" element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font). We add some colors and borders to make it more fancy.
Instead of circles,squares and disks one can use figures as for instance arrows. In this case define as property:value in "ul" selector not list-style-type:circle, but list-style-image:arrow.gif or its URL location. A figure can be set as a background with the property background-image: URL location; (instead of background-color:#ccffff used here) in the body selector. Finally the css instructions can be external and not internal of a given file. This avoids to repeat the same sequences of commands in each file separately. In this case after the type="text/css" specify the hyperlink (for instance as href="ext.css" where ext.css contains all the head instructions), and before it substitute the word style with link rel="stylesheet".
More information on CSS are available on the CSS tutorial (www.w3schools.com/css/default.asp). The same can be linked through the HTML tutorial Good lecture!