Download Usage of CSS in HTML and ASP.NET

Usage of CSS in HTML and ASP.NET
Kyle S. Zimmermann
Department of Computer Science
University of Wisconsin – Platteville
Platteville, WI 53818
[email protected]
Abstract
When Tim Berners-Lee first introduced Hyper Text Markup Language (HTML) in 1990, its
intentions were to allow researchers to format and cross-link their research documents using the
Internet. In contrast, what we see today is a vast array of graphics, table layouts, and font styling.
As the Web was opened up to the general public, HTML could no longer satisfy developers’
aesthetic and efficiency desires for their web pages. For these developers to create more
complex, highly stylized Web Pages, a new technology needed to be invented. Cascading Style
Sheets (CSS) was the answer to those developers’ problems. At its core, CSS separates the
content of a website from its style and design. These two features promote consistency
throughout a web page as well as decrease a web page’s rendering time by lowering its
bandwidth.
Introduction
At its core, CSS aims to separate the content of a webpage (contained in the HTML portion)
from the design elements (contained in the style sheet portion). Throughout the evolution of
delivering content via the Web, thoughts varied as to how content should be stored and delivered
using Web pages. Some questions pertained to allowing web documents to only contain content
with their respective tags determining the logical structure, while other questions arose on the
topc of allowing the actual browser to determine the look. In 1997, the World-Wide-Web
Consortium (W3C) introduced this concept of CSS in an attempt to solve this dilemma. This
effectively solved the issue between “structuralists” and “designers” by allowing Web
documents to contain solely content, with corresponding HTML, while having the ability to be
linked to one or more style sheets in order to determine their final appearance. Labeled the “guru
of web standards” Eric Meyer was one of the first people to see and experience what CSS had to
offer. While attending the fifth international Word Wide Web Conference, Meyer observed a
presentation by Chris Wilson on CSS that “blew the top off [his] head.” [7] Eric also discussed
CSS on Jen Simmons’s (website designer) podcast in which he described CSS as being, “Like a
suite of clothing for a web page. You can change the clothing or appearance without changing
2
the actual content. Before CSS, your Web page had to essentially go through cosmetic surgery in
order to change something.” [5] [4]
History
The nature of CSS came about in order to create a more consistent approach to providing style
information for web documents. 1994 is the benchmark year for the birth of CSS. The
“Cascading” nature of CSS means that one style sheet is able to inherit or, “cascade,” from
another, allowing a mixture of stylistic preferences controlled equally by both the designer and
the user. This idea was not some new revelation thought up overnight. When Tim Berners-Lee
introduced HTML in 1990, one of his goals was the ability to separate structure and content from
design. He achieved this through simple style sheets in his NeXT browser. However, BernersLee didn’t publish the syntax for his original style sheets, because he felt that the decision of how
to best display Web pages should be left up to the browser. This sort of unregulated, nonstandardized approach to style sheets almost killed the advancement of style sheets. [1] [4]
With browsers offering fewer and fewer options to influence style and Web page designers
complaining they didn’t have the tools available to create their desired pages, Hakon Wium Lie
proposed this idea of CSS in 1994. Since HTML’s purpose was never to become a page
description language, Hakon proposed this style sheet scheme specifically for HTML documents.
CSS wasn’t the only idea like it at that time; document Style Semantics and Specification
Language (DSSSL) was another proposed styling language, as well as ideas from Pei Wei, Viola
browser developer, and Robert Raisch of the publishing house O’Reily. However, the thing that
set apart CSS from its competitors was this previously mentioned “cascading” feature where
initial preferences would be specified, but then other properties would be inherited from multiple
sheets. This made logical sense because a Web document’s style can’t just be determined by the
user or designer, but rather a combination of the two, as well as the capabilities of the display
device and browser. [4]
CSS was initially propsed in 1994, but was not widely accepted. Many people saw CSS as being
too simple, and they argued that a full programming language would be needed in order to style
documents. CSS was presented and met with some opposition the following year as well, but the
real breakthrough came that same year when the World Wide Web Consortium (W3C) was
established. Workshops were eventually held in order to meet and discuss future development in
the area, and one of the workshops was organized around style sheets. This ultimately persuaded
the masses of the importance of style sheets, namely CSS, and Thomas Reardon, of Microsoft,
pledged support for CSS in upcoming versions of Internet Explorer. [4]
Where are we now?
Like many programming languages, CSS has gone through multiple iterations in order to
improve upon old concepts. Called levels in CSS, level 1 became official at the end of 1996, and
3
was initially supported by Microsoft’s Internet Explorer 3. Not having tackled all the desired
issues, CSS level 2 was created on November 4, 1997 and published through W3C on May 12,
1998. Immediately following CSS level 2’s completion, CSS level 3 was started and is still under
development. One interesting thing to note about the completion of these various CSS levels is
that each module of CSS doesn’t have to be completed in order for the version to move forward
to the next level. Eric Meyer talks about this in a podcast saying, “the way things used to be was
that everything in CSS level 2 needed to be finalized before CSS level 2 could be done. But now,
because there is so much more going on, each module can independently move to its own level
and then that level of CSS can just be released when felt complete.” [5] [4]
Advantages
Faster loading of Web pages
Without style sheets, one must add the style code they want directly into their HTML. A
common phrase to describe this type of design is “table-based layouts.” As the name suggests,
elements on a Web page are organized using various sized tables, referenced by their HTML tag,
resulting in the developer having to write a vast amount of HTML code. By introducing CSS,
these design elements can now be separated from the Web page content, resulting in Web
documents containing only the content wished to be displayed. Web browsers also have the
ability to cache these style sheets, which eliminates them from being loaded for every similar
Web page. [4]
Visual consistency
Next time you visit a Web page, think about how long it would take to design and place each
element, color, font style, etc. on that page. Now take a look at how many pages make up that
particular Web site. This is where I argue CSS plays one of the most important roles. By creating
a single style sheet that can be applied to multiple pages, designers don’t have the tedious and
repetitive task of coding the same style on every subsequent page of a Web site. This also brings
a sense of uniformity because it reduces the probability of error when copying the style of one
page to another. [4]
Search engines like CSS
Search engines work by crawling through a site’s code in order to extract the keywords of the
content, index those keywords, and then rank those indexes and create links back to the pages.
Using the table-design technique, a search engine may have to crawl through 1,000 lines of
HTML instead of 500 using CSS. Because CSS has the ability to be linked externally, search
engines have no need to access them, thus it is easier and faster for them to identify the structural
elements of a page (HTML tags: h1, h2, etc) and determine a page’s content. [4]
4
Style Sheet Types
External
External style sheets are considered the most powerful style sheet, because they can be linked to
an infinite number of pages. Remember, style sheets have no affect on the HTML so one could
theoretically find and link a random style sheet to a Web document they created and any relevant
styling would take effect. As indicated by their name, external style sheets are separate files with
the .css extension. Using ASP.net, one can link a style sheet by embedding this code into the
HTML document: <link href="MyStyles.css" rel="stylesheet" type="text/css" />. Then just
replace “MyStyles.css” with an external sheet you created and your style will be applied to that
page. Figure 1 below gives a visual representation of an external style sheet being linked to
multiple HTML pages.
Figure 1: External Style Sheet linked to two html files [6]
Embedded/Internal
If a page is less complex in design, then an Embedded/Internal style sheet might be more
beneficial. As the name suggests, Embedded/Internal style sheets are coded directly into the
HTML page; however, they are separate from any code relating to content. Embedded/Internal
style sheets only apply to the page in which they are coded. In HTML, the code would be
contained in the <head> tag and denoted by the <style> tag. Figure 2 provides a visual of how
that code would look in ASP.net.
5
Corresponding <head> tag
Corresponding <style> tag
Content of a
style sheet
Figure 2: Embedded/Internal style sheet
Inline
Commonly referred to as Inline styles, these are similar to embedded style sheets except inline
styles are mixed with the content instead of being in a separate place on the page. Inline styles
are not recommended and should only be used if a particular element has a unique style that
can’t be applied anywhere else. Figure 3 demonstrates an inline style on a paragraph in ASP.net.
Figure 3: Inline style sheet [10]
What makes up a style sheet?
Style sheets are made up entirely of rules that effectively make up the code of the language. This
can seem a little different at first if one has the mindset that CSS is an imperative programming
language such as C++ or Java. In fact, Eric Meyer labels CSS a declarative language in the fact
that, “I type this, and then it does that.” [5] Figure 4 below shows one of these rules.[2]
Figure 4: Selectors and Declarations [9]
6
As Figure 4 shows, a CSS rule is made up of two parts: the selector, which states which tag the
rules selects, and the declaration, which states what happens when the rule is applied. The
declaration itself is made up of two elements: a property, which states what is to be affected, and
a value, which states what the property will be set to. The basic structure of the selector and the
declaration can be written a few different ways. First off, multiple declarations can be contained
within a rule (such as Figure 4). Secondly, numerous rules can be applied to the same selector
(see below code). We will get into best practices and suggestions regarding writing CSS rules in
the coming sections.
h1, h2, h3 {color: blue; font-weight: bold; }
h3 { font-style: italic; }
Selectors
Type Selector
Type Selectors are one of the easiest selector types to understand. These selectors correspond
directly to HTML element types that one would use when structuring their webpage. By naming
a particular HTML element in the style sheet, one can apply a style rule to every occurrence of
that element in the document. The following example below would use Type Selecting to set
some default values for font on a Web page. [3]
p, td, th, div, ul, ol {
font-family: Helvetica
font-size: 12px;
color: #000000;
}
Class Selector
CSS classes come into play when you want to assign different styles to identical elements that
occur in different places within your document. For example, consider the following style, which
turns all the paragraph text on a page blue:
p { color: #0000FF; }
7
Now let’s say there was a side bar on the page (defined below as a paragraph of class sidebar)
that contained a blue background. Since our first rule regarding text color is assigned to all
paragraphs, we can use a class selector to change the font color of this sidebar.
<p class=”sidebar”>
This text will be white, due to our separate rule using class selectors.
</p>
Now the rule:
.sidebar { color: #FFFFFF; }
As you can see, Class Selectors are determined using a period then the class name. This one rule
will apply to all the elements that have “sidebar” as their class name. This differs slightly from
the next type of selector, the ID Selector. [3]
ID Selector
In contrast with Class Selectors, ID Selectors are used to select one particular element, rather
than a group of elements. To use an ID Selector, first add an ID attribute to the element you wish
to style. It is important to note that IDs must be unique on a single Web page.
<p id=”intro”>
This is the intro paragraph.
</p>
To reference this element by its ID Selector, we use a # sign as opposed to the period like the
Class Selector. The following style will select the “intro” paragraph by ID and make it white.
#intro { color: #FFFFFF; }
Using the previous Class Selector, one can begin to combine different types of selectors in order
to create the specific design they want:
#intro .sidebar {
font-family: Arial, sans-serif;
color: #FFFFFF;
}
8
Box Model
All HTML elements can be considered as boxes. In CSS, the term “box model” is used when
describing design and layout. CSS treats visual elements as rectangles that flow along the
document. All visual elements within a page are considered to be rectangular boxes, each with its
own padding, border, margin, and content. The background-color of an element will affect its
content area and padding, but not the border or margin. The border type can be set to different
styles, but its color defaults to the foreground color. The margin is always transparent and can be
considered the space in which the element distances itself from adjacent elements. Margins are
the only properties that can be negative. Unfortunately, in practice, the box’s width and height
differs from one browser implementation to another, one example being how Internet Explorer
(IE) defines the width of the box. The World Wide Web Consortium (W3C) defines the width of
the box as the width of the content area, not including the padding, border, or margin, while IE
implements the box model by having the box width include both padding and border size. [8]
Figure 5: CSS Box Model [8]
Conclusion
This paper aims at introducing one to the history of CSS and the role it plays in Web page
design, as well as some key elements which make CSS the powerful tool that it has turned into
today. CSS was created to help designers separate content from presentation. Although many
designers are advocates for CSS, because writing the rules for these sheets is much more
convenient and efficient than tedious HTML code, opponents argue that the separation of content
and format is a traditional idea that needs to be abandoned. Opponents also claim that CSS is too
complex, and often lead the designer to create multiple errors that result in vast amounts of hours
being wasted. Eric Meyer states, “The hard job is done…..but we’re still obviously having
problems with inconsistencies between browsers.” [7] The real challenge moving forward will be
to get everyone, mainly meaning browsers, on the same page in terms of support.
9
References
[1] Badros, G., Borning, A., Marriott, K., & Marriott, K. (1999). Constraint cascading style
sheets for the web. Informally published manuscript, Retrieved from
http://www.cs.washington.edu/research/constraints/web/ccss-uwtr.pdf
[2] Geneves, P., Layaida, N., & Quint, V. (2012). On the analysis of cascading style sheets.
Informally published manuscript, Retrieved from
http://www2012.wwwconference.org/proceedings/proceedings/p809.pdf
[3] Pozadzides, J., & Quinn, L. (n.d.). Cascading style sheets. Retrieved from
http://www.htmlhelp.com/reference/css/
[4] W3C. (n.d.). Cascading style sheets. Retrieved from http://www.w3.org/Style/CSS/
[5] Simmons, J. (Director) (2012, 3 2). Css with eric meyer. The Web Ahead. [Audio podcast].
Retrieved from http://5by5.tv/webahead/18
[6] Varese, J. (2010, 5 17). Understanding cascading style sheets. Retrieved from
http://www.adobe.com/devnet/dreamweaver/articles/understanding_css.html
[7] May, T. (2012, 7 23). Eric meyer on the past, present and future of css. Retrieved from
http://www.netmagazine.com/interviews/eric-meyer-past-present-and-future-css
[8] (n.d.). Retrieved from http://www.w3schools.com/css/css_boxmodel.asp
[9] (n.d.). Retrieved from http://www.w3schools.com/css/css_syntax.asp
[10] (n.d.). Retrieved from http://www.w3schools.com/css/css_howto.asp