{"id":806,"date":"2012-10-03T01:20:19","date_gmt":"2012-10-03T01:20:19","guid":{"rendered":"http:\/\/madprogrammer76.wordpress.com\/?p=806"},"modified":"2013-10-10T20:51:46","modified_gmt":"2013-10-10T20:51:46","slug":"last-is-king-back-to-basics-css","status":"publish","type":"post","link":"https:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/","title":{"rendered":"Last is King – Back To Basics CSS"},"content":{"rendered":"

CSS is the basics of HTML styling, but I am finding out that somehow it is missed. It’s hard to be a Web Designer without knowing how CSS style sheets work. For those who do not know, CSS is short for Cascading Style Sheets. If you can picture a waterfall, that is basically how CSS works.If you have a CSS file that contains your basics styles, you can then have another style sheet with the specific changes required for the individual page or set of pages.<\/p>\n

Here is a quick example.<\/p>\n

In global.css you may have the following<\/p>\n

a.link
\n{
\npadding-left: 7px;
\npadding-right: 7px;
\npadding-top: 2px;
\npadding-bottom: 2px;
\ncolor: #FF0000; \/* Red *\/
\n}<\/p><\/blockquote>\n

In detail.css you may have the following:<\/p>\n

a.link
\n{
\ncolor: #0000CC; \/* Blue *\/
\n}<\/p><\/blockquote>\n

If in your HTML file, if you include the CSS using the following<\/p>\n

<LINK href=”global.css” rel=”stylesheet” type=”text\/css”>
\n<LINK href=”detail.css” rel=”stylesheet” type=”text\/css”><\/p>\n

The link colour in the HTML page will be blue, even though you have defined in the global.css it as being red. \u00a0Essentially it is “Last is King”. \u00a0This means that what ever is first, will set the base, but the second CSS file will override the first. \u00a0If you reverse the two LINK tags above, the link will come out as being red, which may cause you to wonder why your style did not get picked up.<\/p>\n

If the above is not confusing enough, wrap your brain around this. \u00a0If you define the same style twice in the same style sheet, the second definition will override the first. \u00a0This means that if you define a style at the top as being blue and you forget that you have defined it and you make the same definition later in the same file as being red, the object carrying this style will come out as being red. \u00a0You may chase your tail for a while wondering why the style is red and not blue. If you turn on FireBug in the Chrome or FireFox browser, you will see the cascading style that you had created and which you defined as being first.<\/p>\n

What I like to do is create a style sheet that defines the basic style of the website ( template ). \u00a0I then implement a style sheet for sections of the website that needs the style to be overridden. As an example, on the contact page, you may want a two column display instead of a three column display. \u00a0You may want a bigger font on a page of quotes. \u00a0These are times you may want a second or third stylesheet that contains the changes from the template. \u00a0When you override the main template, only put the differences. \u00a0Do not copy the entire template and make the changes to match your desire. \u00a0 \u00a0This is especially hand if you have mini websites within one, where you may have specific vendor branding on each site, but the layouts to be the same.<\/p>\n

Do not style against the ID of the HTML tag. \u00a0If you style against the ID, you may be tempted to give the same ID to multiple elements which will give you grief should you implement JavaScript. \u00a0It is best to define classes and apply to the style to the classes. \u00a0By the way, \u00a0you can have more than one class to an element (<div class=”square_box large_red”><\/div><\/em>). \u00a0 Again, the order of the classes when using the multiple class technique does matter. \u00a0Everything cascades top to bottom. \u00a0Last is King!<\/p>\n","protected":false},"excerpt":{"rendered":"

CSS is the basics of HTML styling, but I am finding out that somehow it is missed. It’s hard to be a Web Designer without knowing how CSS style sheets work. For those who do not know, CSS is short for Cascading Style Sheets. If you can picture a waterfall, that is basically how CSS … Continue reading Last is King – Back To Basics CSS<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,24,96],"tags":[110,120,137],"yoast_head":"\r\nLast is King - Back To Basics CSS - LDNDeveloper<\/title>\r\n<meta name=\"description\" content=\"Last is King - Back to Basics with CSS by Andrew Pallant - a Software Developer in London Ontario\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Last is King - Back To Basics CSS - LDNDeveloper\" \/>\r\n<meta property=\"og:description\" content=\"Last is King - Back to Basics with CSS by Andrew Pallant - a Software Developer in London Ontario\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/\" \/>\r\n<meta property=\"og:site_name\" content=\"LDNDeveloper\" \/>\r\n<meta property=\"article:published_time\" content=\"2012-10-03T01:20:19+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2013-10-10T20:51:46+00:00\" \/>\r\n<meta name=\"author\" content=\"andrewpallant\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:creator\" content=\"@ldnDeveloper\" \/>\r\n<meta name=\"twitter:site\" content=\"@LdnDeveloper\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"andrewpallant\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/\"},\"author\":{\"name\":\"andrewpallant\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/0e7b5e71751000e8f66b17b69ef4ab97\"},\"headline\":\"Last is King – Back To Basics CSS\",\"datePublished\":\"2012-10-03T01:20:19+00:00\",\"dateModified\":\"2013-10-10T20:51:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/\"},\"wordCount\":607,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84\"},\"keywords\":[\"CSS\",\"HTML\",\"Web Design\"],\"articleSection\":[\"Better Coding\",\"Developer\",\"Web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/\",\"url\":\"https:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/\",\"name\":\"Last is King - Back To Basics CSS - LDNDeveloper\",\"isPartOf\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#website\"},\"datePublished\":\"2012-10-03T01:20:19+00:00\",\"dateModified\":\"2013-10-10T20:51:46+00:00\",\"description\":\"Last is King - Back to Basics with CSS by Andrew Pallant - a Software Developer in London Ontario\",\"breadcrumb\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/andrewpallant.ca\/wordpress\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Last is King – Back To Basics CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#website\",\"url\":\"https:\/\/andrewpallant.ca\/wordpress\/\",\"name\":\"LDNDeveloper\",\"description\":\"Learning, Growing and Sharing.\",\"publisher\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/andrewpallant.ca\/wordpress\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84\",\"name\":\"ldnDeveloper\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2017\/05\/cropped-AAEAAQAAAAAAAAXQAAAAJDQxMGRlMzFjLWM4ODctNDk1NC05M2EyLWE1NDNhNTRiZjVlYw-2.jpg\",\"contentUrl\":\"https:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2017\/05\/cropped-AAEAAQAAAAAAAAXQAAAAJDQxMGRlMzFjLWM4ODctNDk1NC05M2EyLWE1NDNhNTRiZjVlYw-2.jpg\",\"width\":512,\"height\":512,\"caption\":\"ldnDeveloper\"},\"logo\":{\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/image\/\"},\"description\":\"Andrew Pallant (@LdnDeveloper) has been a web, database and desktop developer for over 16 years. Andrew has worked on projects that ranged from factory automation to writing business applications. Most recently he has been heavily involved in various forms for ecommerce projects. Over the years Andrew has worn many hats: Project Manager, IT Manager, Lead Developer, Supervisor of Developers and many more - See more at: http:\/\/www.unlatched.com\/#sthash.8DiTkpKy.dpuf\",\"sameAs\":[\"http:\/\/www.andrewpallant.ca\",\"https:\/\/x.com\/LdnDeveloper\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/0e7b5e71751000e8f66b17b69ef4ab97\",\"name\":\"andrewpallant\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"caption\":\"andrewpallant\"},\"url\":\"https:\/\/andrewpallant.ca\/wordpress\/author\/andrewpallant\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Last is King - Back To Basics CSS - LDNDeveloper","description":"Last is King - Back to Basics with CSS by Andrew Pallant - a Software Developer in London Ontario","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:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/","og_locale":"en_US","og_type":"article","og_title":"Last is King - Back To Basics CSS - LDNDeveloper","og_description":"Last is King - Back to Basics with CSS by Andrew Pallant - a Software Developer in London Ontario","og_url":"https:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/","og_site_name":"LDNDeveloper","article_published_time":"2012-10-03T01:20:19+00:00","article_modified_time":"2013-10-10T20:51:46+00:00","author":"andrewpallant","twitter_card":"summary_large_image","twitter_creator":"@ldnDeveloper","twitter_site":"@LdnDeveloper","twitter_misc":{"Written by":"andrewpallant","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/#article","isPartOf":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/"},"author":{"name":"andrewpallant","@id":"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/0e7b5e71751000e8f66b17b69ef4ab97"},"headline":"Last is King – Back To Basics CSS","datePublished":"2012-10-03T01:20:19+00:00","dateModified":"2013-10-10T20:51:46+00:00","mainEntityOfPage":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/"},"wordCount":607,"commentCount":0,"publisher":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84"},"keywords":["CSS","HTML","Web Design"],"articleSection":["Better Coding","Developer","Web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/","url":"https:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/","name":"Last is King - Back To Basics CSS - LDNDeveloper","isPartOf":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/#website"},"datePublished":"2012-10-03T01:20:19+00:00","dateModified":"2013-10-10T20:51:46+00:00","description":"Last is King - Back to Basics with CSS by Andrew Pallant - a Software Developer in London Ontario","breadcrumb":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/andrewpallant.ca\/wordpress\/last-is-king-back-to-basics-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/andrewpallant.ca\/wordpress\/"},{"@type":"ListItem","position":2,"name":"Last is King – Back To Basics CSS"}]},{"@type":"WebSite","@id":"https:\/\/andrewpallant.ca\/wordpress\/#website","url":"https:\/\/andrewpallant.ca\/wordpress\/","name":"LDNDeveloper","description":"Learning, Growing and Sharing.","publisher":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/andrewpallant.ca\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/f6f5bb1ac3e0c5a54a8b5ce35fd67b84","name":"ldnDeveloper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/image\/","url":"https:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2017\/05\/cropped-AAEAAQAAAAAAAAXQAAAAJDQxMGRlMzFjLWM4ODctNDk1NC05M2EyLWE1NDNhNTRiZjVlYw-2.jpg","contentUrl":"https:\/\/andrewpallant.ca\/wordpress\/wp-content\/uploads\/2017\/05\/cropped-AAEAAQAAAAAAAAXQAAAAJDQxMGRlMzFjLWM4ODctNDk1NC05M2EyLWE1NDNhNTRiZjVlYw-2.jpg","width":512,"height":512,"caption":"ldnDeveloper"},"logo":{"@id":"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/image\/"},"description":"Andrew Pallant (@LdnDeveloper) has been a web, database and desktop developer for over 16 years. Andrew has worked on projects that ranged from factory automation to writing business applications. Most recently he has been heavily involved in various forms for ecommerce projects. Over the years Andrew has worn many hats: Project Manager, IT Manager, Lead Developer, Supervisor of Developers and many more - See more at: http:\/\/www.unlatched.com\/#sthash.8DiTkpKy.dpuf","sameAs":["http:\/\/www.andrewpallant.ca","https:\/\/x.com\/LdnDeveloper"]},{"@type":"Person","@id":"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/0e7b5e71751000e8f66b17b69ef4ab97","name":"andrewpallant","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/andrewpallant.ca\/wordpress\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","caption":"andrewpallant"},"url":"https:\/\/andrewpallant.ca\/wordpress\/author\/andrewpallant\/"}]}},"_links":{"self":[{"href":"https:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/posts\/806"}],"collection":[{"href":"https:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/comments?post=806"}],"version-history":[{"count":1,"href":"https:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/posts\/806\/revisions"}],"predecessor-version":[{"id":1045,"href":"https:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/posts\/806\/revisions\/1045"}],"wp:attachment":[{"href":"https:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/media?parent=806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/categories?post=806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/andrewpallant.ca\/wordpress\/wp-json\/wp\/v2\/tags?post=806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}