CSS Refresh and font-size.

These are two topic I have struggled with and one is resolved. I have the answer, Your Welcome. The other will probably be an ongoing learning battle.

During the previous semester I had a lot of trouble getting my CSS to update on the school server. Sometimes I could refresh a few times and it would work. I would clear my cache over and over but nothing. Sometimes it resolved on its own overnight or after a few days. There was one instance when it took weeks. I was at a loss and very frustrated and wasting time trying to figure it out. One time I deleted the entire assignment and started over. I did not know the question to ask to get an answer. This last week it started happening again. This time I was able to locate a solution.

Ctrl + F5 on PC or Cmd + Shft + R on Mac will force the browser to reload all the resources related to the website’s page. I have found that if this does not work that I can open the inspector and with your cursor in the CSS panel try again and it works. This trick has been a lifesaver for me. I use it almost every time I upload and preview. You can also try Shft + Refresh. This is supposed to force the browser to download all the server files; clearing cache and updating with any newer versions. Shft + Refresh works for both Mac & PC, any operating system, any browser. I have not found this to be as effective as my first solution.

Ugh font-size! There are so many things in CSS that I am dying to master. This one is font-size. If you use Dreamweaver there is a CSS options panel and it is very clever and helpful but sometimes too many choices are as good as none. When you type font-size there is list as long as your arm with choices!

I have sort of stuck with px because I understand it. PX is absolute and not scalable. PX is predictable and doesn’t change, ever. It might also be a good starting point, but what is the starting point? I think I am missing out on some styling tricks that would really help simplify things if I understood more about how they work and their relationships. I really need to dive in and start trying.

I found this little gem on Confused About REM and EM? short and sweet and simple or too simple?

While em is relative to the font-size of its direct or nearest parent (sort of), rem is only relative to the html (root) font-size. Try this: Use px at the Root, use rem for components and use em for text elements. Does this overly simplify?

However things just get complicated and there are some very good reasons to really understand each one of these and when to use them.

This is another good article with very good descriptions CSS Font Sizing: Pixels vs Em vs Rem vs Percent vs Viewport Units Scroll down and you will find great definitions and explanations that are fairly easy to understand.

Then I got to this article which is actually an article and tutorial Comprehensive Guide: When to Use Em vs. Rem . I have to admit after going thru the whole thing I was still a bit confused BUT when I got about 2/3 of the way thru it started to gel.

REM allows for scalability based on each user’s default browser font size. I will forever think Root-em when I think rem.
EM allows for scalability within the context of the specific design element.

It is starting to make sense and I can see it is very important especially for responsive design.

Leave a Reply

Your email address will not be published. Required fields are marked *