Creacion del codigo CSS para una pagina web utilizando NetBeans

Vamos a crear el estilo de nuestro sitio web. Lo primero para ello es seleccionar la carpeta raiz de nuestro proyecto y hacer click derecho; vamos a new -> Cascading Style Sheet.

 

Luego nos aparece la siguiente ventana donde colocamos el nomre de nuestro estilo en este caso es "estilo".

 

Lo siguiente que de bemos hacer es pegar el siguiente codigo en el archivo "estilo.css", este codigo es un RESET.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
font-size:13px;
line-height: 1.4;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

/*CLASES*/

.clear {
clear:both;}

.l.img {
margin:10px;
float:left;}

.r.img {
margin:10px;
float:right;}

.alpha {
margin-left:0px;}

.omega {
margin-right:0px;}



/*HTML*/

ul, ol {
list-style:none;}

a:link {
color:#f33;
text-decoration:none;}

a:visited {
text-decoration:none;
color:#f33;}

a:hover {
text-decoration:underline;
color:#f33;}

a:active {
text-decoration:none;
}

h1 {font-size:26px;}

h2 {font-size:30px;
color:#81aa48;
}

h3 {font-size:16px;}

h4 {font-size:14px;}

h5 {font-size:12px;}

h6 {font-size:10px;}

li {list-style:none;}

a {text-decoration:none;}

a:hover {text-decoration:underline;}

Luego de lo anterior escribimos el siguiente codigo CSS, para maquetar nuestro sitio web por completo, le daremos estilo al "wrapper", "header" y a el "logo".

 

Con lo siguiente daremos estilo a nuestra barra de navegacion "menu" .

 

Luego el estilo a los campos, "soporte","global","seguridad" y "ecologico." 

 

Luego, el estilo del mensaje, y de las redes sociales. 

Y por utimo a nuestro pie de pagina "footer".

 

Hay que tener en cuenta que nuestra carpeta raiz debe de existir una carpeta llamada imagenes donde ira contenida las siguientes imagenes. 

 

Con ello ya podemos ver en su totalidad nuestra pagina web terminada, podemos abrirla en nuestro navegador.

Espero este tutorial sea de ayuda para todos, cualquier cosa no duden en preguntar, y espero sus comentarios.