Ci siamo lasciati con un CSS tutto da realizzare, siamo pronti, mettiamoci all’opera.
Apriamo il file index.html che avevamo lasciato in una cartella contenente anche il foglio di stile la volta scorsa:
La mia semplice pagina web
La prima pagina web
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit nisl eget ligula congue tempor. Sed vitae augue odio. Suspendisse consectetur lobortis convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse odio turpis, vestibulum quis egestas sed, auctor vitae est. Sed ornare, dui ut scelerisque tincidunt, augue tellus ornare sapien, ac sodales leo arcu vel metus. Aenean mattis, ipsum sit amet tincidunt scelerisque, neque nibh fermentum nisl, eu dictum ante erat sed arcu. Nam in lacus odio. Aenean pulvinar metus sed lacus facilisis vitae vestibulum ante lacinia. Phasellus sollicitudin nunc sit amet dolor vehicula ornare. Vestibulum aliquet tempor erat, eget elementum risus congue et. Proin vestibulum purus nec erat vestibulum eget faucibus elit rhoncus.
Proin bibendum ornare purus, in viverra nulla facilisis id. Duis vitae luctus elit. Etiam ligula odio, ornare eu lobortis ullamcorper, sodales ac lorem. Vestibulum nec ullamcorper orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut eu est a enim sodales varius et at velit. Suspendisse lobortis elementum neque nec iaculis. Cras rhoncus, purus sed facilisis tincidunt, nisi ante cursus orci, vitae tristique justo lorem vel elit. Fusce ac erat erat, in luctus tortor. Morbi quis diam urna. Sed orci tortor, rutrum sed scelerisque et, dictum sit amet lacus. Praesent tortor magna, gravida vel sodales at, elementum imperdiet ligula. Nulla facilisi.
So che sembra molto lungo, nel vostro editor (Notepad ++) sarà più carino.
Adesso visualizzatelo nel vostro browser preferito, noterete che si tratta di una pagina completamente priva di stile, ce ne occupiamo subito.
Lasciate aperto in Notepad++ il file html (io l’ho chiamato index.html) e apriamo il file CSS che avevamo cominciato la volta scorsa e avevamo chiamato style.css.
Cominciamo occupandoci del “contenitore”, il div principale e scriviamo così:
#contenitore {
width: 960px;
height: 100%;
background-color: #ededed;
margin: 0 auto;
}
#contenitore p {
text-align: center;
padding: 5px 20px;
}
Scrivendo queste poche righe di codice, abbiamo dato al contenitore principale una larghezza ben precisa, lo abbiamo centrato con la proprietà margin, abbiamo definito il colore dello sfondo (vi potete sbizzarrire con i colori, assegnando un codice esadecimale creandolo da questa tabella), bene, adesso continuiamo con l’intestazione o “header” al cui interno troviamo anche il menu, copiate e incollate questo altro blocco di codice all’interno del css:
#header{
width: 400px;
margin: 0 auto;
}
#title {
text-align: center;
}
#menu {
width: 600px;
}
#menu ul {
font-family: Verdana;
list-style: none;
}
#menu ul li {
display: inline;
padding: 10px;
}
Salvando e aprendo nel browser il file index.html noteremo che quasi tutto è andato al suo posto, il titolo è al centro, ha una sua dimensione ben precisa, abbiamo dato uno stile al carattere o font, il menu che abbiamo creato come elenco è adesso visibilmente gradevole, ci manca il piè di pagina o footer, provvediamo subito con le ultime righe(abbiamo quasi finito!):
#footer {
margin: 0 auto;
width: 600px;
background-color: #ededed;
}
#footer h5 {
text-align: center;
}
Anche il footer è sistemato, lo abbiamo messo al centro gli abbiamo dato un “heading” ben preciso e uno sfondo.
Questo è il risultato:
La pagina html associata al foglio di stile.
Ci sarebbe ancora molto da fare, fermiamoci qui, la prossima volta faremo un altro passetto in avanti.
Qui sotto trovate il link per scaricare i files, alla prossima 🙂
