Custom views, css syntax

Question

I need some help to customize my events list with Drupal 7. I am a newbie to Drupal, css and php, but I am used to programming. I guess I need some help with css syntax here. What I want is an event list from an event calendar with customized format of the titles, which link to the respective event. I got to the point where I can tell the Views structure in Drupal that I want a customized html format for that field and where I can enter a name for a new css class. Now I take it, that I can edit the theme's css file to format the titles. Embarrassingly, I don't get the code right, my experience with css is not sufficient. Can someone help me, please?

I entered "pretty-event-title" as new css class, the resulting page's source code looks like this:

<div class="views-field views-field-title"> <span class="field-content pretty-event-title"><a href="/node/27">Test event</a></span> </div>]

"Test event" shows up as blue link of 100% font size. I'd like to change size and especially the color (size was just fine by using h3 tags or something in the view).

How would the css snippet look I have to put into my css file?

Any help appreciated! Best, Verena

Answer 1

You can add something like this to your theme style.css file

.pretty-event-title a{
  font-size: 14px;
  color: red;
}

More info: http://www.w3schools.com/css/

Answer 2

Use firebug or chrome/safari code inspector to see what css is being applied to elements, including browser defaults. Also helps when learning to see the form your css should take.