Inicio » Blog » HTML + CSS

24 noviembre, 2020

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".

Hola Mundo con CSS

Suscríbete a nuestro canal en Youtube

Suscríbirse

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.


Leido 6045 veces

Descarga el código fuente HTML + CSS

Recurso descargado 140 veces

USD

Descargar Código Fuente

Compartir link del tutorial con tus amigos


Aprende más sobre HTML + CSS

Cursos de programación

Codea Codea App

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

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023