{"id":6541,"date":"2024-04-14T18:32:27","date_gmt":"2024-04-14T10:32:27","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6541"},"modified":"2024-04-14T18:32:27","modified_gmt":"2024-04-14T10:32:27","slug":"an-introduction-to-hypertext-markup-language-cascading-style-sheets","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/an-introduction-to-hypertext-markup-language-cascading-style-sheets\/","title":{"rendered":"An Introduction to HyperText Markup Language &amp; Cascading Style Sheets"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p id=\"\">Comprehending the connection between HyperText Markup Language (HTML) and Cascading Style Sheets (CSS) is vital when developing for the web. HTML forms the framework and substance of a website, whereas CSS <em id=\"\">transforms<\/em> the content. Webflow creates this code as you craft\/build on the Designer canvas.<\/p>\n<p id=\"\">During this session, you will uncover:<\/p>\n<ol id=\"\">\n<li id=\"\">The process of code rendering in browsers<\/li>\n<li id=\"\">How to examine website code<\/li>\n<li id=\"\">HTML and CSS<\/li>\n<li id=\"\">Creating designs while Webflow generates tidy code for you<\/li>\n<\/ol>\n<h2 id=\"\">The Rendering Process in Browsers<\/h2>\n<p id=\"\">While browsing a website, your browser interprets the code to display the website\u2019s content and structure on your screen.<\/p>\n<h2 id=\"\">Exploring Website Code<\/h2>\n<p id=\"\">You can delve into a website&#8217;s code by inspecting it behind the scenes. Most browsers allow you to inspect and temporarily edit the source code.<\/p>\n<p id=\"\">To inspect a website\u2019s code on Chrome, you have two options:<\/p>\n<ul id=\"\">\n<li id=\"\">Right-click and select <strong id=\"\">Inspect<\/strong> from the context menu<\/li>\n<li id=\"\">Press <strong id=\"\">Control<\/strong> + <strong id=\"\">Shift<\/strong> + <strong id=\"\">I<\/strong> (on Windows) or <strong id=\"\">Command<\/strong> + <strong id=\"\">Option<\/strong> + <strong id=\"\">I<\/strong> (on Mac)<\/li>\n<\/ul>\n<p id=\"\">You can modify code in the inspector to temporarily alter the displayed content in your browser. These changes are local (i.e., confined to <em id=\"\">your<\/em> browser) and will vanish upon refreshing the page, unseen by other site visitors.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94bcd3bed0793e796a5d3_642cba8ccc83d9bd913faf70_xuxcama_j-t1y2cakd37190uxftubzsivv5n9mlawb33aqmtr5zswhrgvaxq_vmacgdlm7frlpii4bcymejqvmdurmlse8qlerhi49dpwwxwl9c4plfns-xp7y9u4p_hsmqfkj46cwbv4lynqj-m2c.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"The Google homepage and the inspector are displayed side-by-side, and the Google logo is highlighted on the webpage.\" title=\"64b94bcd3bed0793e796a5d3_642cba8ccc83d9bd913faf70_xuxcama_j-t1y2cakd37190uxftubzsivv5n9mlawb33aqmtr5zswhrgvaxq_vmacgdlm7frlpii4bcymejqvmdurmlse8qlerhi49dpwwxwl9c4plfns-xp7y9u4p_hsmqfkj46cwbv4lynqj-m2c\"><\/div><figcaption id=\"\">On hovering over code lines in the inspector, the corresponding webpage sections are highlighted.<\/figcaption><\/figure>\n<h2 id=\"\">HTML and CSS<\/h2>\n<p id=\"\">HTML defines a website\u2019s content and structure, while CSS dictates the content\u2019s appearance. Visualize a website as a residence: HTML represents the structure and foundation, and CSS represents the color scheme.<\/p>\n<h3 id=\"\">HyperText Markup Language (HTML)<\/h3>\n<p id=\"\">HTML governs a website\u2019s content and informs the browser about page elements, including headings, paragraphs, links, and images.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"56.206088992974244%\" data-rt-dimensions=\"854:480\" data-page-url=\"https:\/\/www.youtube-nocookie.com\/embed\/EFHoH15i4Zg\">\n<div id=\"\"><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/www.youtube.com\/embed\/EFHoH15i4Zg\" title=\"Intro to HTML for beginners - Web fundamentals\"><\/iframe><\/div>\n<\/figure>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94bcd3bed0793e796a5ab_642cba8c75d75b64d1606fe9_ta7gblfj8tby_k-kiogdqf925ekczz3qpeiun6sfu7d7quqt2xmtpy73j52fzp9ul3tygh5eh2-ai8qwr9pgkbeaxi6dprk8jlyefar3xcu_ca9muyrl-zj_awghbmtj2sru31q6hjr0a1xkwb4qru.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"HTML code is displayed next to its webpage.\" title=\"64b94bcd3bed0793e796a5ab_642cba8c75d75b64d1606fe9_ta7gblfj8tby_k-kiogdqf925ekczz3qpeiun6sfu7d7quqt2xmtpy73j52fzp9ul3tygh5eh2-ai8qwr9pgkbeaxi6dprk8jlyefar3xcu_ca9muyrl-zj_awghbmtj2sru31q6hjr0a1xkwb4qru\"><\/div>\n<\/figure>\n<p id=\"\">In the earlier days, web designers had to style HTML content with inline styles, line by line, posing challenges in updating site-wide styles like font families or sizes. However, CSS is now utilized.<\/p>\n<h3 id=\"\">Cascading Style Sheets (CSS)<\/h3>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"56.206088992974244%\" data-rt-dimensions=\"854:480\" data-page-url=\"https:\/\/www.youtube-nocookie.com\/embed\/De2unauLBks\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/www.youtube.com\/embed\/De2unauLBks\" title=\"Intro to CSS for beginners - Web fundamentals\"><\/iframe><\/div>\n<\/figure>\n<p id=\"\">CSS manages the appearance of website content (e.g., colors, borders, size, positioning, typography, etc.). It consolidates styling information previously applied inline into a separate style document, enabling group styling through classes. Changes made to a class or HTML tag in the CSS file will reflect on any associated elements.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94bcd3bed0793e796a5af_642cba8c11e38e167762091f_ozprmlu7jpvrk7ky8zyd9s7_mc4bzhjnptd7awk-uglcrwo_uawt2xot3oxju2rylpy3uvylfxwxxqmidoqxdhoveod4jiouktkm1qnre2zf05eiqqubogr3gvfzgdn-mgo2ychcfkt6i6pjzsch3j.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"3 H2 headings are highlighted on the Slack marketing site and the CSS styles for the H2 selector are displayed to the right.\" title=\"64b94bcd3bed0793e796a5af_642cba8c11e38e167762091f_ozprmlu7jpvrk7ky8zyd9s7_mc4bzhjnptd7awk-uglcrwo_uawt2xot3oxju2rylpy3uvylfxwxxqmidoqxdhoveod4jiouktkm1qnre2zf05eiqqubogr3gvfzgdn-mgo2ychcfkt6i6pjzsch3j\"><\/div><figcaption id=\"\">Modifying the H2 CSS selector will alter the style of all H2 headings.<\/figcaption><\/figure>\n<h3 id=\"\">The Challenge: Increasing Code Complexity<\/h3>\n<p id=\"\">In the early web era, designers focused on basic tags and attributes. As technology advanced, web complexity grew, accompanied by personalized online experiences.<\/p>\n<p id=\"\">Adapting to these changes necessitated continual education. With the expanding possibilities in web design and development, the landscape became more intricate behind the scenes.<\/p>\n<p id=\"\">Today, web developers employ multiple languages and tools (e.g., HTML, CSS, JS, Java, code libraries, version control like GitHub, etc.) while addressing various considerations like browser inconsistencies, device variations, performance enhancements, SEO, etc. This ever-expanding list sometimes renders web development daunting, but that\u2019s where Webflow steps in.<\/p>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1500px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94bcd3bed0793e796a5d0_642cba8c2e874182f793a4d1_w1gzfmijt-g3sjyzumpn6hylkkjxrfiyrrb6do-qer3nhggd5jpnhfd2aniejhfj7svscwp9in27qh1luajpgbhuyklqpy_5xnwgkhorjd8c6m56qir37nz_idtkgvxdx81uybrvaavbj721ucq5jq.png\" id=\"\" width=\"auto\" height=\"auto\" loading=\"auto\" alt=\"Various coding language logos and frontend, backend, and logic tool logos are displayed on a timeline from 2002 to 2018.\" title=\"64b94bcd3bed0793e796a5d0_642cba8c2e874182f793a4d1_w1gzfmijt-g3sjyzumpn6hylkkjxrfiyrrb6do-qer3nhggd5jpnhfd2aniejhfj7svscwp9in27qh1luajpgbhuyklqpy_5xnwgkhorjd8c6m56qir37nz_idtkgvxdx81uybrvaavbj721ucq5jq\"><\/div>\n<\/figure>\n<h2 id=\"\">Designing Concepts While Webflow Automates Neat Coding<\/h2>\n<p id=\"\">Understanding HTML and CSS principles is crucial since they form the core framework of web design. Nevertheless, thanks to Webflow, manual HTML and CSS coding are things of the past.<\/p>\n<p id=\"\">Webflow enables web designers and developers to create websites more effectively by manipulating content on the Webflow canvas, directly impacting the website&#8217;s production-ready code \u2014 the HTML and CSS. Learn more about designing in the Webflow Designer.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Learn about HTML, CSS, and how Webflow generates this code while you design.","protected":false},"author":2,"featured_media":6542,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[287],"tags":[],"class_list":{"0":"post-6541","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-getting-started","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6541"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6541\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6542"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}