{"id":83157,"date":"2024-02-02T14:03:45","date_gmt":"2024-02-02T14:03:45","guid":{"rendered":"https:\/\/learn.wordpress.org\/?post_type=lesson&#038;p=83157"},"modified":"2024-07-31T13:51:38","modified_gmt":"2024-07-31T13:51:38","slug":"css","status":"publish","type":"lesson","link":"https:\/\/learn.wordpress.org\/lesson\/css\/","title":{"rendered":"CSS"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"The programming languages of WordPress \u2013 CSS\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/nE7pWh2N2WM?feature=oembed&#038;enablejsapi=1&#038;origin=https:\/\/learn.wordpress.org\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If HTML is the structure, then CSS is the style of the web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this lesson, you&#8217;ll learn how CSS is used with HTML, and where to find more information on CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is CSS?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">CSS stands for Cascading Style Sheets. If HTML describes the structure of a web page then CSS describes the style of a document.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">CSS is used to define the colors, fonts, and layout of a web page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s take a look at the HTML document from the HTML lesson:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;html lang=\"en\"&gt;\n    &lt;head&gt;\n        &lt;title&gt;My HTML document&lt;\/title&gt;\n    &lt;\/head&gt;\n    &lt;body class=\"main\"&gt;\n        &lt;h1&gt;This is the heading of my HTML document&lt;\/h1&gt;\n        &lt;img src=\"https:\/\/picsum.photos\/250\" alt=\"A randomly selected image\"&gt;\n        &lt;p&gt;This is the content of my HTML document.&lt;\/p&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In the above example, the HTML document is unstyled. It is displayed in the browser using the default browser styles. But you can alter the styles using CSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, you can change the color of the heading element to red, and change the font size of the paragraph element to 20 pixels.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;html lang=\"en\"&gt;\n    &lt;head&gt;\n        &lt;title&gt;My HTML document&lt;\/title&gt;\n    &lt;\/head&gt;\n    &lt;body class=\"main\"&gt;\n        &lt;h1 style=\"color: red;\"&gt;This is the heading of my HTML document&lt;\/h1&gt;\n        &lt;img src=\"https:\/\/picsum.photos\/250\" alt=\"A randomly selected image\"&gt;\n        &lt;p style=\"font-size: 20px;\"&gt;This is the content of my HTML document.&lt;\/p&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Adding CSS to elements using the <code>style<\/code> attribute is known as inline styles, but it is not the best way to style an HTML document.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Instead, you can use a <code>&lt;style&gt;<\/code> element to add CSS to the document.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;html lang=\"en\"&gt;\n    &lt;head&gt;\n        &lt;title&gt;My HTML document&lt;\/title&gt;\n        &lt;style&gt;\n            h1 {\n                color: red;\n            }\n            p {\n                font-size: 20px;\n            }\n        &lt;\/style&gt;\n    &lt;\/head&gt;\n    &lt;body class=\"main\"&gt;\n        &lt;h1&gt;This is the heading of my HTML document&lt;\/h1&gt;\n        &lt;img src=\"https:\/\/picsum.photos\/250\" alt=\"A randomly selected image\"&gt;\n        &lt;p&gt;This is the content of my HTML document.&lt;\/p&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s also possible to add CSS to a document using an external stylesheet. This is the preferred way to add CSS to a document.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;html lang=\"en\"&gt;\n    &lt;head&gt;\n        &lt;title&gt;My HTML document&lt;\/title&gt;\n        &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\n    &lt;\/head&gt;\n    &lt;body class=\"main\"&gt;\n        &lt;h1&gt;This is the heading of my HTML document&lt;\/h1&gt;\n        &lt;img src=\"https:\/\/picsum.photos\/250\" alt=\"A randomly selected image\"&gt;\n        &lt;p&gt;This is the content of my HTML document.&lt;\/p&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In the above example, the <code>style.css<\/code> file would contain the following CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">h1 {\n    color: red;\n}\np {\n    font-size: 20px;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In these examples, the CSS has been targeting specific elements. But it&#8217;s also possible to target elements based on their attributes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, you can target the <code>class<\/code> attribute of the body element, and add a border to it.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">.main {\n    border: 5px solid black; \n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">CSS can do a lot more than just change the color and font size of elements. It can be used to create complex layouts, animations, and more.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Like HTML, CSS is used all across a WordPress site. The dashboard has its own core set of CSS to control its look and feel.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Themes will ship with a custom set of CSS to style the theme elements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Plugins that add content to the front end of a site will also use CSS to style that content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress also allows you the flexibility to add your own custom CSS, or to use external CSS frameworks, such as Bootstrap or Tailwind.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Additional Resources<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For more information about CSS, you can visit the following online resources:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\">CSS on MDN<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/web.dev\/learn\/css\">CSS on Web.dev<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.freecodecamp.org\/learn\/2022\/responsive-web-design\/\">freeCodeCamp Responsive Web Design Course<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>A brief introduction to CSS, how CSS can be added to an HTML page, and how to apply CSS to elements.<\/p>\n","protected":false},"featured_media":257081,"template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_initial_content":"","_new_post":false,"_ef_editorial_meta_checkbox_code-shippet":"","_ef_editorial_meta_checkbox_gh-issue":"","_ef_editorial_meta_checkbox_tut-pass":"","_ef_editorial_meta_checkbox_callout-styling":"","_ef_editorial_meta_checkbox_brand":"","_ef_editorial_meta_checkbox_has-slides-in-browser":"","_ef_editorial_meta_checkbox_has-downloadable-slides":"","_ef_editorial_meta_checkbox_no-slides":"","_ef_editorial_meta_checkbox_included":"","_ef_editorial_meta_checkbox_image-alt-tags":"","expiration_date":"","language":"en_US","_duration":0,"presenter_wporg_username":[],"other_contributor_wporg_username":[],"video_url":"","_lesson_featured":"","_quiz_has_questions":false,"_lesson_complexity":"easy","_lesson_length":10,"_lesson_course":56187,"_lesson_preview":"preview"},"lesson-tag":[],"audience":[],"level":[6],"show":[],"wporg_wp_version":[],"wporg_included_content":[],"topic":[],"class_list":["post-83157","lesson","type-lesson","status-publish","has-post-thumbnail","hentry","module-the-programming-languages-of-wordpress","level-beginner","post"],"is_coteacher":false,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/lessons\/83157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/lessons"}],"about":[{"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/types\/lesson"}],"version-history":[{"count":9,"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/lessons\/83157\/revisions"}],"predecessor-version":[{"id":260698,"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/lessons\/83157\/revisions\/260698"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/media\/257081"}],"wp:attachment":[{"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/media?parent=83157"}],"wp:term":[{"taxonomy":"lesson-tag","embeddable":true,"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/lesson-tag?post=83157"},{"taxonomy":"audience","embeddable":true,"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/audience?post=83157"},{"taxonomy":"level","embeddable":true,"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/level?post=83157"},{"taxonomy":"show","embeddable":true,"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/show?post=83157"},{"taxonomy":"wporg_wp_version","embeddable":true,"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/wporg_wp_version?post=83157"},{"taxonomy":"wporg_included_content","embeddable":true,"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/wporg_included_content?post=83157"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/learn.wordpress.org\/wp-json\/wp\/v2\/topic?post=83157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}