What is CSS and why should I learn it?

The role that CSS plays on the internet is nearly as important as HTML. While HTML is probably the most important thing on the internet, without CSS, much of the internet would be in plain text on a white background. It brings with it the colour and much of the excitement that we see on the internet. 

What does CSS stand for?

CSS stands for Cascading Style Sheets.

What is CSS? 

CSS is what adds style and colour to every webpage. When we talk about style, we’re talking about some of the basic, yet extremely important things like fonts, font sizes, background and text colours. When we spoke about HTML, we compared it to the human form. HTML is the head and the body. CSS would be the style of that. For example, the colour of our eyes, the size of our ears, the pigment of our skin, and even the clothes that we wear. In other words – it’s our look and style. To offer some perspective, Javascript would be the equivalent of how we interact with people. How we talk, shake hands, wink, nod our heads, etc. 

CSS defines, amongst other things, the colour, size and position of text and other HTML elements while the HTML elements themselves define the page content and how it is structured a cascading style sheet is made up of rules. 

What is a CSS file?

A Cascading Style Sheet file is an extension that formats our web pages. Different files give different styles to elements on our sites and applications. A CSS file can be like a template that holds customised properties for how to style the HTML elements of a website. 

CSS files are used by designers to maintain a similar style throughout an entire website. The file stores the properties for each page of the site within one place. This is incredibly useful when you are designing or redesigning a website because it means that you do not have to individually style each page.

You can quickly and easily target one, some, or all, specified elements on a single page or even all pages on the site.

With it, you can target the elements you want potentially from a single location. If you make any changes, they will then proliferate out to the page or pages. If you need to edit the style, you can do so from a single location and the targeted elements immediately reflect that change. Interestingly, you can also apply different styles depending on the device on which your content is to be viewed. You might reduce the dimensions of elements for viewing on a smartphone, then increase them when viewed on say a laptop or a desktop.

CSS Selector

A CSS Selector is what we use to target HTML on our web pages that we intend on styling. A Selector is part of a CSS Rule.

CSS rule

A CSS rule is made up of one or more selectors and a semicolon-separated list of declarations inside brackets. Each declaration has a property and the value separated by a colon. A rule is made up of one or more selectors. In the example below, the selector is a paragraph element represented by the letter P this means that the rule will apply to all paragraphs. This declaration states that the text colour inside a paragraph will be teal. Note the spelling of “color”.

CSS Rule

External, Internal & Inline

As mentioned before, CSS can determine things like colours, fonts, borders, etc, that feature on a page. It can be used in three ways – Inline, Internal and External. Here’s the difference between the three. 

  • What is External CSS?
    External style sheets are very useful, especially when you want to maintain one style through an entire site. The style rules need to be created just once and they are applied to all required pages within a site. If you need to change the style slightly on all pages that use this external sheet, then it just needs to be changed once and it automatically applies to all pages – which is handy! In general, this is the standard way of using CSS.
  • What is Internal CSS?
    This applies to just the page that you are working on. This can be used if a unique style is required for one page of your web app.
  • What is Inline CSS?
    Inline CSS, which I will be using in the example below, relates to a specific page element. In the example below, we use CSS to turn a heading to the colour red on a page. You’ll notice that the order is embedded within HTML text – which is how it is written. (To highlight the CSS in the example below, I have put it in italics – this is to highlight its function for you). However, Inline CSS is only used where you want to apply a unique style to one element.

<!DOCTYPE html>
 <html> 
 <body> 
 <h2 style="color:red;">This is a Red Heading</h2> 
 </body> 
 </html>

The front-end of the code above will eventually look like this:

This is a Red Heading

Business

Cascading Style Sheets are hugely important to business today. Imagine a website without it. We’d be looking at just text with no style. Just like HTML, CSS is a hugely important and sought-after skill in today’s world. Look at any job site and you will see how in-demand it is.  As a result, wise new coders are learning it.

Where can I learn CSS?

There are many resources available that can teach you CSS. Code Institute teaches it as part our Full-Stack Development with Specializations programme. If you want to learn some of the basics for free, then try our free 5 Day Coding Challenge. After just one hour a day for five days, you will have built your first-ever web page. Register today through the form below and take your first steps in becoming a coder

Relational Databases

Databases, in combination with a Database Management System (DBMS), allow persistent storage, easy administration, and safe manipulation of information and are therefore among the most important computer applications. Data in a database is structured according to one of the multiple sets of rules. Proposed in 1970 by E.F. Codd, the relational data model is the […]

Best Way To Make Time To Study

Learning is a continuous process. Learning something new is never too late or too early, and when it comes to programming, the process of learning is simply endless. Every now and then, something new emerges in the tech sector, and to be the perfect programmer, you must be well-versed in the most recent concepts and […]

Python Cheat Sheet

Python is one of the most popular programming languages. It currently takes first place both in the Tiobe index and the PYPL index and has been named Language of the Year in 2007, 2010, 2018, 2020, and 2021. This popularity stems both from Python’s versatility and ease of use. Python can be used for Web […]