Articles
CSS Tutorial. (n.d.). w3schools.com.
Retrieved from http://www.w3schools.com/css/
The CSS Tutorial (n.d.) offers
interesting details on CSS. One such point is the origins of CSS. According to
the Tutorial, when developers added tags such as <font> and color
attributes to the HTML 3.2 specification, the process of developing large web
sites became longer and more expensive for web developers to complete. As such,
the World Wide Web Consortium (W3C) constructed CSS so that, in HTML 4.0, a
user can remove the formatting from HTML documents and store them in a separate
CSS file (under Introduction, “Styles Solved a Big Problem”). In effect, then,
the CSS was developed as a solution to an earlier problem – revealing how
software and digital technologies evolved through trial and mishap.
Another interesting detail was how a
person could insert CSS into their work. The Tutorial (n.d.) lists three ways
to do so: 1) an external style sheet, which changes the appearance of the Web
site by changing one file (under CSS How To…, “External Style Sheet”); 2) an
internal style sheet, used for single documents which have a unique style
(ibid., “Internal Style Sheet”); and 3) inline styles, which mixes content with
presentation (ibid., “Inline Styles). Such categories imply organization to the
CSS’s development as well as the different manners in which CSS affects visual
elements. A user can use CSS for more focused projects; no one has to stick to
manipulating the presentation of a whole website when she or he really needs to
differentiate individual pages from each other, for example.
CSS Tutorial: Starting with HTML + CSS. (n.d.) W3C. Retrieved from http://www.w3.org/Style/Examples/011/firstcss
The “CSS Tutorial: Starting with
HTML + CSS” (n.d.) covers some details that I’m unfamiliar with. For example,
in the second “warning” for Step 1, it notes how the “ul” elements represent a
list with one hyperlink per item, serving as the “site navigation menu,” while
the “hl” and “p” elements “form the unique content of this page” (CSS Tutorial,
n.d., under Step 1: The HTML). I found such “warnings” to be fascinating; they
elaborate and build on the basic information of the Tutorial and introduce new
ideas of using HTML. In the case of the example I gave, I am now curious at
what “unique content” the “ul” and “p” elements produce and want to try that
out.
I particularly liked the Tutorial’s
approach to colors. Step 2 covers the basics, teaching how to add color using
the <style> elements – specifically <style type=“text/css”> and
elaborating with how to set the colors for the text and background of the body
(CSS Tutorial, n.d., under Step 2: Adding Some Colors). I love adding variation
to my work when I can, experimenting with colors, type fonts, and the like, so
I will need to investigate this when working with HTML. Similarly, the analysis
on link colors under Step 5 was most interesting. I am familiar with the
standard for having links to pages I haven’t visited remain blue while those
which I have clicked becomes purple (ibid., under Step 5: Styling Links).
However, I am now curious of why this is the standard. Having a consistent
color-coordination is beneficial for the Web overall, allowing fewer confusions
for newcomers without varying the colors. But why blue and purple? Why not some
other colors, like green and red? Were the colors chosen randomly, or was
thought put into it or does it correspond to a cultural norm? I really want to
experiment with this, see if anyone would actually react if I changed the
colors.
Lie, H.W. and B. Bos. (1999). Chapter 2 in Cascading Style Sheets, Designing for the Web. Boston:
Addison-Wesley.
After reading the Chapter, I found
that H.W. Lie and B. Bos (1999) provided interest notes using organic metaphors.
For example, their “anatomy” of rules and declarations. Each are made up of two
parts – the rule consisting of the selector [the link between HTML documents
and the style] and declaration [determines the effect of the rule] (Lie and
Bos, 1999, under “Rules and Style Sheets,” “Anatomy of a rule”) and the
declaration made up of properties [the quality] and value [specifies the type
of quality] (ibid., “Anatomy of a declaration”). Each are interlinked, the
declaration and all of its components contributing to the overall form of the
rule. One part cannot exist with the other, or otherwise the rule as a whole
fails. This is almost true for the human body; although the body can continue
living without both kidneys, for example, overall it needs most of its organs
intact to function fully as a living being. Viewing the anatomy of the rule
like this emphasizes both its limitations and complexities in CSS.
Another organic-like feature
involves formatting documents in CSS as tree-structures. Lie and Bos suggest
this course to emphasize the “inheritance” factor of the elements; “through
inheritance, CSS property values set on one element will be transferred down
the tree to its descendants” (Lies and Bos, 1999, under “Tree Structures and
Inheritance”) but sometimes elements override others in the “children” (ibid.,
under “Overriding Inheritance”) or cannot be inherited (ibid., under
“Properties that don’t inherit”). As such, the organic-metaphor allows users to
understand CSS better. Most American public high schools teach the basics on genes
and genealogy in biology courses, so theoretically a good number of people
understand the basic idea of the transference of genes, and if not, most people
are familiar with how family trees work. Users would be familiar with the
logistics; thus, applied to the CSS, they can make the leap between metaphor
and reality and be able to understand how CSS works.
By emphasizing the organic
metaphors, Lie and Bos almost imply that CCS documents are almost alive. They
have “organs” which determine whether they live fully or not or how well they
accomplish basic functions. They have elements that can be passed on to others
“genetically.” This is an interesting method for them to use. They could be
doing it accidently, for poetic reasons, to make their concepts more relatable,
or to make a point on its complexity.
Sabrina, I also enjoy color picking a lot. Here are some useful tools (as my personal recipe):
ReplyDeleteKuler: https://kuler.adobe.com/
ColorBrewer: http://colorbrewer2.org/
Color Hunter: http://www.colorhunter.com/ (update a photo and get the colors)