HTML - HyperText Markup Language, or HTML, is a language used to markup documents for display on browsers. It utilises angle brackets (<,>) with text, called tags, to breakup text and define different parts.
CSS - CSS is the language used to style HTML. It uses curled brackets ({,}) and the parts of text defined in html to add various colours, fonts, weights, alignments, etc.
When Tim Berners-Lee created the World Wide Web in 1989, he had planned there to be no way to style websites. With the release of the ViolaWWW browser in 1991, included was the first utilisation of scripting and stylesheets, and, while ViolaWWW never truly gained popularity, it did start people thinking of the possibilities for design of webpages. The initial proposal was to expand HTML to include tags that could define stylistic assets. However, this proved to be untidy and complex, leading to the creation of CSS, which could be written in a separate document and simply linked to the main HTML document.
The early days of CSS was pretty rough looking back on it. The iconic box models which wrapped html documents provided an easy to understand and adaptable system which widened the ability to create webpages. While they look dated now, we can still see the influence of the box models in todays webpages, just without the strong borders and divisions. I found the BBC News homepage to be great example of the evolution of CSS. The old page features extremely strong lines and boxes to break up text, while the new page feature very few hard lines, but the structure stays largely similar. Again, in apple.com we see the grid based box structure being used in the old page, however unlike the BBC page, the new page is lot less similar, using a much more flowing and modern approach. I find it really interesting seeing how webpages have developed stylistically. Looking back at the old style pages it’s funny to see how far we’ve come from the clutters and tight pages of early CSS. It makes me appreciate the design styles of todays webpages even more.
I began exploring using HTML and CSS by taking a piece of copy and marking it up in HTML. While it was tricky at first I began to get faster at marking up and more confident at it. I initially thought that classifying different parts of text under the same tag would limit me stylistically, however I realised that using HTML in this way allows for consistent styling which makes webpages look really elegant and neat. This was a really valuable exercise and allowed me to grasp the basics of using HTML to markup and create links and nav bars.
<aside> 1️⃣ Version 1 https://nwestondesign.github.io/baskerville/baskerville-1.html
</aside>
After finishing the HTML markup, I began to experiment using CSS to style the document. I definitely found it hard to use rem at first to provide measurements, due to it being a relative system, however I can see the usefulness of it as it keeps the sizing consistent from screen to screen. I think it’s been really useful for me having looked at typography for screen in week 5, as the knowledge of how typography should be displayed on a screen has made it easier for me to realise what CSS I need to write to achieve a certain look.