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!

Advantages?

  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