Overview - Body - Text - Border - Links - Syntax


Confine ourselves to the fundamental concepts, leaving out the abundance of detail and complex rules that govern its behavior. The use of a type of software ADOBE DREAMWEAVER can help us for many of these rules.

CSS FUNCTIONS OVERVIEW

The HTML page style sheets include information both for the page itself and for the elements that are contained in it. A style sheet can be written directly between the TAG <head> ..... or linked to the page. with the following code, inserting the connection between <head> and

<link href="css/Mystylesheet.css" rel="stylesheet" type="text/css" />

That means that the link refers to a style sheet rel = "sylesheet ' with a text type file that contains a CSS type =" text/css " which resides in the directory named CSS - subdirectory of the dir where the HTML page is, and it is called mystilesheet.css. (name of convenience)

How to write commands in a CSS

element_name { command_1 ; command_2; .......... command_n }

The element name is an HTML tag that you want to format, or the name of a Class which is then called in a TAG, or the name of a DIV or otherwise. You will see in detail some possible content in paragraph 'Syntax'

PAGE BODY PROPERTIES (or commands)

width : auto
height :auto
min-width::0 (minimum width)
max-width:0 (maximum width)
min-height::0 (minimum height)
max-heigth:0 (maximum heifght)
margin:0 (tis is a comman margin, but you can set separately and different margin-left ; -top ; -right; - bottom )
;
top: 0 px
left:0px
 
right:0px
bottom:0 px

 

After clamping the edge, here highlighted in light gray color, we put a 'padding' zone, the darker color

padding can be set common or individually ( left - top - right - bottom)
  padding top  
     
padding left       padding right
     
    padding bottom    

we fix now the white box position, which will haveavailable the total space without margins and padding

position: static (the body position by definition is the static one)
  padding top  
 
padding left   float on left padding right
     
    padding bottom    

MAIN TEXT LINE PROPERTIES

color:                  taken from the table of colorsi
font-family:        text character type. Ex. 'Arial, Cambria, Times new roman'
font-style:           EX: normal,italic,oblique
font-variant:       EX: normal, small-caps
font-weight:       EX. 'bold. normal
font-size:           character's dimensions
line:height:         text  row height
text-align:            EX normal, justify, left, right
text-decoration: EX: none (nessuna), underline
text-indent:          text indent in px
text-shadow        (text shadow)
h-shadow:           horizontal shadow px
v-shadow:           vertical shadow px
blur:                      shadow blur px
 There is also a lot of commands to set text shadows, space out the letters, and other commands that are many and complex, so I recommend using an editor that has embedded a CSS Designer function that allows you to fix the single feature and see virtually the effect of commands. It is therefore preferable to use editors like Microsoft FrontPage or Adobe Dreamweaver better.


PROPERTIES OF A TABLE, TABLE CELL, DIV, IFRAME
              the property name itself describes the property content
border-color: from the table of colors
border-top-color
border-right-color
border-bottom-color
border-left-color

border-width: usually in pixels Example of statement: border-width: 1px;
border-top-width
border-right-width
border-bottom-width
border-left-width

border-radius: usually in pixels Example of statement is the same for all corners: border-radius: 10px;

The border corner radius can be fixed separaty too
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius


border-style: THIS GIVES THE SAME FOR ALL BORDERS how the border style appears
border-top-style
border-right-style
 border-bottom-style
border-left-style:

THE BORDER STYLE CAN BE :

dotted OR dashed OR solid OR double OR groove OR ridge OR inset OR outset




PROPERTIES ABOUT hypertext CONNECTIONS

Example of link properties. The link contains text color and decoration (underline, etc)
a:link { color: #000066; text-decoration: none; }

Example of link already VISITED. This link contains text color and decoration (underline, etc)
a:visited { text-decoration: none; color: #006600; }

Example of properties for the MOUSE PASSAGE. This contains text color and decoration (underline, etc)
a:hover { text-decoration: none; color: #006600; }

Example of active link properties: This contains contains text color and decoration (underline, etc)
a:active { text-decoration: none; color: #000000; }

 

 


SYNTAX: how to write and use a CSS file

Should not write the style of a page directly between TagD <head> ... unless the page is used once of few times into the site. It is usually better to write a CSS in a separate file and link it with the following code, inserting the connection between the <head> ..... of the HTML page

< link href="css/mystylesheet.css" rel="stylesheet" type="text/css" />

Let's make a new css file with our editor. At the first line we write

@charset "utf-8";
/* CSS of the page ........*/

where in the second line we put the information on which pages the the style sheet is used for, between the symbols / * ....... * / so that this text is not processed by the interpreter.

The CSS file can modify the whole HTML page or the single elements that can be inserted in a given HTML page between o TAG <body>.... . Let's see some elements

a) CLASS let's take a class that we call 'giustifica' - We write this name preceded by a dot - precisely to show that it is a class and then we open a brace '{'. After the brace we put the sequence of instructions, and finally we close the brace '}': The class can be called in a TAG, the name of a DIV or other, as we shall see below.
The instruction for this class can be written all in one row or can be more visible with many rows. this class gives the size and alignment of a text.

SYNTAX = .name { command1: content1 ; command2: content 2; ........commandn: content n;

code sintax scheme

.giustifica {
font-family: Arial;
font-size: medium;
text-align: justify;
}

 ..classname {
character family : Arial;
character size: medium;
text alignement: justifed ;
}

b) ELEMENT identified by its name. The uppersaid class can be attributed to any element, instead this case the formatting affects only the element with that name. For example, consider an element which we call 'corpo' preceded by a pound sign, and open a brace '{'. After the brace put the sequence of instructions and close the curly brace '}'

#corpo {
margin: 0px auto;
border: 0px solid rgb(0, 0, 0);
width: 980px;
height:640px;
text-align: left;
padding: 0px;
position: relative;
}

#element name {
margin
border: solid black color line;
980 pixels;
640 pixels;

no padding
position: relative in respect to another container containing this one
These are the most common features. But items can be edited with much more: you can enter rounded edges, images or background colors too nuanced, and more. For this I suggest to use a specialized editor that aids listing all possible commands that you can choose according to your needs and the tag that you work in.
Better to install DREAMWEAVER ADOBE THAT IS THE BEST AND THE MOST EASY TO USE TO ME.

NOTE 1: STYLES SET WITH CSS CAN BE CHANGED IN EACH LINE. FOR EXAMPLE

paragraph TAG <p> .......</p) you can inset the instruction <p style=" element: value; element1: value1; ........ element n : value n; ">.......</p>. OR, use a predefined class into the CSS linked to the page and write
<p class="name of class"> .......</p

The command applies to all elements that stands in place of the dots above. You can invent and try to edit the tags as you like, because most TAGs can be changed one by one in this way, as we have said for the previous one, for example:

  • <span> ..... </span>
  • <td> ...<td>
  • <table> .... <table>
  • <body>.....</body>
  • <div> .... </div>
  • <ul> ..... </ul>

etc etc

NOTE 2: YOU COULD ALSO WRITE A CSS FILE THAT CONTAINS ALL THE different named ELEMENTS OF ALL YOUR PAGES , AND CONNECT TO WHICH YOU DO NEED EVEN IF YOUR PAGES ARE NOT EQUAL.

PERSONALLY I DON'T LIKE THIS SOLUTION, BECAUSE CAN CREATE MORE CONFUSION WHEN YOU HAVE TO REVAMP A SITE.