What is CSS - Web development basics

Before we dive into what is CSS, you should take a look at what is HTML. You should also know that HTML, CSS and JavaScript are the three pillars of Web development. In fact, if you want to cover the basich or learn web development, you should know how these three languages correlate.

In short, CSS is a language that describes the style of a web site. CSS stands for Cascading Style Sheets. We use this language to determine how elements of our website are shown. 

It is responsible for that first impression you have when you visit a website for the first time. From a website users perspective, it is what makes you love or hate an individual website.  

From a developer's perspective or a designer’s perspective, it’s a language that you can learn quickly, but you can never master. :)

 

History of CSS

CSS level one came into play in December 1996. But the saga began in 1990. :)  If you read our article on what is HTML, you know that the Web was born at CERN. And of course as one of the holy trinity, so was CSS. 

In 1990 when Tim Berners-Lee’s HTML was already a huge thing, there was already a need for styling sheets. At this point, the styling was left to web browsers, and so each web browser had its own style sheet. What this means is that a single HTML document was styled differently depending on what browser you used. For example, the NeXT browser developed by sir Tim Berners-Lee displayed HTML document differently than the Viola browser developed by Pei-Yuan Wei. In fact, the saga continued for years with major web browsers like NCSA Mosaic and Netscape creating separate stylings.

 

Håkon Wium Lie

Håkon Wium Lie proposed CSS for the first time on October 10, 1994. But it wasn’t until 1996 when Microsoft announced that Internet Explorer would incorporate CSS into its new browser version. Of course, IE didn’t support all of the properties of CSS, for example, boxes. A couple of months later Netscape came out with its new version of the Netscape Navigator, which supported even more properties.

There was a huge rivalry of which browser would have more CSS properties. In 1998 Opera came to the scene and it was so impressive that Håkon Wium Lie joined the team as its CTO.

To make a very very long story short, I have to tell you that the saga continues on today and in my opinion it is going to be endless as CSS is evolving on a daily basis. For a more detailed look into the history of CSS, you should look at this great article called “A brief history of CSS until 2016”.

 

How to use CSS

We know three ways of how to use CSS with HTML, and that is internal, inline and of course, external.

 

Internal

To use style sheet directly in an HTML document all we have to do is define the styles with the style tag in the head of our HTML file. Take a look at the example below:

 

 

Typically this is the best practice when you are creating a simple single-page website that will not have a lot of styling. 

 

External

In this case, you create a separate CSS file. This is the most common use as it allows you to use the same CSS file on your whole website. Moreover, it helps you to change and monitor styles across your whole website easily. In the HTML file you have to make the connection with the CSS file in the head (view example below)

Inline

Inline styles our very useful for small changes to a single and exact html element. The CSS code is written directly into an HTML tag and applies only to that part. See example below:

This is how CSS looks like if you use it inline </p>.

 

What is a CSS property and property value

The best way of describing what is CSS is with an example. So below you have a piece of code that will select all our paragraphs in our HTML document and turn the font size to 20 pixels. 

 

As you can see, the code starts with a selector in our case p (paragraph), we will talk about selectors a bit further along the way. For now, let us focus on the declaration.

The declaration consists of the property and the property value. Properties are different ways you give style to an HTML element in our case Font size for all paragraphs ( p ). How many different properties are there? Unfortunately or should I rather say luckily the list is continuously growing. One of my favourite sources is CSS Almanac. Knowing them all is therefore impossible, I always tell our students to learn the popular ones that you can use in everyday projects.

Consequently, the same goes for property values. These values are always written after the colon and give you the possibility of many appearances for a certain property; in our case, it is 20 pixels. 

CSS selectors

When we talk about what is CSS, we have to take a look at different types of selectors. Selectors help us define or should I say select which part of the website or which element we want to style.

Below is a list of, in my opinion,  the most common types.

 

HTML elements

In the previous example, we used a selector based on an HTML element. Element selector also known as a tag or type selector is used when we want to style a part of our website based on the HTML element or tag. For example h2 selects all the element with a <h2> tag. 

 

ID selector

When using the ID selector, we select all the elements on our website based on the name in the ID attribute. This is actually one of my favourite selectors, it is very handy when I’m developing a simple website because I can use the same ID name in CSS and JavaScript. In CSS, before you write the name of the ID, you have to use a dash (#). For example #nav will select all the elements that contain id=”nav” for instance <div id=”nav”> or <p id=”nav”> .

 

Class selector

If your asking yourself what is CSS, you must have heard about CSS classes. With this selector, we give it certain properties which we then assign to different element on our website. Moreover, when using the class selector, we can assign one class to multiple elements. When you start off with web development, it is important that you know that in the CSS file you have to use a dot before the name of the class and when using that class in an HTML or JS file you do not use a dot. Look at the example below:

And in the HTML file:

 and 

 

Pseudo-classes like :hoover or : active

As we all know some elements on a website can have different states and each state can have a different style. This is where pseudo-classes come in; we use them to assign properties to elements in different states. For example, the style of a button changes when we hover over it with our mouse pointer or when we click the button. The same goes for links, take a look at the example below:

 

 

What is CSS 3

CSS 3 is the last variation, or should I say level. Since 2018 it has been fully specified. By and large, it is supported by all major browsers and, if you are a web developer or designer, you have to know what are some of the cool new features. 

Of course, we cannot list all of the features as the list is too long. In short, you have some small new features like rounded corners, text-shadow, box-shadow,...  Because this is a short article on what is CSS let me point out, in my opinion, the three coolest features/techniques. 

 

Advanced selectors

In short CSS 3 introduced a lot of new pseudo-classes. Specifically these new pseudo classes target elements of our websites based on their position in the document. For example:

• :root 
• :only-child 
• :empty 
• :nth-child(n)
• :first-of-type 
• :last-of-type 
• :only-of-type 
• :first-child 
• :last-child

 

Animations

When we talk about what is CSS 3 we have to mention animations. Before CSS 3 came along animations were the domain of JavaScript and Flash. Generally speaking, you can now use CSS to do that. Put in simple words; you can change the style or should I say CSS properties of an element, from one to another as many times as you want. 

 

Media Queries

Since the introduction of mobile devices, this was the most needed CSS feature. In fact, when we talk about responsive web design, we talk about Media queries. In brief, this introduced the @media rule, which assigns properties to elements under certain conditions. For example, if the browser screen size is smaller than 700 px, the font size should change:

 

 

CSS Libraries and Frameworks

Usually here at CodeBrainer, when l talk to newbies and when I am asked about what is CSS, I almost always get a follow-up question about what is Bootstrap. 

Bootstrap is a CSS framework. Frameworks like libraries exist to make our lives easier. In a word, they are time-savers. CSS framework and libraries contain features that we can use and don’t have to code from the ground up. For example, they already have useful animations that we only have to adjust to our needs; they have stylings for buttons, forms, tables… 

These functionalities are expanded by JavaScript functions that help us develop a better User Interface. And remember not only are frameworks like libraries useful, but they are also educational. The more you use them, the more you learn about CSS.

 

In conclusion

In the light of everything that has been made possible with CSS, we still have plenty to look forward to. CSS 4 is already being drafted, and new properties are being introduced almost on a daily basis. 

What is CSS and what is its future would be like asking what the limit to our imagination is? Write to us or leave a comment if there is anything you would ad.