CSS: Specificity Wars. CSS: Specificity Wars Join me, and together we can rule the galaxy as father and geeks! A few weeks back in Cupertino, I saw Aaron explain how the specificity of CSS selectors is calculated in a way which I hadn't seen before. Then today I came across a knotty problem while building XHTML and CSS templates for a new project where two selectors behaved differently to how I expected and I realised that I had not completed my training. The Dark Side My problem was a simple one, how to feed a transparent PNG image to browsers which support transparency and a GIF image to older browsers which don't, without resorting to hacks. <div id="nav-supp"><p><a id="a-02" href="#webstandards-org">Top</a></p><!
And my CSS starting point. I had assumed that a modern browser would see and apply both rules (with the second overriding the first) and that an older browser which does not understand attribute selectors would see and apply only the first, ignoring the second. Sith Lords Too much! Resources Replies. CSS Specificity: Things You Should Know - Smashing Magazine. Advertisement Apart from Floats1, the CSS Specificity is one of the most difficult concepts to grasp in Cascading Stylesheets. The different weight of selectors is usually the reason why your CSS-rules don’t apply to some elements, although you think they should have. In order to minimize the time for bug hunting you need to understand, how browsers interpret your code.
And to understand that, you need to have a firm understanding on how specificity works. In most cases such problems are caused by the simple fact that somewhere among your CSS-rules you’ve defined a more specific selector. CSS Specificity isn’t simple. Let’s take a look at some important issues related to CSS Specificity as well as examples, rules, principles, common solutions and resources.
You can find the most important things you should know about CSS specificity in a brief overview at the beginning of the article. CSS Specificity: An Overview What is Specificity? Specificity hierarchy How to measure specificity? 80+Download Free CSS/HTML Templates Layout 2010 « CSS Templates - FreshDesignWeb. All professional free CSS/HTML templates for easy design website.
It is important for web designer to find new CSS/HTML layout web templates to improve the ideas design, However, the templates was used by other already but they take some part of the templates to create new one by mix more templates together. If you are looking best html and css templates to create your website. You may like my favorite collected html/css templates for purpose such company, product, service, business, shop, wedding, restaurant, portable, electronic shop, book store, jewelry shop, medical clinic, beauty and real estate…etc. It released for free download. The CSS templates layouts was design by Cascading Style Sheets (CSS) to make professional website design and also improve website performance. i hopeful that this collection will save you some time in your design and development. You may like this: Free HTML5 Templates Caprice – Free HTML Template Demo More Info Affection Free CSS Template Demo More Info Digy. Style Effect Using CSS and Javascript « CSS & JQuery - FreshDesignWeb.
1. Hover Slide Effect with jQuery Today we will create a neat effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover over them, revealing other images. The sliding effect will be random, i.e. the images will slide to the top or bottom, left or right, fading out or not. When we click on any area, all areas will slide their images out. Download (4455) | View Demo | Link Site 2. Once upon a time when a web design required a nice, functional and scalable button it needed to be designed in photoshop at first, implemented with the sliding doors technique later and you may have had to spice things up with a little javascript in the end.
Download (557)| View Demo | Link Site 3. Today we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. Download (628)| View Demo | Link Site 4. Download (551)| View Demo | Link Site 5. Download (4939)| View Demo | Link Site 6. 7. 10. CSS Tip #1: Resetting Your Styles with CSS Reset. This is the first part of a series of articles that will discuss a particular CSS best practice or tip. I’ll be covering a mixture of topics that deals with CSS best practices, performance optimization, and tips and tricks to improve your workflow.
Today we’ll be covering the topic of resetting your styles. Resetting your styles, commonly referred to as CSS Reset or Reset CSS is the process of resetting (or more accurately – setting) the styles of all elements to a baseline value so that you avoid cross-browser differences due to their built-in default style settings. By resetting your styles, you avoid defaulting to the browser’s built-in styles, which differs from browser to browser. CSS Reset avoids browser inconsistencies For example, say you use an anchor tag <a> in your HTML document. A simple example Example 1: How paragraph tags are rendered by default. By default, these spaces don’t exist in Internet Explorer.
So which browser is right, Firefox or IE? A reset to where it all started… So You Want A Style Sheet, Huh? - www.htmlgoodies.com. First things first: This tutorial is an updated version of my original style sheet tutorial. Style Sheets, A.K.A.: Cascading Style Sheets, A.K.A.: CSS, are becoming more popular now that they are cross-browser models thanks to Netscape's version 4.x including the commands. This is a general overview of Style Sheets. You'll find more specific Style Sheet elements explained in the Positioning, Class & ID, and DHTML tutorials. ...use these to jump around or read it all. Wouldn't it be nice if you could say to all browsers that enter your page - "This is how I want you to handle my text.
" Explorer 3 and above and Netscape 4.0 (and all those to come) offer you more control through the use of what are titled "Style Sheets". Style Sheets? Any one. The term "Cascading" Style Sheets is used because more than one Style Sheet can affect the same page. Implementing the Style Sheet OK, you can do this one of two ways: You can put a separate style sheet on each page. One Style Sheet -- One Page Hey! Css Zen Garden: The Beauty in CSS Design. CSS3 Chat Bubbles. CSS3 Chat Bubbles Monday, December 20, 2010 { 13 Comments } Few day ago I saw on Hacker News the link Creating Triangles in CSS from Jon Rohan(kudos to JON) and was specially interesting for the chat bubbles. Mainly because I was building one mini app for Twitter who should run on iPhone/iPad (webkit browser) so I needed simple solution for the chat bubbles. Jon uses this HTML : <div class="chat-bubble"> Buongiorno! <div class="chat-bubble-arrow-border"></div> <div class="chat-bubble-arrow"></div> </div> I wanted to use just one div to create the same effect and make CSS to do all the heavy lifting: After some CSS hacking here is the result: ExampleExample1Example2Example3Example4 From the examples you can see that everything is done with CSS and no images are used for making Chat Bubbles and also the HTML is super simple just one div and one class (<div class="chat-bubble"></div>).
If you have any questions please let me know in the comments. All the examples are also on github for download. CSSEdit - Web 2.0 in Style. CSS-Tricks. Current page higlighting with CSS. This is a basic test page. You can read the article here. First we'll set up our navigation list. I have chosen 4 sections for ease, and its best if navigation sections are kept short anyway: <ul id="navlist"><li><a href="index.html" >Home</a></li><li><a href="products.html">Products</a></li><li><a href="faq.html">FAQ</a></li><li><a href="contact.html">contact us</a></li></ul> Next we need to add a unique class or id (doesn't really matter which) to each of the section pages: <ul id="navlist"><li><a href="index.html" id="homenav">Home</a></li><li><a href="products.html" id ="prodnav">Products</a></li><li><a href="faq.html" id ="faqnav">FAQ</a></li><li><a href="contact.html" id ="connav">contact us</a></li></ul> Before we leave the HTML, on each of the section pages we need to add a unique id to the body tag: This allows us to specify the highlighted tab.
Finally, we add the css rules to highlight the correct tab.