CSS Discovery

Saturday, March 29, 2014

The technology to create beautiful, flexible and maintainable website designs

Control formatting, presentation and overall look of a webpage

Design for modern websites!


  1. Separate content from presentation
  2. Colors, layouts and fonts
  3. Mixing content(html) and presentation(css) makes reading difficult
  4. Make changes or redesign is facilitated
  5. Remove presentation from html and leave only content
  6. Html easier to maintain, easier to change and experiment
  7. All presentation instructions in external style sheet

File new project, empty asp.net application and add an html page

Type in this html

In the head tag add a style definition

Save file, refresh page, view the change

Add this css file to the project

Remove style definition in head and paste in the css file

Insert this link in head of html to point to style sheet

Refresh the web page and view everything is rendered as before

Add this style rule to increase font of paragraph tag, refresh page and view text become a bit bigger

Css specifications are located here

View the css selectors browser implementations here

The css 2 specs property table, lists available properties to be set in a style rule

Click color, view named colors for the web and the hexadecimal codes

View a color picker here, select a base color and fine tune it

Update the markup and style rule, view the rendering on the web page

Set the background color on h1 elements, refresh and view the page

Stack up multiple selectors for a rule by separating with a comma

Tell the browser to set the background of all divs to red

Set the p tags to blue, note the closest style rule applies, it overrides others

Give first paragraph an id, in css use pound symbol to select that element by id, refresh view the web page

The p element has a class, use dot notation in css, refresh and view web page

Give div class of quote, refresh view on page the background color is green

Set font-size to extra large for all paragraph elements on the page, view the intellisense features

Refresh the web page and view the larger font inside the paragraphs

Specify the font size in points

Using ems, specify 50% larger than default

Specify these property values, note the second paragraph takes over one quarter of the web page because nested within div which has a width of fifty percent

Add this background image to the body, refresh the page and view, the text is not easy to see on the dark background

Set default foreground color to white in the body, refresh and view the web page

Use star selector, everything matches and everything has a color of white

Reset html and css to this, view the web page, why is the background white? why is the hyperlink underlined? why is heading one that much bigger than heading two? who determines this?

View the user agent stylesheets for ie here

View the user defined stylesheet in internet options

Make the text of the body one hundred fifty percent bigger in the user stylesheet, view the result in ie contrast to firefox

In the author defined stylesheet set the text to eighty percent, view the result in the browser, user stylesheet has been overridden

Pound important overrides the default cascade

Clear out author and user defined stylesheets, view page is back to default

When browser sees conflicting rules from same source, it applies the last rule to the element, hence the paragraphs have background color gray

Paste grey background definition in new stylesheet, reference it last in html file, view the last stylesheets rule applies the style to the element: gray

Remove link in html file, add an import in style, refresh page and view the result

Default Success Warning Important Info Inverse
B S W I ? O