Hola Mundo con CSS

¿Cómo hacer un Hola Mundo en CSS?

Hola Mundo con CSS

Pues básicamente declaramos una regla para la etiqueta body instanciando la Pseudoclase after y finalmente modificando la regla content con "Hola, Mundo".

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.

Completar frase con Pseudoselectores AFTER BEFORE

 

Finalmente, nos vemos en otros tips de css.

Para descargar el recurso de forma gratuita { crea una cuenta } gratis .

Descarga código fuente

ENTRAR PARA DESCARGAR 3

Redactado por: , Leido 2408 veces

CURSOS DE PROGRAMACIÓN CON PROYECTOS

© Todos los derechos reservados Codea App FullStack | Cursos de programación avanzados | 2020 - 2021