{"id":38,"date":"2024-07-11T02:18:17","date_gmt":"2024-07-11T02:18:17","guid":{"rendered":"https:\/\/shaplakanon.com\/wdc\/?p=38"},"modified":"2024-07-11T02:18:18","modified_gmt":"2024-07-11T02:18:18","slug":"what-is-css","status":"publish","type":"post","link":"https:\/\/shaplakanon.com\/wdc\/what-is-css\/","title":{"rendered":"What is CSS?"},"content":{"rendered":"\n

Understanding CSS: A Guide for Beginners<\/h3>\n\n\n\n

CSS, or Cascading Style Sheets, is a language used to describe the presentation of a document written in HTML or XML. CSS controls the layout, colors, fonts, and overall appearance of your web pages, allowing you to create visually appealing websites. In this article, we’ll cover the basics of CSS and how to use it in your HTML documents.<\/p>\n\n\n\n

What is CSS?<\/h4>\n\n\n\n

CSS stands for Cascading Style Sheets. It is a stylesheet language used to specify the visual styling of web pages. With CSS, you can control the design of multiple web pages at once, ensuring consistency across your site.<\/p>\n\n\n\n

Why Use CSS?<\/h4>\n\n\n\n
    \n
  1. Separation of Content and Presentation<\/strong>: CSS separates the content (HTML) from its presentation (design). This makes it easier to maintain and update your website.<\/li>\n\n\n\n
  2. Reusability<\/strong>: You can reuse the same CSS file across multiple pages, saving time and effort.<\/li>\n\n\n\n
  3. Improved Loading Time<\/strong>: By reducing the amount of code in your HTML files, CSS can help improve your website’s loading speed.<\/li>\n\n\n\n
  4. Accessibility<\/strong>: CSS makes it easier to create accessible websites by allowing you to control the visual order of content.<\/li>\n<\/ol>\n\n\n\n

    How to Use CSS in HTML<\/h4>\n\n\n\n

    There are three main ways to apply CSS to an HTML document:<\/p>\n\n\n\n

      \n
    1. Inline CSS<\/strong><\/li>\n\n\n\n
    2. Internal CSS<\/strong><\/li>\n\n\n\n
    3. External CSS<\/strong><\/li>\n<\/ol>\n\n\n\n

      Let’s explore each method.<\/p>\n\n\n\n

      1. Inline CSS<\/h4>\n\n\n\n

      Inline CSS is used to apply styles directly to individual HTML elements using the style<\/code> attribute. This method is useful for quick, one-off changes but is not recommended for large-scale styling due to its lack of reusability.<\/p>\n\n\n\n

      Example:<\/strong><\/p>\n\n\n\n

      <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Inline CSS Example<\/title>\n<\/head>\n<body>\n    <h1 style=\"color: blue; text-align: center;\">Hello, World!<\/h1>\n    <p style=\"font-size: 18px; color: green;\">This is a paragraph with inline CSS.<\/p>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
      2. Internal CSS<\/h4>\n\n\n\n
      Internal CSS is used to define styles within the <style><\/code> tag in the <head><\/code> section of your HTML document. This method is useful for styling a single page but can become cumbersome if you have many pages with the same styles.<\/p>\n\n\n\n
      Example:<\/strong><\/p>\n\n\n\n
      <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Internal CSS Example<\/title>\n    <style>\n        h1 {\n            color: blue;\n            text-align: center;\n        }\n        p {\n            font-size: 18px;\n            color: green;\n        }\n    <\/style>\n<\/head>\n<body>\n    <h1>Hello, World!<\/h1>\n    <p>This is a paragraph with internal CSS.<\/p>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
      3. External CSS<\/h4>\n\n\n\n
      External CSS involves linking to a separate CSS file from your HTML document. This is the most efficient way to apply styles to multiple pages, as you can keep all your CSS in one file.<\/p>\n\n\n\n
      Example:<\/strong><\/p>\n\n\n\n
      HTML File (index.html):<\/strong><\/p>\n\n\n\n
      <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>External CSS Example<\/title>\n    <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n    <h1>Hello, World!<\/h1>\n    <p>This is a paragraph with external CSS.<\/p>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
      CSS File (styles.css):<\/strong><\/p>\n\n\n\n
      h1 {\n    color: blue;\n    text-align: center;\n}\n\np {\n    font-size: 18px;\n    color: green;\n}<\/code><\/pre>\n\n\n\n
      To use external CSS, you need to create a separate .css<\/code> file and link it to your HTML document using the <link><\/code> tag within the <head><\/code> section.<\/p>\n\n\n\n
      Basic CSS Syntax<\/h4>\n\n\n\n
      CSS uses a simple syntax that consists of selectors and declarations. Selectors are used to target HTML elements, while declarations specify the properties and values to be applied to those elements.<\/p>\n\n\n\n
      Example:<\/strong><\/p>\n\n\n\n
      selector {\n    property: value;\n}<\/code><\/pre>\n\n\n\n
      Example:<\/strong><\/p>\n\n\n\n
      h1 {\n    color: blue;\n    text-align: center;\n}<\/code><\/pre>\n\n\n\n
      In this example, h1<\/code> is the selector, and color: blue;<\/code> and text-align: center;<\/code> are the declarations. Each declaration consists of a property (color<\/code>, text-align<\/code>) and a value (blue<\/code>, center<\/code>).<\/p>\n\n\n\n
      Common CSS Properties<\/h4>\n\n\n\n
      Here are some common CSS properties you’ll use frequently:<\/p>\n\n\n\n
        \n
      • color<\/code>: Sets the text color.<\/li>\n\n\n\n
      • font-size<\/code>: Sets the size of the text.<\/li>\n\n\n\n
      • background-color<\/code>: Sets the background color of an element.<\/li>\n\n\n\n
      • margin<\/code>: Sets the space outside an element.<\/li>\n\n\n\n
      • padding<\/code>: Sets the space inside an element.<\/li>\n\n\n\n
      • border<\/code>: Sets the border around an element.<\/li>\n\n\n\n
      • width<\/code>: Sets the width of an element.<\/li>\n\n\n\n
      • height<\/code>: Sets the height of an element.<\/li>\n\n\n\n
      • text-align<\/code>: Aligns text horizontally (left, right, center).<\/li>\n<\/ul>\n\n\n\n
        Conclusion<\/h4>\n\n\n\n
        CSS is a powerful tool for web design, allowing you to create beautiful, responsive, and consistent web pages. By mastering the basics of CSS and understanding how to apply it in your HTML documents, you’ll be well on your way to becoming a proficient web designer.<\/p>\n\n\n\n
        Experiment with the different methods of applying CSS and try out various properties to see how they affect your web pages. With practice, you’ll gain confidence and skill in using CSS to bring your web designs to life. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"
        Understanding CSS: A Guide for Beginners CSS, or Cascading Style Sheets, is a language used to describe the presentation of […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[16],"tags":[],"class_list":["post-38","post","type-post","status-publish","format-standard","hentry","category-css"],"yoast_head":"\nWhat is CSS? - Web Development Course<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shaplakanon.com\/wdc\/what-is-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is CSS? - Web Development Course\" \/>\n<meta property=\"og:description\" content=\"Understanding CSS: A Guide for Beginners CSS, or Cascading Style Sheets, is a language used to describe the presentation of […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shaplakanon.com\/wdc\/what-is-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development Course\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-11T02:18:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-11T02:18:18+00:00\" \/>\n<meta name=\"author\" content=\"ShaplaKanon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ShaplaKanon\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/what-is-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/what-is-css\\\/\"},\"author\":{\"name\":\"ShaplaKanon\",\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/#\\\/schema\\\/person\\\/f5f224239283c27426dadc2e4cc9a825\"},\"headline\":\"What is CSS?\",\"datePublished\":\"2024-07-11T02:18:17+00:00\",\"dateModified\":\"2024-07-11T02:18:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/what-is-css\\\/\"},\"wordCount\":584,\"commentCount\":0,\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/what-is-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/what-is-css\\\/\",\"url\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/what-is-css\\\/\",\"name\":\"What is CSS? - Web Development Course\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/#website\"},\"datePublished\":\"2024-07-11T02:18:17+00:00\",\"dateModified\":\"2024-07-11T02:18:18+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/#\\\/schema\\\/person\\\/f5f224239283c27426dadc2e4cc9a825\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/what-is-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/what-is-css\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/what-is-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is CSS?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/#website\",\"url\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/\",\"name\":\"Web Development Course\",\"description\":\"Become a Web Developer from Home\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/#\\\/schema\\\/person\\\/f5f224239283c27426dadc2e4cc9a825\",\"name\":\"ShaplaKanon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g\",\"caption\":\"ShaplaKanon\"},\"sameAs\":[\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/\"],\"url\":\"https:\\\/\\\/shaplakanon.com\\\/wdc\\\/author\\\/sabahat\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is CSS? - Web Development Course","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/shaplakanon.com\/wdc\/what-is-css\/","og_locale":"en_US","og_type":"article","og_title":"What is CSS? - Web Development Course","og_description":"Understanding CSS: A Guide for Beginners CSS, or Cascading Style Sheets, is a language used to describe the presentation of […]","og_url":"https:\/\/shaplakanon.com\/wdc\/what-is-css\/","og_site_name":"Web Development Course","article_published_time":"2024-07-11T02:18:17+00:00","article_modified_time":"2024-07-11T02:18:18+00:00","author":"ShaplaKanon","twitter_card":"summary_large_image","twitter_misc":{"Written by":"ShaplaKanon","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/shaplakanon.com\/wdc\/what-is-css\/#article","isPartOf":{"@id":"https:\/\/shaplakanon.com\/wdc\/what-is-css\/"},"author":{"name":"ShaplaKanon","@id":"https:\/\/shaplakanon.com\/wdc\/#\/schema\/person\/f5f224239283c27426dadc2e4cc9a825"},"headline":"What is CSS?","datePublished":"2024-07-11T02:18:17+00:00","dateModified":"2024-07-11T02:18:18+00:00","mainEntityOfPage":{"@id":"https:\/\/shaplakanon.com\/wdc\/what-is-css\/"},"wordCount":584,"commentCount":0,"articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/shaplakanon.com\/wdc\/what-is-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/shaplakanon.com\/wdc\/what-is-css\/","url":"https:\/\/shaplakanon.com\/wdc\/what-is-css\/","name":"What is CSS? - Web Development Course","isPartOf":{"@id":"https:\/\/shaplakanon.com\/wdc\/#website"},"datePublished":"2024-07-11T02:18:17+00:00","dateModified":"2024-07-11T02:18:18+00:00","author":{"@id":"https:\/\/shaplakanon.com\/wdc\/#\/schema\/person\/f5f224239283c27426dadc2e4cc9a825"},"breadcrumb":{"@id":"https:\/\/shaplakanon.com\/wdc\/what-is-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/shaplakanon.com\/wdc\/what-is-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/shaplakanon.com\/wdc\/what-is-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/shaplakanon.com\/wdc\/"},{"@type":"ListItem","position":2,"name":"What is CSS?"}]},{"@type":"WebSite","@id":"https:\/\/shaplakanon.com\/wdc\/#website","url":"https:\/\/shaplakanon.com\/wdc\/","name":"Web Development Course","description":"Become a Web Developer from Home","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/shaplakanon.com\/wdc\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/shaplakanon.com\/wdc\/#\/schema\/person\/f5f224239283c27426dadc2e4cc9a825","name":"ShaplaKanon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ef2c8f93a0558c2047555f674c8746b22988ace93eba9262d198d0a28236ce97?s=96&d=mm&r=g","caption":"ShaplaKanon"},"sameAs":["https:\/\/shaplakanon.com\/wdc\/"],"url":"https:\/\/shaplakanon.com\/wdc\/author\/sabahat\/"}]}},"_links":{"self":[{"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/posts\/38","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/comments?post=38"}],"version-history":[{"count":1,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/posts\/38\/revisions"}],"predecessor-version":[{"id":39,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/posts\/38\/revisions\/39"}],"wp:attachment":[{"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/media?parent=38"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/categories?post=38"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shaplakanon.com\/wdc\/wp-json\/wp\/v2\/tags?post=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}