{"id":238,"date":"2014-09-17T22:58:31","date_gmt":"2014-09-17T22:58:31","guid":{"rendered":"http:\/\/art556.com\/?page_id=238"},"modified":"2014-09-17T22:58:31","modified_gmt":"2014-09-17T22:58:31","slug":"structure","status":"publish","type":"page","link":"http:\/\/m.pebblerd.com\/interactivemedia\/topics\/unit-2-multiple-page-sites\/structure\/","title":{"rendered":"More CSS"},"content":{"rendered":"<h2 class=\"p1\">id and class<\/h2>\n<h4 class=\"p1\"><strong>class:\u00a0<\/strong><\/h4>\n<ul>\n<li class=\"p1\">The class attribute can be used many times on a page.<\/li>\n<li class=\"p1\">In the css, it is preceeded by a period.<\/li>\n<li class=\"p1\">In html, it is listed as class=&#8221; &#8220;.<strong>\u00a0 \u00a0<\/strong><strong style=\"font-size: 1rem;\">\u00a0<\/strong><\/li>\n<\/ul>\n<p class=\"p1\">.box {<br \/>\n}<\/p>\n<p class=\"p1\">&lt;div class=&#8221;box&#8221;&gt; \u00a0 \u00a0&lt;\/div&gt;<\/p>\n<h4>id:<\/h4>\n<ul>\n<li class=\"p1\">The id attribute gives an html element a unique id. This can be used when creating a long page with links. It is used only once on a page.<\/li>\n<li class=\"p1\">In the css, it is preceeded by a period.<\/li>\n<li class=\"p1\">In html, it is listed as id=&#8221; &#8220;.<strong>\u00a0<\/strong><\/li>\n<\/ul>\n<p class=\"p1\"><strong><br \/>\n<\/strong>#santee {<br \/>\n}<\/p>\n<p class=\"p1\">&lt;div id=&#8221;santee&#8221;&gt; \u00a0 \u00a0&lt;\/div&gt;<\/p>\n<h2 class=\"p1\"><b>Define your\u00a0HTML5 structural elements with css<\/b><\/h2>\n<p class=\"p5\">You can define your html structural elements. But you would generally not apply font characteristics here. Stick to p, h1, h2 etc to format your fonts.<\/p>\n<p class=\"p3\">footer {<br \/>\nbackground: #333;<br \/>\npadding: 21px 0 3px 21px;<br \/>\nborder-radius: 21px;<br \/>\nopacity: .7;<br \/>\nmargin: 0 150px 50px 50px;<br \/>\n}<b>\u00a0<\/b><\/p>\n<p class=\"p1\"><strong>html5\u00a0<\/strong><\/p>\n<ul>\n<li class=\"p1\">In the css, it is preceeded by a nothing: no period or hashtag.<\/li>\n<li class=\"p1\">In html, it wraps content with opening and closing brackets.<strong>\u00a0<\/strong><\/li>\n<\/ul>\n<p class=\"p1\">header {<br \/>\n}<\/p>\n<p class=\"p1\">&lt;header&gt; \u00a0 \u00a0&lt;\/header&gt;<\/p>\n<h2 class=\"p1\"><b>Display property<\/b><\/h2>\n<h2 class=\"p1\"><b>CSS Resets<\/b><\/h2>\n<ul>\n<li>CSS resets remove a browsers default styling.<\/li>\n<li>Place near the top of your css stylesheet.<\/li>\n<\/ul>\n<p class=\"p3\" style=\"padding-left: 30px;\">html, body, div, h1, h3, p, ul, li\u00a0 {<br \/>\nmargin: 0;<br \/>\npadding:0;<br \/>\n}<\/p>\n<h2 class=\"p1\"><b>CSS box model<\/b><\/h2>\n<p class=\"p7\"><a href=\"http:\/\/art556.com\/wp-content\/uploads\/2014\/09\/box-model.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-349\" src=\"http:\/\/art556.com\/wp-content\/uploads\/2014\/09\/box-model-300x161.gif\" alt=\"box-model\" width=\"300\" height=\"161\" \/><\/a><\/p>\n<ul>\n<li><b>Content<\/b>\u00a0&#8211; The content of the box, where text and images appear<\/li>\n<li><b>Padding<\/b>\u00a0&#8211; Clears an area around the content. The padding is transparent<\/li>\n<li><b>Border<\/b>\u00a0&#8211; A border that goes around the padding and content<\/li>\n<li><b>Margin<\/b>\u00a0&#8211; Clears an area outside the border. The margin is transparent<\/li>\n<\/ul>\n<p>for more information, go to\u00a0<a href=\"http:\/\/www.w3schools.com\/css\/css_boxmodel.asp\">w3schools box model<\/a>.<\/p>\n<h3 class=\"p1\"><b>measurement of padding and margin:<\/b><\/h3>\n<p class=\"p6\"><b>TRrouBLe: top, right, bottom, left<\/b><\/p>\n<p class=\"p5\">padding: 20px 30px 40px 50px;<br \/>\ngives 20px to the top, 30px right, 40px bottom, 50px left.<\/p>\n<p class=\"p5\">margin: 20px 40px ;<br \/>\ngives 20px top and bottom,\u00a0 40px right and left.<\/p>\n<p class=\"p5\">margin: 0 auto;<\/p>\n<p class=\"p5\">This will give 0 top and bottom; auto will take what ever is left right and left and divide it equally, so that the content is centered.<\/p>\n<p class=\"p5\">padding: 40px;<br \/>\ngives 40px on all sides.<\/p>\n<p>&nbsp;<\/p>\n<h2>exercise :<\/h2>\n<p>Using your final, color design in InDesign file, create a home page in Dreamweaver. You may find it easier to sketch your plan out on paper. Include the following:<\/p>\n<ul>\n<li>all fonts and font settings that you use in your font study : p, h1, h2, h3, etc.<\/li>\n<li>html structural elements<\/li>\n<li>colors from color study<\/li>\n<li>grid<\/li>\n<li>Here is an example of code and design:\u00a0<a href=\"http:\/\/art556.com\/unit2\/design.html\">design.html<\/a><\/li>\n<\/ul>\n<h2 class=\"p1\"><b>Recommended Tutorials:<\/b><\/h2>\n<p class=\"p5\">Lynda.com <span class=\"s3\"><b>CSS Page Layouts:<\/b><\/span><\/p>\n<p class=\"p5\"><strong>Chapter\u00a0 1:<\/strong><br \/>\nCSS resets (8 min)<br \/>\nFixed, fluid and responsive layouts (10 min)<\/p>\n<p class=\"p5\"><strong>Chapter\u00a0 2:<\/strong> Design Considerations:<br \/>\nDetermining page structure (7 min)<br \/>\nAdding meaning with classes and IDs (5 min)<br \/>\nStructuring content with HTML5 (7min)<br \/>\nBuilding internal structure (11 min)<\/p>\n<p class=\"p5\"><b>Chapter\u00a0 3:<br \/>\n<\/b>Working with floats (1 h 36 min)<\/p>\n<h2 class=\"p2\">Quick explanations by w3schools:<\/h2>\n<p class=\"p2\"><a href=\"http:\/\/www.w3schools.com\/css\/css_float.asp\">float<br \/>\n<\/a>\u00a0<a href=\"http:\/\/www.w3schools.com\/css\/css_boxmodel.asp\"><br \/>\n<\/a><a href=\"http:\/\/www.w3schools.com\/css\/css_image_gallery.asp\">simple gallery<\/a><a href=\"http:\/\/www.w3schools.com\/css\/css_link.asp\"><br \/>\n<\/a><a href=\"http:\/\/www.w3schools.com\/css\/css_border.asp\">borders<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>id and class class:\u00a0 The class attribute can be used many times on a page. In the css, it is preceeded by a period. In html, it is listed as class=&#8221; &#8220;.\u00a0 \u00a0\u00a0 .box { } &lt;div class=&#8221;box&#8221;&gt; \u00a0 \u00a0&lt;\/div&gt; id: The id attribute gives an html element a unique id. This can be used [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":25,"menu_order":80,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-238","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/comments?post=238"}],"version-history":[{"count":0,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/238\/revisions"}],"up":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/25"}],"wp:attachment":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/media?parent=238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}