{"id":736,"date":"2013-03-28T11:33:59","date_gmt":"2013-03-28T00:33:59","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=736"},"modified":"2013-03-28T11:33:59","modified_gmt":"2013-03-28T00:33:59","slug":"cascading-style-sheets-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/cascading-style-sheets-primer-tutorial\/","title":{"rendered":"Cascading Style Sheets Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_primer_tutorial.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Cascading Style Sheets Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_primer_tutorial.jpg\" title=\"Cascading Style Sheets Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Cascading Style Sheets Primer Tutorial<\/p><\/div>\n<blockquote><p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.<\/p><\/blockquote>\n<p><a target=_blank title='click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/css_primer_tutorial.jpg\/'>Tutorial<\/a> &#8230;<\/p>\n<p>Cascading Style Sheet methodology is a good technique in order to separate document content from document presentation.  For the same content, two different CSS approaches can produce vastly different browser outputs.<\/p>\n<p>This tutorial does not attempt to show examples of all the possible syntax &#8230; please refer to  <a target=_blan target='CSS Reference' href='http:\/\/www.w3schools.com\/cssref\/default.asp'>CSS Reference<\/a> for that, but touches on the hierarchical approach with respect to the use of web page HTML element id and class.<\/p>\n<p>Please be aware that there are several other approaches to meet the same ends, such as the use of style= on individual HTML elements and the use of <a target=_blank title='JavaScript and the DOM' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=574'>JavaScript and the DOM<\/a>.\n<\/p>\n<p>\nLink to CSS more information &#8230; <a target=_blank href='http:\/\/en.wikipedia.org\/wiki\/Cascading_Style_Sheets' title='Link to CSS more information'>via Wikipedia, from where quote above came<\/a>.<br \/>\nLink to CSS &#8220;spiritual home&#8221; &#8230; <a target=_blank href='http:\/\/www.w3schools.com\/css\/' title='Link to CSS W3Schools'>via W3Schools<\/a>.<br \/>\nLink to CSS and HTML jobs done &#8230; <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/' title='Examples of use of CSS and HTML'>CSS and HTML jobs done<\/a> &#8230; some of personal experience.\n<\/p>\n<p><a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/plain.html_GETME'>Download source code and rename to plain.html<\/a><br \/>\n<a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/plain.css_GETME'>Download source code and rename to plain.css<\/a><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d736' onclick='var dv=document.getElementById(\"d736\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?s=CSS\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d736' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/cascading-style-sheets-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[281,576,1319],"class_list":["post-736","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-css","tag-html","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/736"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=736"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/736\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}