Hola Mundo con CSS

¿Cómo hacer un Hola Mundo en CSS?

Hola Mundo con CSS

¿Cómo hacer un Hola Mundo en 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.

¿Quieres descargar el código fuente Hola Mundo con CSS?
...por favor suscríbete gratuitamente para descargarlo

CSS

Download

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 162 veces | Publicado hace 2 meses

Curso Diseño Web con Bootstrap 4.5

Mira el temario del curso en el siguiente link

VER EL CURSO

CÓDIGO FUENTE CSS

DESCARGAR ARCHIVOS

Logo Codea App

Develop your code

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021