{"id":10537,"date":"2015-01-08T05:08:59","date_gmt":"2015-01-07T18:08:59","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=10537"},"modified":"2015-01-08T05:08:59","modified_gmt":"2015-01-07T18:08:59","slug":"css-style-display-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/css-style-display-primer-tutorial\/","title":{"rendered":"CSS Style Display Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/styleequalsdisplay.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"CSS Style Display Primer Tutorial\"\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/styleequalsdisplay.jpg\" title=\"CSS Style Display Primer Tutorial\"\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">CSS Style Display 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\/styleequalsdisplay.html'>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>With today&#8217;s tutorial we concentrate on CSS within HTML and specifically the HTML object&#8217;s <a target=_blank title='style display property information from w3schools ... thanks' href='http:\/\/www.w3schools.com\/jsref\/prop_style_display.asp'>style.display property<\/a>, which has a huge number of choices, (and is heavily used by many web designers when building up web pages, I find, being a very close friend with Javascript and the DOM) and have a <a target=_blank title='Live Run' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/styleequalsdisplay.html'>live run<\/a> link for you to use with which to experiment.  The parent HTML element of our images of Nala the dog is a <i>div<\/i> element whose own style.display property is shown to you in the document window&#8217;s title.<\/p>\n<p>You can download source code and rename to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/styleequalsdisplay.html_GETME' title=\"styleequalsdisplay.html\">styleequalsdisplay.html<\/a><\/p>\n<p>Thanks to <a target=_blank title='CSS information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Cascading_Style_Sheets'>Wikipedia<\/a> for the quote above.<\/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='#d10537' onclick='var dv=document.getElementById(\"d10537\"); 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='d10537' 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\/css-style-display-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,341,354,576,652,997,1209,1319],"class_list":["post-10537","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-css","tag-display","tag-dom","tag-html","tag-javascript","tag-programming","tag-style","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/10537"}],"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=10537"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/10537\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=10537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=10537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=10537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}