Scribd
Upload
298 views

CSS Synopsis

This 3-paragraph summary provides an overview of CSS (Cascading Style Sheets) and how it has improved web design. CSS enables styling of elements like headings, tables, and text with less code than HTML tags. It allows rounded edges, custom spacing, and modern features like pseudo-classes. CSS can be added externally, embedded, or inline. External is best for reusing styles across pages. Inline styling is usually only for HTML emails. If multiple styles conflict, the lowest or last declaration, or an "important" rule will take precedence. Whitespace is ignored in CSS like HTML, except between number and unit values.

Uploaded by

samthegirl9
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
298 views

CSS Synopsis

This 3-paragraph summary provides an overview of CSS (Cascading Style Sheets) and how it has improved web design. CSS enables styling of elements like headings, tables, and text with less code than HTML tags. It allows rounded edges, custom spacing, and modern features like pseudo-classes. CSS can be added externally, embedded, or inline. External is best for reusing styles across pages. Inline styling is usually only for HTML emails. If multiple styles conflict, the lowest or last declaration, or an "important" rule will take precedence. Whitespace is ignored in CSS like HTML, except between number and unit values.

Uploaded by

samthegirl9
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Samantha R.

Selman February 3, 2012

Synopsis: Getting Started with CSS Summary of Introduction-Chapter Three

Cascading Style Sheets (CSS) has definitely changed the lives of web designers/developers for the better. This technology, published by the W3C in 1996, has enabled us to add style and charisma to otherwise bland and monotonous websites. Before CSS became used in almost every website people had to style their web pages using methods like the <font> tag, as well as excessive images. Web developers began styling their headings, tables and text with CSS. It made their source code look more professional and easier to keep up with and their pages looked amazing. However, not all browsers understood the CSS at the time and web designers were once again stymied in their attempts at using the new technology. Browsers like Netscape and Internet Explorer refused to upgrade until Firefox, Safari and Opera were released. Seeing the new competition Microsoft released IE7 and IE8. These browsers were still far from perfect. In March 2009, IE8 finally fixed all the bugs and supported CSS2.1. Only a couple years later, CSS3 was released and Internet Explorer was once again the odd one out. These browser wars are the main reason developers and designers have been uneasy about switching to CSS. Today, despite the trouble with IE, almost all sites are using CSS. This technology enables web developers and designers to make their sites a little more modern using things like pseudo-classes to style elements based on their interactive state. Less code is necessary when using CSS as compared to using tags like <font>. Images, tables and buttons can have rounded edges without having to use excessive graphics. The space between words, letters and lines of text can be set using only one or two lines of code. For the average web designer, the possibilities are endless. To write CSS, all one needs is a text editor and a browser. CSS is an interpreted language like its counterpart HTML, so it does not have to be compiled before running. Style Sheets can be added to a web page three ways: external styling, embedded styling and inline styling. When using external styling you have the ability to link more than one style sheet to your site and you can use the same style sheet for all pages in your website. You must refer to external and embedded style sheets in the <head> section of your document. Here's a simple code snippet for each:
<html> <head> <title>External Style Sheet</title> <link href="css/external.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>An example of adding an external style sheet.</h1> </body> </html> <html> <head> <title>Embedded Style Sheet</title> <style> h1 { color: red; } </style></head> <body> <h1>This is an example of an embedded style sheet. As you can see from the CSS, this heading will be red.</h1> </body> </html>

Finally, there is the inline style. In my experience, these should be avoided unless you are using them for an HTML newsletter. Nevertheless, you must place the inline styles in the body of the document. Also there is no need for a selector because the tag itself acts as a selector. Here is a sample snippet:
<html> <head> <title>Inline Styling</title> </head> <body> <h1 style="font-family: Arial, Helvetica, sans-serif; color: #900;">This Heading Uses an Inline Style.</h1> </body> </html>

Please note that if you have several style sheets, there may be a conflict. That is, there will be two selectors with the same property in two different sheets, but the properties will have different values. Say you have one sheet where the color of heading level one (<h1>) is red and another sheet where the color of heading level one is blue. Which one conquers the other? It depends on the below scenarios: Is the declaration marked !important ? These override declarations not marked with !important. Where is the declaration located? Which comes first, second or third? The lower down on the style sheet the declaration is, the more likely it is to trump the other. What types of style sheets are conflicting? Inline styles will always override embedded and external style sheets.

I would like to add one more thing before I close this summary. We learned a long time ago that HTML ignores whitespace. CSS does the same thing. Why is this? So the code can be formatted to the developer's requirements, of course! But just like everything else, CSS has limits. Your browser will not ignore whitspace between a number and a unit of measurement. For example, say you have:
h1 { font-size: 12px }

Which makes the heading level one element twelve pixels high. However, you absolutely cannot say:
h1 { font - size: 12 px }

The number and unit of measurement need to be directly next to each other for the browser to process the command; property names cannot contain whitespace.

You might also like