Guía y Taller de Programacion en HTML
CSS
CSS (Hojas de Estilo en Cascada) es el código que usas para dar estilo a tu página web. CSS Básico te lleva a través de lo que tú necesitas para empezar. Contestará a preguntas del tipo: ¿Cómo hago mi texto rojo o negro? ¿Cómo hago que mi contenido se muestre en tal y tal lugar de la pantalla? ¿Cómo decoro mi página web con imágenes de fondo y colores?
Entonces ¿qué es CSS, realmente?
Como HTML, CSS (Cascading Style Sheets) u Hojas de estilo en cascada en español, no es realmente un lenguaje de programación, tampoco es un lenguaje de marcado. Es un lenguaje de hojas de estilo, es decir, te permite aplicar estilos de manera selectiva a elementos en documentos HTML. Por ejemplo, para seleccionar todos los elementos de párrafo en una página HTML y volver el texto dentro de ellos de color rojo, has de escribir este CSS:
p {
color: red;
}
Vas a probarlo: pega estas tres líneas de CSS en un nuevo archivo en tu editor de texto y guarda este archivo como style.css en tu directorio styles (estilos).
Pero aún debes aplicar el CSS a tu documento HTML, de otra manera el estilo CSS no cambiará cómo tu navegador muestra el documento HTML.
- Abre tu archivo
index.htmly pega la siguiente línea en algún lugar dentro del<head>, es decir, entre las etiquetas<head>y</head>:<link href="styles/style.css" rel="stylesheet" type="text/css"> - Guarda el archivo
index.htmly cárgalo en tu navegador. exitosa!
Anatomía de una regla CSS
Observa el código CSS de arriba, un poco más a detalle:
La estructura completa es llamada regla predeterminada (pero a menudo «regla» para abreviar). Nota también los nombres de las partes individuales:
- Selector
El elemento HTML en el que comienza la regla. Esta selecciona el(los) elemento(s) a dar estilo (en este caso, los elementos
<p>). Para dar estilo a un elemento diferente, solo cambia el selector.- Declaración
Una sola regla como
color: red;especifica a cuál de las propiedades del elemento quieres dar estilo.- Propiedades
Maneras en las cuales puedes dar estilo a un elemento HTML. (En este caso,
colores una propiedad del elemento<p>). En CSS, seleccionas qué propiedad quieres afectar en tu regla.- Valor de la propiedad
A la derecha de la propiedad, después de los dos puntos (:), tienes el valor de la propiedad, para elegir una de las muchas posibles apariencias para una propiedad determinada (hay muchos valores para
colorademás dered).
Nota las otras partes importantes de la sintaxis:
- Cada una de las reglas (aparte del selector) deben estar encapsuladas entre llaves (
{}). - Dentro de cada declaración, debes usar los dos puntos (
:) para separar la propiedad de su valor. - Dentro de cada regla, debes usar el punto y coma (
;) para separar una declaración de la siguiente.
De este modo para modificar varios valores de propiedad a la vez, solo necesitas escribirlos separados por punto y coma (;), así:
p {
color: red;
width: 500px;
border: 1px solid black;
}TALLERCòdigo HTML
!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MODA CSS</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<section class="form-login">
<h5>formulario login</h5>
<input class="controls" type="text" name="usuario">
<input class="controls" type="password" name="contraseña">
<input class="button" type="submit" name="" value="Acceder">
</section>
</body>
</html>Còdigo CSS@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.form-login {
width: 400px;
height: 340px;
background: #736768 ;
margin: auto;
margin-top:180px;
padding: 30px 50px;
border-top: 4px solid #1512F9;
}
.form-login h5 {
margin: 0;
text-align: center;
height: 40px;
margin-bottom: 30px;
color: aliceblue;
border-bottom: 1px solid;
}
.controls {
width: 100%;
border:5px solid #18ECDB;
margin-bottom: 15px;
padding: 11px 10px;
font-size: 14px;
}
.button {
width:100%;
height: 40px;
background: #19D4C0;
}
Imagen del formulario
No hay comentarios:
Publicar un comentario