ASPNetFAQ.com: What is ASP.NET?

Technology posts on ASP.NET, IIS, Windows (+ a little Linux), Cloud Servers, Hosting, and more!
  • Blog Home
Search the site...

CSS Style Overlaps, Duplicates, and Priorities

Tweet
Share
0 Shares

I sent most of this past weekend trying to get a nice looking responsive table to work. At first I tried to mess with it from scratch. Then someone recommended I look into Twitter Bootstrap. Wow, am I glad I looked into Bootstrap because that has saved a ton of frustration.

Okay, so I have the general framework but now need to make it look the way I want. I created my own custom CSS file and started “prettying up” the look over the table. I ran into a few things though that Bootstrap did by default that I didn’t like. The two big things were that I wanted the column widths a different size on 980px+ browser windows, and I wanted to get rid of the “padding” (technically a left-margin) between the columns.

So, being myself, I started to customize the Bootstrap file. After a while I realized this was a bad idea. So then I took parts of the Bootstrap CSS and moved (copied) it into my existing CSS file and started to modify things. Well, this got pretty messy quickly.

After sending out a tweet for assistance earlier today my buddy Joseph Guadagno lent a hand and pointed me in a much better direction. What I wound up doing was to revert all of my changes and then start overlapping CSS styles. I’m not sure if that’s the right terminology – I didn’t even know it was an option until today. Basically I’d set something like <div style=”style1 style2″> and both styles would be applied. That was great because I could have my formatting style applied and also the Bootstrap style for the responsive table. This was CSS lesson #1 for me today.

But while that helped clean up the mess I was creating, I still needed to override some settings that were in the Bootstrap CSS file. So I duplicated the same attribute but with a different setting to see whether mine or Bootstrap would take effect. Bootstraps did every time – even when I messed with the order of things. I have no idea what determines who wins a fight like that, but while trying to figure it out, I stumbled upon “!important”. What I found out that was when there are multiple values applied to the same item, you can set “!important” just after the value that you want to take precedence over any other values that might exist. Wow! This was CSS lesson #2 for me today.

So now this was great. I had my responsive table; it looked nice; and I could override the Bootstrap settings that I didn’t like and force them to take effect with my handy new “!important” statement.

Score! Now I wish I could have my weekend back. Can anyone help with that? :)

Brad on Google+

More from my site

  • Orchard: Custom Content in Sub-FoldersOrchard: Custom Content in Sub-Folders
  • MVC3, Visual Studio 2010: Error: Microsoft JScript runtime error: Not implementedMVC3, Visual Studio 2010: Error: Microsoft JScript runtime error: Not implemented
  • Changing the table owner in SQL Server 2012Changing the table owner in SQL Server 2012
  • Resolving a “There is a duplicate ‘system.web.extensions/scripting/scriptResourceHandler’ section defined” ErrorResolving a “There is a duplicate ‘system.web.extensions/scripting/scriptResourceHandler’ section defined” Error
  • URL Rewrite Sample to Add www to the URLURL Rewrite Sample to Add www to the URL
Tweet
Share
0 Shares
css, Hosting, Learning, tip, Troubleshooting

Comments are closed.

Proverbs 19:20

"Get all the advice and instruction you can, so you will be wise the rest of your life."

A Note On WordPress Hosting

Our main focus is of course .NET, but with a mix of Linux, virtualization, and other technologies. But if you're really looking for the best WordPress hosting specifically, read my WordPress host review to save yourself hassle AND money!




Recent Posts

  • What makes good web hosting?
  • jQuery Mobile C# ASP.NET and N5 Networks Software Repository
  • Open Source Bug Tracking Software and the Orchard Project
  • ASP.NET Development with Dreamweaver MX: Visual QuickPro Guide
  • Kendo UI Sample, ASP.NET Ajax Tutorial & More

Tags

ASP.NET Automation centos CMS css cytanium Development/Coding Email gmail Hosting htaccess http https IIS javascript Learning Linux logparser MySQL nginx openssl OrcsWeb performance PowerShell redirect RHEL security server SherWeb smtp SQL/Databases ssl System Administration telnet terminal tip Troubleshooting Ubuntu virtualization Visual Studio web farm web hosting Windows windows server Wordpress

Categories

  • ASP.net development
  • Development/Coding
  • Hosting
  • IIS (Internet Information Services)
  • SQL/Databases
  • System Administration
  • Virtualization
(c) ASPNETFAQ.com