Google News CSS

At first, I was going to try and figure out what in the hell was going on in terms of CSS styling on the Pitchfork homepage. But I came to the harsh realization that it would take the better part of the week for me to get any sort of grasp on what was going on.

Instead, I’ve decided to tackle the CSS styling on the Google News homepage. This is something I visit frequently, especially if time is not on my side and I need to quickly digest the day’s happenings.

Screen Shot 2014-09-26 at 1.58.33 PM

The first line of code that caught my eye was for the scrollbar at the left of the page. When looking at the CSS for this scrollbar, I noticed there is a “pseudo-element” in followed by :: that was in front of things such as -webkit-file-upload-button element and -webkit-input-placeholder element. In looking at John’s blog post, he found the same element when looking at the MoreSleep site. From what he found, this element is used to style the first letter, or line, of an element and to insert content before, or after, the content of an element. But, I really have no idea the exact function of this element…

Screen Shot 2014-09-26 at 2.00.13 PM

I do feel that I understand the “transition” element, though. The duration for the transitions on the scrollbar is .218s. I’m curious as to how one goes about assigning the appropriate duration. Hopefully that is something I pick up on.

I did find out that using these transitions is a way to add an effect when changing between styles without having to use Flash animation or JavaScripts. Sounds pretty helpful considering I have no experience using either of those tools yet.

One other thing I caught while looking at the scrollbar was the “overflow” element that allows one to denote what happens when content overflows an element’s box. The description used on Google News is for the overflow to be visible, meaning the content is rendered outside of the elements box. According to w3schools, this is the default.

Another element I picked up on that I was not previously familiar with was the “min-height” element. This allows one to set a minimum height for an element so that the value of the height property does not become smaller than the min-height set. There is also a transparent background for this element.

Stylistically, this site is extremely simple and is really nothing more than a running list of the day’s top stories with a scrollbar on the left with more top stories and shortcuts to see top stories by location and category.

Hopefully all this mumbo jumbo makes sense…



2 thoughts on “Google News CSS

  1. Your “mumbo jumbo” made sense to me! Google News is a pretty simplistic design, so it’s pretty easy to navigate. It’s just not quite so easy on the eyes. The transition element you picked up on is interesting. I’m not sure how you choose the time for that either. Being able to add these without the additional software definitely does sound helpful. The overflow and minimum height elements also seem like good ways to keep a simplistic design and keep your content from being misplaced. Thanks for sharing!


  2. Zhao Hong says:

    Thank you for sharing this. I think for news websites or search engine like Google, easy and quick access to information is the priority and simple styling is preferred.

    The “min-height” element is really a handy tool. I think CSS3 animation and transition are very useful tools to achieve some simple effects. Since we have learned some basic HTML and CSS skills, and learned how to read code, I think we are going to master more skills by appreciating others’ work, imitating and then creating.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s