{"id":818,"date":"2025-11-03T11:40:58","date_gmt":"2025-11-03T10:40:58","guid":{"rendered":"https:\/\/vermiip.es\/blog\/?p=818"},"modified":"2025-11-03T11:40:59","modified_gmt":"2025-11-03T10:40:59","slug":"curso-de-html5-y-css3-el-archivo-css","status":"publish","type":"post","link":"https:\/\/vermiip.es\/blog\/curso-de-html5-y-css3-el-archivo-css\/","title":{"rendered":"Curso de HTML5 y CSS3: El archivo .css"},"content":{"rendered":"\n

C\u00f3mo crear un archivo .css<\/h3>\n\n\n\n

Crear un archivo CSS es un proceso sencillo que puedes realizar con cualquier editor de texto. A continuaci\u00f3n, se detallan los pasos para hacerlo:<\/p>\n\n\n\n

    \n
  1. Abre tu editor de c\u00f3digo favorito (como Visual Studio Code o Sublime Text).<\/li>\n\n\n\n
  2. Crea un nuevo archivo y gu\u00e1rdalo con la extensi\u00f3n .css<\/strong>. Por ejemplo, puedes llamarlo estilos.css<\/strong>.<\/li>\n\n\n\n
  3. Dentro de este archivo, puedes comenzar a escribir tus reglas CSS.<\/li>\n<\/ol>\n\n\n\n

    Un ejemplo b\u00e1sico de un archivo estilos.css<\/strong> ser\u00eda:<\/p>\n\n\n\n

    \/* estilos.css *\/\nbody {\n    background-color: #f0f0f0;\n    font-family: Arial, sans-serif;\n}\n\nh1 {\n    color: #333;\n}<\/code><\/pre>\n\n\n\n
    Vinculando el archivo CSS a tu documento HTML<\/h3>\n\n\n\n
    Una vez que hayas creado el archivo CSS, el siguiente paso es vincularlo a tu documento HTML para que los estilos se apliquen correctamente. Este proceso se lleva a cabo mediante la etiqueta <link><\/strong> en la secci\u00f3n <head><\/strong> de tu HTML:<\/p>\n\n\n\n
    <!-- index.html -->\n<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Mi P\u00e1gina Web<\/title>\n    <link rel=\"stylesheet\" href=\"estilos.css\"> <!-- Vinculaci\u00f3n del CSS -->\n<\/head>\n<body>\n    <h1>Bienvenido a mi p\u00e1gina web<\/h1>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
    Aseg\u00farate de que la ruta en el atributo href<\/strong> sea correcta para que el navegador pueda encontrar tu archivo CSS.<\/p>\n\n\n\n
    Alternativas a la vinculaci\u00f3n del CSS<\/h3>\n\n\n\n
    Adem\u00e1s de vincular un archivo CSS externo, existen otras maneras de aplicar estilos a tus elementos HTML. Aqu\u00ed te presentamos dos alternativas:<\/p>\n\n\n\n
    1. Etiqueta <style><\/h4>\n\n\n\n
    La etiqueta <style><\/strong> permite incluir directamente CSS dentro del documento HTML. Este m\u00e9todo es \u00fatil para estilos r\u00e1pidos o proyectos peque\u00f1os. Aqu\u00ed tienes un ejemplo:<\/p>\n\n\n\n
    <!-- index.html -->\n<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Mi P\u00e1gina Web<\/title>\n    <style>\n        body {\n            background-color: #e0e0e0;\n        }\n        h1 {\n            color: #444;\n        }\n    <\/style>\n<\/head>\n<body>\n    <h1>Bienvenido a mi p\u00e1gina web<\/h1>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
    2. Atributo style=\u00bb\u00bb<\/h4>\n\n\n\n
    Otra forma de aplicar estilos es utilizando el atributo style<\/strong> directamente en un elemento HTML. Este enfoque se usa com\u00fanmente para cambios r\u00e1pidos, pero no es recomendable para proyectos a gran escala debido a su falta de mantenimiento y escalabilidad. <\/p>\n\n\n\n
    Aqu\u00ed un ejemplo:<\/p>\n\n\n\n
    <!-- index.html -->\n<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Mi P\u00e1gina Web<\/title>\n<\/head>\n<body>\n    <h1 style=\"color: #555; background-color: #fafafa;\">Bienvenido a mi p\u00e1gina web<\/h1>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
    Conclusi\u00f3n<\/h3>\n\n\n\n
    En resumen, al comenzar con HTML5 y CSS3, aprender a crear y vincular un archivo CSS es un paso fundamental que te ayudar\u00e1 a mantener la separaci\u00f3n entre contenido y presentaci\u00f3n, facilitando el mantenimiento de tus proyectos web. Adem\u00e1s, al contar con alternativas como la etiqueta <style> y el atributo style<\/strong>, puedes adaptar tu enfoque seg\u00fan sea necesario.<\/p>\n\n\n\n
    Fuentes y lecturas recomendadas<\/h3>\n\n\n\n