Search

GS Web-design Blog

Webdesign Developement and Mantainance

Category

CSS3

A Typographic Web Assignment

On this assignment from my web-prototyping class I was asked to create a typography-based stylesheet for web and mobile content using one to two embedded typefaces for an article of my choice.

I styled the text using CSS properties such as

font-family

font-size (px, em)

font-style

color

font vs background color

font-weight

text-transform

line-height

letter-spacing

word spacing

text-align

text-decoration

margin spacing

padding

I had to take into consideration that the typefaces chosen would look good together. So I aimed for CONCORD – typefaces that have different but complementary characteristics – for my main content. I’m not sure yet if I was successful, because maybe I just got into a CONFLICT of typefaces between my paragraphs <p> and the subheadings<h2>, since they are a bit too similar.

I also use a CONTRAST with the typeface chosen for the quotes in the button of the article.

Let me know what you think 🙂

Check my assigment*

A Typographic Web Assignment
Legiao Urbana – Wiki
* Responsive still going through adjustments for mobile.
Advertisements

CSS3: rule over rule

This week I learned something very important about CSS3.

When you write a CSS code, a rule can ‘rule over another rule’. So the style you give to an attribute (id or  or class) of a tag  will be prioritized over the way you style a tag itself.

What? Yeah… I will explain with an example!

Let’s say you have styled the color of the links on your page using this rule:

a {color: blue};

And you have a navigation bar with links on it (obviously…) And your navigation id is “site-nav“.

Then you decided that the links on the navigation bar should be a different color from the other links on the website.

So you write this CSS rule:

#site-nav a {color: white};

This rule makes the elements with the id “site-nav” WHITE.

And just like that the links on the menu will now will be white instead of blue! Wow!

See… That’s what I meant when I said that “a more detailed tag (#site-nav a) will be prioritized over the way you style a single tag (a)

Now you can style miracles on your page!

Blog at WordPress.com.

Up ↑