{"id":129895,"date":"2022-04-13T10:11:13","date_gmt":"2022-04-13T14:11:13","guid":{"rendered":"https:\/\/brainstation.io\/?post_type=codex-reference&#038;p=129895"},"modified":"2025-02-04T14:55:18","modified_gmt":"2025-02-04T19:55:18","slug":"reference","status":"publish","type":"codex-reference","link":"https:\/\/brainstation.io\/learn\/html\/reference","title":{"rendered":"HTML &#038; CSS Reference"},"content":{"rendered":"\n<header class=\"wp-block-bstn-blocks-hero-with-overview bstn-blocks-hero-with-overview\"><div class=\"bstn-blocks-hero-with-overview__full-width-wrapper bstn-blocks-hero-with-overview__full-width-wrapper--main\"><svg fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"bstn-blocks-hero-with-overview__bg-flair--full\"><g opacity=\"0.35\"><path d=\"M-103.887 96.613H499.5\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path cliprule=\"evenodd\" d=\"M174.55-136.427v254.863-254.863zm139.219 0v254.863-254.863zm139.219 0v254.863-254.863zM35.332-232v350.436V-232z\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path fillrule=\"evenodd\" cliprule=\"evenodd\" d=\"M35.361 100.134c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.169 0c1.761 0 3.187-1.446 3.187-3.23 0-1.783-1.426-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23z\" fill=\"#3C4556\"><\/path><path d=\"M-244.061 214.487H499.5\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path cliprule=\"evenodd\" d=\"M174.55 214.009v254.863-254.863zm139.219 0v254.863-254.863zm139.219 0v254.863-254.863zM35.332 118.436v350.436-350.436z\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path fillrule=\"evenodd\" cliprule=\"evenodd\" d=\"M35.361 218.03c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23zm139.169 0c1.761 0 3.187-1.446 3.187-3.23 0-1.783-1.426-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23z\" fill=\"#3C4556\"><\/path><path d=\"M534.544 96.613h140.811m138.263 0H1417\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path cliprule=\"evenodd\" d=\"M674.718 96.772v21.664-21.664zM813.618-232v350.436V-232zm139.218 0v350.436V-232z\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path fillrule=\"evenodd\" cliprule=\"evenodd\" d=\"M535.357 100.134c1.761 0 3.187-1.446 3.187-3.23 0-1.783-1.426-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.169 0c1.761 0 3.187-1.446 3.187-3.23 0-1.783-1.426-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.23-3.187-3.23-1.76 0-3.187 1.447-3.187 3.23 0 1.784 1.427 3.23 3.187 3.23z\" fill=\"#3C4556\"><\/path><path d=\"M673.444 214.487H1417\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path cliprule=\"evenodd\" d=\"M674.718 118.436v228.739-228.739zm138.9 0v350.436-350.436zm139.218 0v350.436-350.436z\" stroke=\"#3C4556\" strokelinecap=\"square\"><\/path><path fillrule=\"evenodd\" cliprule=\"evenodd\" d=\"M813.696 218.03c1.761 0 3.187-1.446 3.187-3.23 0-1.783-1.426-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23zm139.17 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23zm-278.339 0c1.76 0 3.187-1.446 3.187-3.23 0-1.783-1.427-3.229-3.187-3.229-1.76 0-3.187 1.446-3.187 3.229 0 1.784 1.427 3.23 3.187 3.23z\" fill=\"#3C4556\"><\/path><\/g><\/svg><div class=\"bstn-blocks-hero-with-overview__container\"><div class=\"bstn-blocks-hero-with-overview__copy-container\"><img decoding=\"async\" class=\"bstn-blocks-hero-with-overview__title-icon\" src=\"https:\/\/d3ghupt9z9s6o0.cloudfront.net\/app\/uploads\/2022\/04\/12102435\/HTML-CSS-Light.svg\" alt=\"\"\/><p class=\"bstn-blocks-hero-with-overview__subtitle\"><meta charset=\"utf-8\">HTML &amp; CSS References<\/p><h1 class=\"bstn-blocks-hero-with-overview__title\">HTML &amp; CSS Reference Guide<\/h1><p class=\"bstn-blocks-hero-with-overview__description\">Get started with computer programming and building websites.<\/p><\/div><div class=\"bstn-blocks-hero-with-overview__image-container\"><img decoding=\"async\" class=\"bstn-blocks-hero-with-overview__image\" src=\"https:\/\/d3ghupt9z9s6o0.cloudfront.net\/app\/uploads\/2022\/04\/12115013\/HTML-CSS-Light-Transparent.svg\" alt=\"\"\/><\/div><\/div><\/div><div class=\"bstn-blocks-hero-with-overview__full-width-wrapper bstn-blocks-hero-with-overview__full-width-wrapper--offset\"><div class=\"bstn-blocks-hero-with-overview__container\"><div class=\"bstn-blocks-hero-with-overview__card-container\"><div class=\"bstn-blocks-hero-with-overview__copy-card\"><nav class=\"bstn-blocks-hero-overview\"><h2 class=\"bstn-blocks-hero-overview__title\"><meta charset=\"utf-8\">Tutorial Contents<\/h2><ol class=\"bstn-blocks-hero-overview__list\">\n<li class=\"wp-block-bstn-blocks-overview-link bstn-blocks-hero-overview-link bstn-blocks-hero-overview-link--indent-0\" style=\"margin-left:0px\"><a class=\"bstn-blocks-hero-overview-link__anchor\" href=\"#about-the-brainstation-html-and-css-reference-guide\">About the BrainStation HTML and CSS Reference Guide<\/a><\/li>\n\n\n\n<li class=\"wp-block-bstn-blocks-overview-link bstn-blocks-hero-overview-link bstn-blocks-hero-overview-link--indent-0\" style=\"margin-left:0px\"><a class=\"bstn-blocks-hero-overview-link__anchor\" href=\"#html-basics\">HTML Basics<\/a><\/li>\n\n\n\n<li class=\"wp-block-bstn-blocks-overview-link bstn-blocks-hero-overview-link bstn-blocks-hero-overview-link--indent-0\" style=\"margin-left:0px\"><a class=\"bstn-blocks-hero-overview-link__anchor\" href=\"#html-elements\"><meta charset=\"utf-8\">HTML Elements<\/a><\/li>\n\n\n\n<li class=\"wp-block-bstn-blocks-overview-link bstn-blocks-hero-overview-link bstn-blocks-hero-overview-link--indent-0\" style=\"margin-left:0px\"><a class=\"bstn-blocks-hero-overview-link__anchor\" href=\"#additional-resources\">Additional Resources<\/a><\/li>\n<\/ol><\/nav><\/div><\/div><\/div><\/div><\/header>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h3 has-text-align-left\" id=\"about-the-brainstation-html-and-css-reference-guide\"><h2 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">About the BrainStation HTML and CSS Reference Guide<\/h2><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">If you are new to coding with HTML and CSS, this reference guide is intended to help you get started with computer programming and building websites. When used alongside BrainStation\u2019s free interactive HTML and CSS tutorial, this guide should help you master the basics of coding a website with HTML and CSS before you get started working hands-on with real code.<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">This reference guide will provide an introduction to HTML and CSS for beginners, with an overview of key syntax, concepts, and terminology.<\/p>\n\n\n\n<hr class=\"wp-block-bstn-blocks-section-divider bstn-blocks-section-divider bstn-blocks-section-divider--grey\"\/>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h3 has-text-align-left\" id=\"html-basics\"><h2 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">HTML Basics<\/h2><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Learn about the foundations of HTML and CSS.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"http:\/\/brainstation.io\/learn\/html\/basics\">HTML Basics<\/a><\/li><li><a href=\"http:\/\/brainstation.io\/learn\/html\/css\">HTML and CSS<\/a> <\/li><li><a href=\"http:\/\/brainstation.io\/learn\/html\/what-is-css\">What is CSS?<\/a><\/li><li><a href=\"http:\/\/brainstation.io\/learn\/html\/css-syntax\">CSS Syntax<\/a><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-bstn-blocks-section-divider bstn-blocks-section-divider bstn-blocks-section-divider--grey\"\/>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h3 has-text-align-left\" id=\"html-elements\"><h2 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">HTML Elements<\/h2><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Find out how HTML elements are used to add formatting and semantics to HTML documents.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"http:\/\/brainstation.io\/ learn\/html\/elements\">HTML Elements<\/a><\/li><li><a href=\"http:\/\/brainstation.io\/ learn\/html\/tags\">HTML Tags<\/a><\/li><li><a href=\"http:\/\/brainstation.io\/ learn\/html\/attributes\">HTML Attributes<\/a><\/li><li><a href=\"http:\/\/brainstation.io\/ learn\/html\/forms\">HTML Forms<\/a><\/li><li><a href=\"http:\/\/brainstation.io\/ learn\/html\/input-types\">HTML Input Types<\/a><\/li><li><a href=\"http:\/\/brainstation.io\/ learn\/html\/lists\">HTML Lists<\/a><\/li><li><a href=\"http:\/\/brainstation.io\/ learn\/html\/table\">HTML Table<\/a><\/li><\/ul>\n\n\n\n<hr class=\"wp-block-bstn-blocks-section-divider bstn-blocks-section-divider bstn-blocks-section-divider--grey\"\/>\n\n\n\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h3 has-text-align-left\" id=\"additional-resources\"><h2 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">Additional Resources<\/h2><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/brainstation.io\/learn\/html\">HTML and CSS Tutorial<\/a><\/li><\/ul>\n\n\n\n<div class=\"wp-block-bstn-blocks-content-navigation-footer bstn-blocks-content-nav-footer bstn-blocks-content-nav-footer--docs\"><div class=\"bstn-blocks-content-nav-footer__links-container\"><div class=\"bstn-blocks-content-nav-footer__link-container\"><\/div><div class=\"bstn-blocks-content-nav-footer__link-container\"><p class=\"bstn-blocks-content-nav-footer__link-title\">Next Tutorial<\/p><a class=\"bstn-blocks-content-nav-footer__link\" href=\"\/learn\/html\/basics \"><span class=\"bstn-blocks-content-nav-footer__link-text\">HTML Basics<\/span><span class=\"bstn-blocks-content-nav-footer__link-icon-wrapper bstn-blocks-content-nav-footer__link-icon-wrapper--right\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 18 18\" fill=\"none\" class=\"bstn-blocks-content-nav-footer__link-icon bstn-blocks-content-nav-footer__link-icon--right\"><path fill=\"currentColor\" d=\"M6.345 12.743a1 1 0 001.31 1.511l5.477-4.749a1 1 0 000-1.511l-5.477-4.75a1.001 1.001 0 00-1.31 1.512l4.606 3.993-4.606 3.994z\"><\/path><\/svg><\/span><\/a><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-bstn-blocks-container bstn-blocks-container bstn-blocks-container--dark-blue bstn-blocks-container--64 bstn-blocks-container--negative-container bstn-blocks-container--overflow-hidden\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 1140 621\" fill=\"none\" class=\"bstn-blocks-container__bg-flair\"><g opacity=\"0.55\"><path stroke=\"#3C4556\" strokelinecap=\"square\" d=\"M60.026 736.434V203.02\"><\/path><path stroke=\"#3C4556\" strokelinecap=\"square\" d=\"M60.364 436.132L-120 436.131l180.364.001zm0-99.873H-120 60.364zm0-99.872H-120 60.364zM128 536.004h-248 248z\" cliprule=\"evenodd\"><\/path><path fill=\"#3C4556\" fillrule=\"evenodd\" d=\"M57.518 535.982a2.286 2.286 0 114.572 0 2.286 2.286 0 01-4.572 0zm0-99.836a2.286 2.286 0 114.572-.002 2.286 2.286 0 01-4.572.002zm0-99.837a2.286 2.286 0 114.572-.002 2.286 2.286 0 01-4.572.002zm0-99.837a2.286 2.286 0 114.572-.002 2.286 2.286 0 01-4.572.002z\" cliprule=\"evenodd\"><\/path><\/g><g opacity=\"0.55\"><path stroke=\"#3C4556\" strokelinecap=\"square\" d=\"M979.195-28.206V397.98m81.185-524.745V397.98\"><\/path><path stroke=\"#3C4556\" strokelinecap=\"square\" d=\"M1141.45 168.46H964h177.45zm0 98.334H964h177.45zm0 98.333H964h177.45zm66.55-295H964h244z\" cliprule=\"evenodd\"><\/path><path fill=\"#3C4556\" fillrule=\"evenodd\" d=\"M1138.66 70.148a2.244 2.244 0 104.49 0 2.246 2.246 0 10-4.49-.001zm-80.21 0c0 1.243 1.01 2.251 2.25 2.251s2.25-1.008 2.25-2.251c0-1.243-1.01-2.251-2.25-2.251s-2.25 1.008-2.25 2.25zm-81.707 0a2.25 2.25 0 104.5.004 2.25 2.25 0 00-4.5-.005zm81.707 98.299a2.252 2.252 0 002.25 2.251 2.252 2.252 0 000-4.503 2.253 2.253 0 00-2.25 2.252zm-81.707 0a2.25 2.25 0 104.498 0 2.25 2.25 0 00-2.249-2.252 2.25 2.25 0 00-2.249 2.252zm161.917-.001a2.244 2.244 0 104.49 0 2.246 2.246 0 10-4.49 0zm0 98.299a2.244 2.244 0 104.49 0 2.246 2.246 0 10-4.49 0zm-80.21 0c0 1.243 1.01 2.251 2.25 2.251s2.25-1.008 2.25-2.251c0-1.243-1.01-2.251-2.25-2.251s-2.25 1.008-2.25 2.251zm-81.707 0a2.25 2.25 0 104.5.002 2.25 2.25 0 00-4.5-.002zm81.707 98.299c0 1.243 1.01 2.251 2.25 2.251s2.25-1.008 2.25-2.251c0-1.243-1.01-2.251-2.25-2.251s-2.25 1.008-2.25 2.251zm-81.707 0a2.25 2.25 0 104.5.002 2.25 2.25 0 00-4.5-.002zm161.917 0a2.244 2.244 0 104.49 0 2.246 2.246 0 10-4.49 0z\" cliprule=\"evenodd\"><\/path><\/g><\/svg><div class=\"bstn-blocks-container__wrapper bstn-blocks-container__wrapper--readable-width bstn-blocks-container__wrapper--negative-container\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h2 has-text-align-left bstn-blocks-heading--divider\"><h3 class=\"bstn-blocks-heading__heading-element\">Learn HTML &amp; CSS Today<\/h3><\/div>\n\n\n\n<p>Get hands-on experience writing real code while you learn with interactive tutorials in our free online learning platform &#8211; no downloads or complicated setup required.<\/p>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list is-style-kg-list-checklist-alternate\"><li>Free and fun<\/li><li>Designed for beginners<\/li><li>No download or setup required<\/li><\/ul>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-bstn-button-primary\"><a class=\"wp-block-button__link\" href=\"\/learn\/html\">Get Started<\/a><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"height:48px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/d3ghupt9z9s6o0.cloudfront.net\/app\/uploads\/2022\/04\/13110641\/CSS-promo-clip.mp4\"><\/video><\/figure>\n<\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you are new to coding with HTML and CSS, this reference guide is intended to help you get started with computer programming and building websites. When used alongside BrainStation\u2019s free interactive HTML and CSS tutorial, this guide should help you master the basics of coding a website with HTML and CSS before you get [&hellip;]<\/p>\n","protected":false},"featured_media":0,"parent":129964,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-129895","codex-reference","type-codex-reference","status-publish","format-standard","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/codex-reference\/129895","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/codex-reference"}],"about":[{"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/types\/codex-reference"}],"version-history":[{"count":10,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/codex-reference\/129895\/revisions"}],"predecessor-version":[{"id":131450,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/codex-reference\/129895\/revisions\/131450"}],"up":[{"embeddable":true,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/codex-reference\/129964"}],"wp:attachment":[{"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/media?parent=129895"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/categories?post=129895"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/tags?post=129895"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}