HTML + CSS
Hola Mundo con CSS
24 noviembre, 2020
•
10,181 lecturas
Pues básicamente declaramos una regla para la etiqueta body instanciando la Pseudoclase after y finalmente modificando la regla content con "Hola, Mundo".
Veamos el código CSS embebido en HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HOLA CON CSS</title>
<style>
body:after {
content: 'Hola, mundo.';
}
</style>
</head>
<body>
</body>
</html>
Ahora, jugando con las reglas de CSS para obtener una frase completada con los Pselectores . veamos
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HOLA CON CSS</title>
<style>
*{ font-size: 50px;}
body{
display: flex;
height: 100vh;
place-items: center ;
justify-content: center;
color: blueviolet;
}
h1{
display: inline;
margin: 10px;
}
body:before {
content: 'Hola';
color: cornflowerblue;
}
body:after {
content: ' bienvenido al frontend';
color: blue;
}
</style>
</head>
<body>
<h1>Luis</h1>
</body>
</html>
Este código Html y Css nos permitirá ver una frase centrada dentro de la etiqueta body tanto vertical como horizontalmente.
Finalmente, nos vemos en otros tips de css.
Recurso del Tutorial
Gratis
142 descargas
Tutoriales Recomendados
Sigue explorando publicaciones de la misma categoría
