{"id":39,"date":"2017-01-19T06:53:28","date_gmt":"2017-01-19T06:53:28","guid":{"rendered":"http:\/\/learnlearn.uk\/html\/?page_id=39"},"modified":"2017-01-26T11:43:56","modified_gmt":"2017-01-26T11:43:56","slug":"inline-style-sheets-lesson-plan","status":"publish","type":"page","link":"https:\/\/learnlearn.uk\/html\/inline-style-sheets-lesson-plan\/","title":{"rendered":"Inline style sheets lesson plan"},"content":{"rendered":"\n<div class=\"arconix-tabs-horizontal\"><ul class=\"arconix-tabs\"><li data-arconix-icon=\" \" data-arconix-color=\" \" class=\"arconix-tab tab-Starter\"><a class=\"\" href=\"#tab-Starter\">Starter<\/a><\/li>\n<li data-arconix-icon=\" \" data-arconix-color=\" \" class=\"arconix-tab tab-Introduction\"><a class=\"\" href=\"#tab-Introduction\">Introduction<\/a><\/li>\n<li data-arconix-icon=\" \" data-arconix-color=\" \" class=\"arconix-tab tab-Text\"><a class=\"\" href=\"#tab-Text\">Text<\/a><\/li>\n<li data-arconix-icon=\" \" data-arconix-color=\" \" class=\"arconix-tab tab-Images\"><a class=\"\" href=\"#tab-Images\">Images<\/a><\/li>\n<li data-arconix-icon=\" \" data-arconix-color=\" \" class=\"arconix-tab tab-Layout\"><a class=\"\" href=\"#tab-Layout\">Layout<\/a><\/li>\n<li data-arconix-icon=\" \" data-arconix-color=\" \" class=\"arconix-tab tab-Activity\"><a class=\"\" href=\"#tab-Activity\">Activity<\/a><\/li>\n<li data-arconix-icon=\" \" data-arconix-color=\" \" class=\"arconix-tab tab-Resources\"><a class=\"\" href=\"#tab-Resources\">Resources<\/a><\/li><\/ul>\n<div class=\"arconix-panes\"><div class=\"arconix-pane pane-Starter\">\n<h3>Starter &#8211; spot the difference<\/h3>\n<p>Have a look at these two pages. Both have exactly the same HTML content, but they look completely different. How many differences can you spot?<\/p>\n<div class=\"arconix-accordions arconix-accordions-vertical arconix-accordions-1\"><div class=\"arconix-accordion-title accordion-Original\"><i class=\"fa\"><\/i><p>Original<\/p><\/div><div class=\"arconix-accordion-content\">\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-51\" src=\"https:\/\/learnlearn.uk\/html\/wp-content\/uploads\/sites\/13\/2017\/01\/no-css.png\" alt=\"no css\" width=\"763\" height=\"480\" srcset=\"https:\/\/learnlearn.uk\/html\/wp-content\/uploads\/sites\/13\/2017\/01\/no-css.png 763w, https:\/\/learnlearn.uk\/html\/wp-content\/uploads\/sites\/13\/2017\/01\/no-css-300x189.png 300w, https:\/\/learnlearn.uk\/html\/wp-content\/uploads\/sites\/13\/2017\/01\/no-css-600x377.png 600w\" sizes=\"(max-width: 763px) 100vw, 763px\" \/><\/p>\n<\/div><div class=\"arconix-accordion-title accordion-WithCSS\"><i class=\"fa\"><\/i><p>With CSS<\/p><\/div><div class=\"arconix-accordion-content\">\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-52\" src=\"https:\/\/learnlearn.uk\/html\/wp-content\/uploads\/sites\/13\/2017\/01\/with-css.png\" alt=\"with css\" width=\"769\" height=\"487\" srcset=\"https:\/\/learnlearn.uk\/html\/wp-content\/uploads\/sites\/13\/2017\/01\/with-css.png 769w, https:\/\/learnlearn.uk\/html\/wp-content\/uploads\/sites\/13\/2017\/01\/with-css-300x190.png 300w, https:\/\/learnlearn.uk\/html\/wp-content\/uploads\/sites\/13\/2017\/01\/with-css-768x486.png 768w, https:\/\/learnlearn.uk\/html\/wp-content\/uploads\/sites\/13\/2017\/01\/with-css-600x380.png 600w\" sizes=\"(max-width: 769px) 100vw, 769px\" \/><\/p>\n<\/div><\/div>\n<\/div>\n<div class=\"arconix-pane pane-Introduction\">\n<h3>Introduction<\/h3>\n<p><strong>All about inline CSS<\/strong><\/p>\n<p>Inline CSS Styles are used to change the appearance of one particular element on a page,<br \/>\nsuch as a picture, a heading or some text.<\/p>\n<p>They can be used to make simple changes, such as just changing the color of things, or<br \/>\nthey can be used to do far more complicated things like animations and special text effects.<\/p>\n<p><strong>Adding a style<\/strong><\/p>\n<h3>style = &#8216;<span style=\"color: #0000ff;\">name<\/span>:<span style=\"color: #993366;\">value&#8217;<\/span><\/h3>\n<p>To add a style you need to used add a style attribute inside the html tag itself. Each style declaration consists of a property and a \u00a0value.<\/p>\n<p><strong>Example<\/strong><\/p>\n<h4>&lt;h1 style = &#8216;<span style=\"color: #0000ff;\">color<\/span>:<span style=\"color: #800080;\">blue&#8217;<\/span>\u00a0&gt;<\/h4>\n<p>&nbsp;<\/p>\n<h2><strong>Adding multiple styles<\/strong><\/h2>\n<h4>style = &#8216;<span style=\"color: #0000ff;\">name<\/span>:<span style=\"color: #800080;\">value<\/span>;<span style=\"color: #0000ff;\">name<\/span>:<span style=\"color: #800080;\">value&#8217;<\/span><\/h4>\n<p>You can apply multiple styles to a tag by seperating them by a comma.<\/p>\n<p><strong>Example<\/strong>:<\/p>\n<h4>&lt;p style = &#8216;<span style=\"color: #0000ff;\">text-align<\/span>:<span style=\"color: #800080;\">center<\/span>;<span style=\"color: #0000ff;\">font-size<\/span>:<span style=\"color: #800080;\">15px&#8217;<\/span>&gt;<\/h4>\n<\/div>\n<div class=\"arconix-pane pane-Text\">\n<h3>Text styles<\/h3>\n<p><strong><span style=\"color: #0000ff;\">font-size<\/span>:<span style=\"color: #800080;\">12px<\/span><\/strong><\/p>\n<p>Used to adjust the size of the fon<\/p>\n<p><strong><span style=\"color: #0000ff;\">font-family<\/span>:<span style=\"color: #800080;\">verdana<\/span><\/strong><\/p>\n<p>Used to change the font to a different font<\/p>\n<p><strong><span style=\"color: #0000ff;\">color<\/span>:<span style=\"color: #800080;\">blue<\/span><\/strong><\/p>\n<p>Used to change the font color.<\/p>\n<p><span style=\"color: #0000ff;\"><strong>text-decoration<\/strong><\/span>:<span style=\"color: #800080;\">underline<\/span><\/p>\n<\/div>\n<div class=\"arconix-pane pane-Images\">\n<h3>Image Styles<\/h3>\n<p><span style=\"color: #0000ff;\"><strong>text-align<\/strong><\/span>:<span style=\"color: #800080;\"><strong>right<\/strong><\/span><\/p>\n<p>Aligns the image to the left, center or right of the page.<\/p>\n<\/div>\n<div class=\"arconix-pane pane-Layout\">\n<p><span style=\"color: #0000ff;\"><strong>text-align<\/strong><\/span>:<span style=\"color: #800080;\"><strong>right<\/strong><\/span><\/p>\n<p>Alighns text, images or other objects.<\/p>\n<p><strong><span style=\"color: #0000ff;\">margin-left<\/span>:<span style=\"color: #993366;\"> 10px<\/span><\/strong><\/p>\n<p>Sets the external padding of a document<\/p>\n<p><strong><span style=\"color: #0000ff;\">margin<\/span>: <span style=\"color: #800080;\">0p<\/span>x<\/strong><\/p>\n<p>Sets all of the margins for an object<\/p>\n<p><strong><span style=\"color: #800080;\"><span style=\"color: #0000ff;\">padding<\/span>:10px<\/span><\/strong><\/p>\n<p>Sets the internal padding of an object.<\/p>\n<\/div>\n<div class=\"arconix-pane pane-Activity\">\n<h3>Activity<\/h3>\n<p>Download the html file below and make the amendment on the worksheet<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<\/div>\n<div class=\"arconix-pane pane-Resources\">\n<h3>Resources<\/h3>\n<p><a href=\"https:\/\/docs.google.com\/document\/d\/130jWl0kYfuyNEpWUzO6IbwqVXhvYsTCCcgDC7WC-m5E\/edit?usp=sharing\">Printable Worksheet for starter<\/a><\/p>\n<p><a href=\"https:\/\/docs.google.com\/document\/d\/1Tdo3MUsRTV2cRkpv7dhO5HGPz9gHVH_u5dAh7hfwA74\/edit?usp=sharing\">CSS Styles Cheat Sheet<\/a><\/p>\n<p>A cheat sheet of all the basic style options.<\/p>\n<p><a href=\"https:\/\/play.kahoot.it\/#\/k\/a6cb16cc-5ed5-4a9f-baab-893a356e552a\">Style Sheets Review Kahoot<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<\/div><\/div><\/div>\n\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Inline style sheets lesson plan - HTML &amp; CSS<\/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:\/\/learnlearn.uk\/html\/inline-style-sheets-lesson-plan\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Inline style sheets lesson plan - HTML &amp; CSS\" \/>\n<meta property=\"og:description\" content=\"&nbsp;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/learnlearn.uk\/html\/inline-style-sheets-lesson-plan\/\" \/>\n<meta property=\"og:site_name\" content=\"HTML &amp; CSS\" \/>\n<meta property=\"article:modified_time\" content=\"2017-01-26T11:43:56+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/learnlearn.uk\/html\/wp-content\/uploads\/sites\/13\/2017\/01\/no-css.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/learnlearn.uk\/html\/inline-style-sheets-lesson-plan\/\",\"url\":\"https:\/\/learnlearn.uk\/html\/inline-style-sheets-lesson-plan\/\",\"name\":\"Inline style sheets lesson plan - HTML &amp; CSS\",\"isPartOf\":{\"@id\":\"https:\/\/learnlearn.uk\/html\/#website\"},\"datePublished\":\"2017-01-19T06:53:28+00:00\",\"dateModified\":\"2017-01-26T11:43:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/learnlearn.uk\/html\/inline-style-sheets-lesson-plan\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/learnlearn.uk\/html\/inline-style-sheets-lesson-plan\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/learnlearn.uk\/html\/inline-style-sheets-lesson-plan\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/learnlearn.uk\/html\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Inline style sheets lesson plan\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/learnlearn.uk\/html\/#website\",\"url\":\"https:\/\/learnlearn.uk\/html\/\",\"name\":\"HTML &amp; CSS\",\"description\":\"Just another My Blog site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/learnlearn.uk\/html\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Inline style sheets lesson plan - HTML &amp; CSS","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:\/\/learnlearn.uk\/html\/inline-style-sheets-lesson-plan\/","og_locale":"en_GB","og_type":"article","og_title":"Inline style sheets lesson plan - HTML &amp; CSS","og_description":"&nbsp;","og_url":"https:\/\/learnlearn.uk\/html\/inline-style-sheets-lesson-plan\/","og_site_name":"HTML &amp; CSS","article_modified_time":"2017-01-26T11:43:56+00:00","og_image":[{"url":"http:\/\/learnlearn.uk\/html\/wp-content\/uploads\/sites\/13\/2017\/01\/no-css.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/learnlearn.uk\/html\/inline-style-sheets-lesson-plan\/","url":"https:\/\/learnlearn.uk\/html\/inline-style-sheets-lesson-plan\/","name":"Inline style sheets lesson plan - HTML &amp; CSS","isPartOf":{"@id":"https:\/\/learnlearn.uk\/html\/#website"},"datePublished":"2017-01-19T06:53:28+00:00","dateModified":"2017-01-26T11:43:56+00:00","breadcrumb":{"@id":"https:\/\/learnlearn.uk\/html\/inline-style-sheets-lesson-plan\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/learnlearn.uk\/html\/inline-style-sheets-lesson-plan\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/learnlearn.uk\/html\/inline-style-sheets-lesson-plan\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/learnlearn.uk\/html\/"},{"@type":"ListItem","position":2,"name":"Inline style sheets lesson plan"}]},{"@type":"WebSite","@id":"https:\/\/learnlearn.uk\/html\/#website","url":"https:\/\/learnlearn.uk\/html\/","name":"HTML &amp; CSS","description":"Just another My Blog site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/learnlearn.uk\/html\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"}]}},"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"learnlearnadmin","author_link":"https:\/\/learnlearn.uk\/html\/author\/learnlearnadmin\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"&nbsp;","_links":{"self":[{"href":"https:\/\/learnlearn.uk\/html\/wp-json\/wp\/v2\/pages\/39"}],"collection":[{"href":"https:\/\/learnlearn.uk\/html\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/learnlearn.uk\/html\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/learnlearn.uk\/html\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learnlearn.uk\/html\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":0,"href":"https:\/\/learnlearn.uk\/html\/wp-json\/wp\/v2\/pages\/39\/revisions"}],"wp:attachment":[{"href":"https:\/\/learnlearn.uk\/html\/wp-json\/wp\/v2\/media?parent=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}