{"id":1077,"date":"2009-07-13T14:38:52","date_gmt":"2009-07-13T19:38:52","guid":{"rendered":"http:\/\/ceffyl.net\/wordpress\/?p=1077"},"modified":"2011-06-08T10:00:36","modified_gmt":"2011-06-08T15:00:36","slug":"css-resources","status":"publish","type":"post","link":"https:\/\/ceffyl.net\/wordpress\/tech\/css-resources\/","title":{"rendered":"CSS Resources"},"content":{"rendered":"<p>A friend of mine asked for tutorials and resources for CSS, so I complied the following list of sites. The <a href=\"http:\/\/www.w3.org\/TR\/CSS2\/\">cascading style sheet (CSS) spec<\/a> (current version is 2.1) is published and maintained by the World Wide Web Consorium (W3C). The W3C also has a <a href=\"http:\/\/www.w3.org\/Style\/Examples\/011\/firstcss\">tutorial on CSS<\/a>. <\/p>\n<p><a href=\"http:\/\/w3schools.com\">W3Schools is a good site<\/a> with excellent tutorials for HTML, CSS, XHTML, among others. I learned HTML\/CSS there &#8212; and then had to unlearn some things when I encountered problems in IE versus other browsers that more closely implement the W3C specs. <\/p>\n<p>An easy way to play with CSS is to start with standards-compliant templates that work in a wide range of browsers. <\/p>\n<ul>\n<li> <a href=\"http:\/\/www.ssi-developer.net\/main\/templates\/\">Two column templates<\/a><\/li>\n<li><a href=\"http:\/\/matthewjamestaylor.com\/blog\/perfect-3-column.htm\">Three column &#8220;holy grail&#8221; template<\/a><\/li>\n<li> <a href=\"http:\/\/css.flepstudio.org\/en\/\">Examples and templates<\/a>, plus some good info on the box-model hack (thanks IE)<\/li>\n<li> <a href=\"http:\/\/www.thenoodleincident.com\/tutorials\/box_lesson\/boxes.html\">Box Lesson<\/a> for easy to use templates<\/li>\n<li> <a href=\"http:\/\/www.bluerobot.com\/web\/layouts\/\">Layout Reservoir<\/a> from Blue Robot\n<\/li>\n<\/ul>\n<p>Get a good CSS editor like TopStyle from Bradsoft (http:\/\/topstyle4.com) that has a list of selectors as drop-down boxes &#8212; that way you don&#8217;t have to memorize things. There used to be a freeware version, TopStyle Lite, that provides a good starting point. <\/p>\n<p>Western Civ, creators of Style Master CSS editor, has an <a href=\"http:\/\/www.westciv.com\/style_master\/academy\/css_tutorial\/\">excellent tutorial for CSS<\/a>.<\/p>\n<p><a href=\"http:\/\/www.alistapart.com\/)\">A List Apart<\/a> is probably the best place to find information on best design practices and how to work around common problems. Cutting edge stuff by some of the best in the industry.  <\/p>\n<p><a href=\"http:\/\/meyerweb.com\/eric\/css\/\">Eric Meyer&#8217;s home page<\/a> has a great set of links for CSS references and related items.<\/p>\n<p>Want to see what CSS can really do? Take a look at <a href=\"http:\/\/csszengarden.com\">CSS Zengarden and <\/a><a href=\"http:\/\/cssvault.com\/\">CSS Vault<\/a>. Some excellent examples of how CSS can completely change the appearance of a page by swapping the CSS without touching the page&#8217;s code. <\/p>\n<p><a href=\"http:\/\/www.glish.com\/css\/\">CSS Layout for Fun and Profit<\/a> (glish.com) also has great articles and information. <\/p>\n<p>Once you have a CSS sheet created, it should be validated against the spec (this is also a great troubleshooting tool) by using the <a href=\"http:\/\/jigsaw.w3.org\/css-validator\/\">W3C CSS Validator<\/a>.<\/p>\n<p>If you really can&#8217;t find something, chances are that &#8220;<a href=\"http:\/\/www.dezwozhere.com\/links.html\">Holy CSS, Zeldman<\/a>!&#8221; has a link to it.<\/p>\n<p>That should get you started&#8230; \ud83d\ude42 Let me know if you choose to tackle inline CSS menus. That&#8217;s a whole separate post&#8230;<\/p>\n<h3>Related Images:<\/h3>","protected":false},"excerpt":{"rendered":"<p>A friend of mine asked for tutorials and resources for CSS, so I complied the following list of sites. The cascading style sheet (CSS) spec (current version is 2.1) is published and maintained by the World Wide Web Consorium (W3C). The W3C also has a tutorial on CSS. W3Schools is a good site with excellent&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"yes","ngg_post_thumbnail":0,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[9],"tags":[1127],"class_list":["post-1077","post","type-post","status-publish","format-standard","hentry","category-tech","tag-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Resources &#8212; Y Ceffyl Du<\/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:\/\/ceffyl.net\/wordpress\/tech\/css-resources\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Resources &#8212; Y Ceffyl Du\" \/>\n<meta property=\"og:description\" content=\"A friend of mine asked for tutorials and resources for CSS, so I complied the following list of sites. The cascading style sheet (CSS) spec (current version is 2.1) is published and maintained by the World Wide Web Consorium (W3C). The W3C also has a tutorial on CSS. W3Schools is a good site with excellent...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ceffyl.net\/wordpress\/tech\/css-resources\/\" \/>\n<meta property=\"og:site_name\" content=\"Y Ceffyl Du\" \/>\n<meta property=\"article:published_time\" content=\"2009-07-13T19:38:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2011-06-08T15:00:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ceffyl.net\/wordpress\/wp-content\/uploads\/2021\/07\/P_20210703_145444-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"781\" \/>\n\t<meta property=\"og:image:height\" content=\"589\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kim (Ceffyl)\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ceffyl1\" \/>\n<meta name=\"twitter:site\" content=\"@ceffyl1\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kim (Ceffyl)\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/tech\\\/css-resources\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/tech\\\/css-resources\\\/\"},\"author\":{\"name\":\"Kim (Ceffyl)\",\"@id\":\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/#\\\/schema\\\/person\\\/7838a28d7c8c05ce1081d66937729647\"},\"headline\":\"CSS Resources\",\"datePublished\":\"2009-07-13T19:38:52+00:00\",\"dateModified\":\"2011-06-08T15:00:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/tech\\\/css-resources\\\/\"},\"wordCount\":383,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/#\\\/schema\\\/person\\\/7838a28d7c8c05ce1081d66937729647\"},\"keywords\":[\"Web\"],\"articleSection\":[\"Tech\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/tech\\\/css-resources\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/tech\\\/css-resources\\\/\",\"url\":\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/tech\\\/css-resources\\\/\",\"name\":\"CSS Resources &#8212; Y Ceffyl Du\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/#website\"},\"datePublished\":\"2009-07-13T19:38:52+00:00\",\"dateModified\":\"2011-06-08T15:00:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/tech\\\/css-resources\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/tech\\\/css-resources\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/tech\\\/css-resources\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Resources\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/#website\",\"url\":\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/\",\"name\":\"Y Ceffyl Du\",\"description\":\"Tales of a Mischievious Horse\",\"publisher\":{\"@id\":\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/#\\\/schema\\\/person\\\/7838a28d7c8c05ce1081d66937729647\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/#\\\/schema\\\/person\\\/7838a28d7c8c05ce1081d66937729647\",\"name\":\"Kim (Ceffyl)\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/breezy-headshot.jpeg\",\"url\":\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/breezy-headshot.jpeg\",\"contentUrl\":\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/breezy-headshot.jpeg\",\"width\":853,\"height\":929,\"caption\":\"Kim (Ceffyl)\"},\"logo\":{\"@id\":\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/breezy-headshot.jpeg\"},\"description\":\"Writing rider.\",\"sameAs\":[\"https:\\\/\\\/ceffyl.net\",\"https:\\\/\\\/www.instagram.com\\\/ceffyl1\\\/\",\"https:\\\/\\\/x.com\\\/ceffyl1\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UC4PBAqGmCJipReebm56Xf5w\"],\"url\":\"https:\\\/\\\/ceffyl.net\\\/wordpress\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Resources &#8212; Y Ceffyl Du","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:\/\/ceffyl.net\/wordpress\/tech\/css-resources\/","og_locale":"en_US","og_type":"article","og_title":"CSS Resources &#8212; Y Ceffyl Du","og_description":"A friend of mine asked for tutorials and resources for CSS, so I complied the following list of sites. The cascading style sheet (CSS) spec (current version is 2.1) is published and maintained by the World Wide Web Consorium (W3C). The W3C also has a tutorial on CSS. W3Schools is a good site with excellent...","og_url":"https:\/\/ceffyl.net\/wordpress\/tech\/css-resources\/","og_site_name":"Y Ceffyl Du","article_published_time":"2009-07-13T19:38:52+00:00","article_modified_time":"2011-06-08T15:00:36+00:00","og_image":[{"width":781,"height":589,"url":"https:\/\/ceffyl.net\/wordpress\/wp-content\/uploads\/2021\/07\/P_20210703_145444-1.jpg","type":"image\/jpeg"}],"author":"Kim (Ceffyl)","twitter_card":"summary_large_image","twitter_creator":"@ceffyl1","twitter_site":"@ceffyl1","twitter_misc":{"Written by":"Kim (Ceffyl)","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ceffyl.net\/wordpress\/tech\/css-resources\/#article","isPartOf":{"@id":"https:\/\/ceffyl.net\/wordpress\/tech\/css-resources\/"},"author":{"name":"Kim (Ceffyl)","@id":"https:\/\/ceffyl.net\/wordpress\/#\/schema\/person\/7838a28d7c8c05ce1081d66937729647"},"headline":"CSS Resources","datePublished":"2009-07-13T19:38:52+00:00","dateModified":"2011-06-08T15:00:36+00:00","mainEntityOfPage":{"@id":"https:\/\/ceffyl.net\/wordpress\/tech\/css-resources\/"},"wordCount":383,"commentCount":0,"publisher":{"@id":"https:\/\/ceffyl.net\/wordpress\/#\/schema\/person\/7838a28d7c8c05ce1081d66937729647"},"keywords":["Web"],"articleSection":["Tech"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ceffyl.net\/wordpress\/tech\/css-resources\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ceffyl.net\/wordpress\/tech\/css-resources\/","url":"https:\/\/ceffyl.net\/wordpress\/tech\/css-resources\/","name":"CSS Resources &#8212; Y Ceffyl Du","isPartOf":{"@id":"https:\/\/ceffyl.net\/wordpress\/#website"},"datePublished":"2009-07-13T19:38:52+00:00","dateModified":"2011-06-08T15:00:36+00:00","breadcrumb":{"@id":"https:\/\/ceffyl.net\/wordpress\/tech\/css-resources\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ceffyl.net\/wordpress\/tech\/css-resources\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ceffyl.net\/wordpress\/tech\/css-resources\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ceffyl.net\/wordpress\/"},{"@type":"ListItem","position":2,"name":"CSS Resources"}]},{"@type":"WebSite","@id":"https:\/\/ceffyl.net\/wordpress\/#website","url":"https:\/\/ceffyl.net\/wordpress\/","name":"Y Ceffyl Du","description":"Tales of a Mischievious Horse","publisher":{"@id":"https:\/\/ceffyl.net\/wordpress\/#\/schema\/person\/7838a28d7c8c05ce1081d66937729647"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ceffyl.net\/wordpress\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/ceffyl.net\/wordpress\/#\/schema\/person\/7838a28d7c8c05ce1081d66937729647","name":"Kim (Ceffyl)","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ceffyl.net\/wordpress\/wp-content\/uploads\/2021\/07\/breezy-headshot.jpeg","url":"https:\/\/ceffyl.net\/wordpress\/wp-content\/uploads\/2021\/07\/breezy-headshot.jpeg","contentUrl":"https:\/\/ceffyl.net\/wordpress\/wp-content\/uploads\/2021\/07\/breezy-headshot.jpeg","width":853,"height":929,"caption":"Kim (Ceffyl)"},"logo":{"@id":"https:\/\/ceffyl.net\/wordpress\/wp-content\/uploads\/2021\/07\/breezy-headshot.jpeg"},"description":"Writing rider.","sameAs":["https:\/\/ceffyl.net","https:\/\/www.instagram.com\/ceffyl1\/","https:\/\/x.com\/ceffyl1","https:\/\/www.youtube.com\/channel\/UC4PBAqGmCJipReebm56Xf5w"],"url":"https:\/\/ceffyl.net\/wordpress\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/ceffyl.net\/wordpress\/wp-json\/wp\/v2\/posts\/1077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ceffyl.net\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ceffyl.net\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ceffyl.net\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ceffyl.net\/wordpress\/wp-json\/wp\/v2\/comments?post=1077"}],"version-history":[{"count":0,"href":"https:\/\/ceffyl.net\/wordpress\/wp-json\/wp\/v2\/posts\/1077\/revisions"}],"wp:attachment":[{"href":"https:\/\/ceffyl.net\/wordpress\/wp-json\/wp\/v2\/media?parent=1077"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ceffyl.net\/wordpress\/wp-json\/wp\/v2\/categories?post=1077"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ceffyl.net\/wordpress\/wp-json\/wp\/v2\/tags?post=1077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}