This week we began to take a look at CSS, the styling and designing of markup content and HTML pages. CSS can be used to define colours, fonts and other aspects of a document, and can be used to position elements and control layouts. Up until this point, we have been using the default stylesheets for browsers when viewing our HTML pages. The stylesheets for these browsers are all relatively similar, and contain common characteristics of black text and blue links. By writing CSS, we can create our own stylesheets, styling these elements as we wish, and override the default browser stylesheets. We can make our websites more visually and aesthetically appealing, and make them more unique and differentiated from other websites. It also means our websites will be more easy to look at, as the default stylesheet is incredibly dull and boring.
As we began looking at CSS, I did find the whole sum of it a little daunting. But, I knew with time I would get used to the style of it, and the many elements and commands within CSS.
Basic CSS Styling
We took a look at some basic CSS styling, in which we added to our Baskerville and History of Type projects, which I have wrote about on a separate blog post here.
Lists
We also looked at ordered <ol> and unordered <ul> unordered lists.
<ol>
<li>first item<li>
<li>second item<li>
<li>third item<li>
</ol>
Would be displayed as:
- first item
- second item
- third item
and
<ul>
<li>first item<li>
<li>second item<li>
<li>third item<li>
</ul>
Would be displayed as:
- first item
- second item
- third item
Hyperlinks
We also looked at hyperlinks, and how they would look in code.
A typical absolute link, containing a full URL, would look like this:
href=”http://imdb.com”>IMDb<
The element within the brackets (“) is the link to the page, either from the same page or another website entirely.
The element between > and < is what appears to the viewer as the link. For example, this.