Yibrika/css_background
Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
Repository files navigation
# Desafío: CSS
## Nombre de Desafío: css_introducción
## Instrucciones
Completa los siguientes desafíos, para que pueda funcionar de manera correcta los códigos css.
I. Establezca el color de todos los elementos `<p>` en rojo.
```
<style>
tuCodigoAca {
tuCodigoAca: red;
}
</style>
```
II. Establezca el color del elemento con id="para1", en rojo.
```
<style>
tuCodigoAca {
tuCodigoAca: red;
}
</style>
<body>
<h1>This is a heading</h1>
<p id="para1">This is a paragraph</p>
</body>
```
III. Establezca el color de todos los elementos con la clase colortexten rojo.
```
<style>
tuCodigoAca {
tuCodigoAca: red;
}
</style>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p class="colortext">This is a paragraph</p>
<p class="colortext">This is a paragraph</p>
</body>
```
IV. Cambia el color de todos los elementos `<p>` y `<h1>` a "rojo". Agrupe los selectores para minimizar el código.
```
<style>
tuCodigoAca {
tuCodigoAca: red;
}
</style>
<body>
<h1>This is a heading</h1>
<h2>This is a smaller heading</h2>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
```
V. Agregue una hoja de estilo externa con la URL: "mystyle.css".
```
<head>
tuCodigoAca
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
```
VI. Inserte las partes que faltan para que el código CSS sea correcto.
```
<style>
p
color red;
</style>
```
VII. Utilice la propiedad abreviada border para establecer un borde "4px", "punteado", "rojo" para los elementos `<p>`.
```
<style>
p {
tuCodigoAca: tuCodigoAca;
}
</style>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
```
VIII. Utilice la propiedad de borde correcta para establecer el color del borde en "rojo".
```
<style>
p {
border-style: dotted;
border-width: 4px;
tuCodigoAca: red;
}
</style>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
```
IX. Agregue un margen izquierdo de 20 píxeles al elemento `<h1>`.
```
<style>
h1 {
tuCodigoAca: 20px;
}
</style>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
```
X. Utilice la propiedad margin abreviada para agregar márgenes superior e inferior de 20 píxeles y márgenes izquierdo y derecho de 40 píxeles en el elemento `<h1>`.
```
<style>
h1 {
margin: tuCodigoAca;
}
</style>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
```
XI. Utilice la marginpropiedad para alinear al centro el elemento `<h1>`.
```
<style>
h1 {
margin: tuCodigoAca;
}
</style>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>
```
XII. Establezca el relleno superior del elemento `<h1>` en 30 píxeles.
```
<style>
h1 {
tuCodigoAca: 30px;
}
</style>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</body>