Beautifying Websites with CSS: Cascading Style Sheets

At the time of this writing, there was this poll conducted in the Sunday time wherein it concluded that artists were not deemed as an essential service. Some has even gone to say that without artist, entertainment steams such as Netflix, Youtube, Spotify and many others wouldn’t exist. This is true however on these online platform there is an overlooked aspect which is extremely important and often taken for granted and its comes from CSS (Cascading Style Sheets). Today we will be discussing about CSS; How it is used in conjunction with HTML to format and beautify website that we enjoy today. I will give my views that was mentioned earlier with regards to artists at the end of this blog.

Buzzword of the day

From my previous post; Front-end was mentioned several times and term used was UI and UX (User Interface and User Experience ). From a surface level perspective, this two terms could be used interchangeably but there is a clear definition. Simply put “UX is an umbrella that comprises of many subsets, which one of them is UI. Whatever your UI is will ultimately affect your UX.”. therefore, the UI component is the actual building blocks of a website or an application.

So what is UI then? UI is anything that contributes to the end experience of a user. This can be the font being used which decides the readability of the words, complimentary colour palette used within the webpage/app or even the layout/type of buttons used deeply affects the UX.

These small collective elements are so essential and compounding that when you visit/use a webpage/app with bad UI you will immediately notice it and in my eyes it is very artistic in nature. Hence without talented UI/UX developers, iconic websites and services would not have been noticeable at an instant.

See the vast impact that CSS has on a webpage! With that in mind, lets dive into some CSS basics to see how it interacts with HTML.

Basic Structure of CSS

Similar to HTML, CSS follows a ruleset which can be seen in the snippet below.

If you want to apply the CSS code to multiple tag it is as simple adding multiple tags in the selector (E.g h1,p,li). This means the styling from line 11-14 will be applied to <h1>, <p> and <li> tags in the link HTML file.

Then comes the question of unique areas of the HTML page that needs special attention? What if I want a particular <p></p> tag to be blue and the others <p></p> tag to be pink? With that you’ll need to use different element selectors. The common additional selector are called ID selectors (denoted by a “#”) and Class selector (denoted by a “.”). Lets see this in action the in following code snippet.

All in all there are many combinations of styles that one can use to beautify their websites and whatever that was discussed is just the tip of the iceberg and we have yet truly harness the power of CSS. What makes CSS powerful is that it enables web developers to create responsive websites with different layouts. This will be discussed in the next instalment of the blog. With that I hope to see you soon. Thanks and Bye!