{"id":130000,"date":"2022-04-13T10:04:10","date_gmt":"2022-04-13T14:04:10","guid":{"rendered":"https:\/\/brainstation.io\/?post_type=codex-reference&#038;p=130000"},"modified":"2025-02-04T14:44:16","modified_gmt":"2025-02-04T19:44:16","slug":"css","status":"publish","type":"codex-reference","link":"https:\/\/brainstation.io\/learn\/html\/css","title":{"rendered":"CSS"},"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 and CSS<\/h1><p class=\"bstn-blocks-hero-with-overview__description\">HTML and CSS are fundamental technologies for web development and building web pages. Standing for HyperText Markup Language, HTML gives a web page its structure while CSS (which stands for cascading style sheets) gives web pages their visual layout. HTML and CSS are at the very core of most websites and web applications.<\/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\">Overview<\/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=\"#what-is-the-difference-between-html-and-css\"><meta charset=\"utf-8\">What is the difference between HTML and CSS?<\/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=\"#how-to-link-css-to-html\"><meta charset=\"utf-8\">How to link CSS to HTML<\/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=\"what-is-the-difference-between-html-and-css\"><h2 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">What Is the Difference Between HTML and CSS?<\/h2><\/div>\n\n\n\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\" style=\"flex-basis:66.66%\">\n<p class=\"is-style-bstn-paragraph-documentation-body\">The main difference between HTML and CSS is that while HTML defines the structure of web pages, CSS is used to style those pages with a variety of different features. If we think of HTML code as the skeleton of a web page, CSS would be its skin.<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">Other differences between HTML and CSS include:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>HTML consists of text contained within HTML tags, while CSS is made up of declaration blocks and selectors<\/li><li>Where HTML gives a web browser display information of various tags, CSS enhances that information to the browser by adding styling to those HTML tags<\/li><li>CSS can be used inside an HTML document, but HTML cannot be used inside a CSS sheet<\/li><li>CSS is used for presentation and visual effect \u2014 to manipulate colors, fonts, and backgrounds, add visual style to sites, prepare images, specify margins and borders, and much more \u2014 while HTML is not<\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\"><\/div>\n<\/div>\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-columns is-layout-flex wp-container-core-columns-is-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:75%\">\n<div class=\"wp-block-bstn-blocks-heading bstn-blocks-heading bstn-blocks-heading--h3 has-text-align-left\" id=\"how-to-link-css-to-html\"><h2 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">How to Link CSS to HTML<\/h2><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">There are three ways to link or add CSS to an HTML page: inline style, internal style, and external style.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-3 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--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">Inline CSS<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">The easiest method for adding CSS to an HTML file, an inline style is applied to HTML documents through the style attribute. Inline styles can apply unique styles to HTML elements or a single HTML element. Any CSS property can be contained within the style attribute. It should be noted that because inline styles mix presentation and content, this method shouldn&#8217;t be used too frequently.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-bstn-blocks-code-snippet bstn-blocks-code-snippet\" data-code-snippet=\"true\"><div class=\"bstn-blocks-code-snippet__title-bar\"><span class=\"bstn-blocks-code-snippet__title\">Sample Inline CSS<\/span><button class=\"bstn-blocks-code-snippet__copy-trigger\" aria-label=\"Copy code to clipboard\" data-copy-to-clipboard=\"true\"><svg viewbox=\"0 0 12 13\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"bstn-blocks-code-snippet__copy-trigger-icon\"><path d=\"M10.875.5h-7.5c-.633 0-1.125.516-1.125 1.125V2.75H1.125C.492 2.75 0 3.266 0 3.875v7.5A1.11 1.11 0 001.125 12.5h7.5c.61 0 1.125-.492 1.125-1.125V10.25h1.125c.61 0 1.125-.492 1.125-1.125v-7.5A1.14 1.14 0 0010.875.5zm-2.39 10.875h-7.22c-.093 0-.14-.047-.14-.14v-7.22c0-.07.047-.14.14-.14h.985v5.25a1.11 1.11 0 001.125 1.125h5.25v.984c0 .094-.07.141-.14.141zm2.25-2.25h-7.22c-.093 0-.14-.047-.14-.14v-7.22c0-.07.047-.14.14-.14h7.22c.07 0 .14.07.14.14v7.22c0 .093-.07.14-.14.14z\" fill=\"currentColor\"><\/path><\/svg><span data-copy-to-clipboard-text=\"true\">Copy<\/span><\/button><\/div><pre class=\"bstn-blocks-code-snippet__code-snippet-area match-braces language-markup\" data-language=\"markup\" aria-readonly=\"true\"><code>&lt;!DOCTYPE html>\n&lt;html>\n  &lt;body>\n    &lt;p style=\"color:blue;text-align:center\">\n    This is a centered paragraph with blue text.&lt;\/p>\n  &lt;\/body>\n&lt;\/html>\n<\/code><\/pre><\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-4 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--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">Internal CSS<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">If a single HTML page has a unique style, you can use an internal style sheet, which will be defined within the head section of an HTML page within the style element.<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">As you write HTML, you can place as many CSS styles as you want between the opening and closing style tags, before the body. Here is an example of internal CSS.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-bstn-blocks-code-snippet bstn-blocks-code-snippet\" data-code-snippet=\"true\"><div class=\"bstn-blocks-code-snippet__title-bar\"><span class=\"bstn-blocks-code-snippet__title\">Sample Internal CSS<\/span><button class=\"bstn-blocks-code-snippet__copy-trigger\" aria-label=\"Copy code to clipboard\" data-copy-to-clipboard=\"true\"><svg viewbox=\"0 0 12 13\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"bstn-blocks-code-snippet__copy-trigger-icon\"><path d=\"M10.875.5h-7.5c-.633 0-1.125.516-1.125 1.125V2.75H1.125C.492 2.75 0 3.266 0 3.875v7.5A1.11 1.11 0 001.125 12.5h7.5c.61 0 1.125-.492 1.125-1.125V10.25h1.125c.61 0 1.125-.492 1.125-1.125v-7.5A1.14 1.14 0 0010.875.5zm-2.39 10.875h-7.22c-.093 0-.14-.047-.14-.14v-7.22c0-.07.047-.14.14-.14h.985v5.25a1.11 1.11 0 001.125 1.125h5.25v.984c0 .094-.07.141-.14.141zm2.25-2.25h-7.22c-.093 0-.14-.047-.14-.14v-7.22c0-.07.047-.14.14-.14h7.22c.07 0 .14.07.14.14v7.22c0 .093-.07.14-.14.14z\" fill=\"currentColor\"><\/path><\/svg><span data-copy-to-clipboard-text=\"true\">Copy<\/span><\/button><\/div><pre class=\"bstn-blocks-code-snippet__code-snippet-area match-braces language-markup\" data-language=\"markup\" aria-readonly=\"true\"><code>&lt;!DOCTYPE html>\n&lt;html>\n  &lt;head>\n    &lt;title>Embedded Style Sample&lt;\/title>\n    &lt;style type=\"text\/css\">\n      h1{\n        color: #0000FF;\n      }\n      h2{\n        color: #00CCFF;\n      }\n    &lt;\/style>\n&lt;\/head>\n&lt;\/html><\/code><\/pre><\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-5 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--h4 bstn-blocks-heading--mt-0 has-text-align-left\"><h3 class=\"bstn-blocks-heading__heading-element\"><meta charset=\"utf-8\">External CSS<\/h3><\/div>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">An external style sheet is a text file containing only CSS style formats that will have the .css extension. External style sheets allow you to alter a website&#8217;s look by swapping out only one file.<\/p>\n\n\n\n<p class=\"is-style-bstn-paragraph-documentation-body\">External style sheets and HTML files are separate. External styles will be defined in the head section of HTML pages within the link element. External CSS files should not contain any HTML tags. You should also save your HTML file in the same folder as your .css file.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-bstn-blocks-code-snippet bstn-blocks-code-snippet\" data-code-snippet=\"true\"><div class=\"bstn-blocks-code-snippet__title-bar\"><span class=\"bstn-blocks-code-snippet__title\">Sample External CSS<\/span><button class=\"bstn-blocks-code-snippet__copy-trigger\" aria-label=\"Copy code to clipboard\" data-copy-to-clipboard=\"true\"><svg viewbox=\"0 0 12 13\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"bstn-blocks-code-snippet__copy-trigger-icon\"><path d=\"M10.875.5h-7.5c-.633 0-1.125.516-1.125 1.125V2.75H1.125C.492 2.75 0 3.266 0 3.875v7.5A1.11 1.11 0 001.125 12.5h7.5c.61 0 1.125-.492 1.125-1.125V10.25h1.125c.61 0 1.125-.492 1.125-1.125v-7.5A1.14 1.14 0 0010.875.5zm-2.39 10.875h-7.22c-.093 0-.14-.047-.14-.14v-7.22c0-.07.047-.14.14-.14h.985v5.25a1.11 1.11 0 001.125 1.125h5.25v.984c0 .094-.07.141-.14.141zm2.25-2.25h-7.22c-.093 0-.14-.047-.14-.14v-7.22c0-.07.047-.14.14-.14h7.22c.07 0 .14.07.14.14v7.22c0 .093-.07.14-.14.14z\" fill=\"currentColor\"><\/path><\/svg><span data-copy-to-clipboard-text=\"true\">Copy<\/span><\/button><\/div><pre class=\"bstn-blocks-code-snippet__code-snippet-area match-braces language-markup\" data-language=\"markup\" aria-readonly=\"true\"><code>&lt;!DOCTYPE html>\n&lt;html>\n  &lt;head>\n    &lt;link rel=\"stylesheet\" href=\"styles.css\">\n  &lt;\/head>\n&lt;\/html><\/code><\/pre><\/div>\n<\/div>\n<\/div>\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\"><p class=\"bstn-blocks-content-nav-footer__link-title bstn-blocks-content-nav-footer__link--desktop\">Previous Tutorial<\/p><a class=\"bstn-blocks-content-nav-footer__link\" href=\"\/learn\/html\/basics\"><span class=\"bstn-blocks-content-nav-footer__link-icon-wrapper bstn-blocks-content-nav-footer__link-icon-wrapper--left\"><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--left\"><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><span class=\"bstn-blocks-content-nav-footer__link-text bstn-blocks-content-nav-footer__link--desktop\">HTML Basics<\/span><\/a><\/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\/what-is-css\"><span class=\"bstn-blocks-content-nav-footer__link-text\">What is CSS?<\/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-6 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>The main difference between HTML and CSS is that while HTML defines the structure of web pages, CSS is used to style those pages with a variety of different features. If we think of HTML code as the skeleton of a web page, CSS would be its skin. Other differences between HTML and CSS include: [&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-130000","codex-reference","type-codex-reference","status-publish","format-standard","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/codex-reference\/130000","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\/130000\/revisions"}],"predecessor-version":[{"id":131445,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/codex-reference\/130000\/revisions\/131445"}],"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=130000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/categories?post=130000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brainstation.io\/wp\/api\/wp\/v2\/tags?post=130000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}