So what is CSS? If you are just entering the web development field, you will undoubtedly have come across CSS by now. Cascading Style Sheets or CSS is a design language used to design a website’s look. It is a design language that specifies how documents are styled, presented, and laid out to the user.
The structure and skeleton of a website are made of text files coded in a markup language like HTML. Internet browsers like Chrome and Firefox understand these languages and are designed to visually present these documents to the user.
In the early days of the internet, all websites were made with just HTML. There was nothing to style a website’s appearance. Thanks to CSS, modern websites have an appealing look and feel. Otherwise, websites would look bland and dull if designed without CSS, and nobody would get any joy from using them.
Some quick facts about CSS.
- Not a programming language – Some people mistake CSS for being a programming language. This isn’t actually the case. CSS is a set of rules for styling your web HTML to provide a website’s structure and style information.
- CSS is an easy thing to learn, although it can be challenging. There will be times when everything comes together and works fine, and others that are very frustrating.
- Before CSS, designers used the HTML <Table> element to create the layout of their pages.
- HTML Semantic Tags – You can use the HTML Semantic Tags to design and organize your element and class structure.
So How Long Has CSS Been Around?
CSS was made by HÃ¥kon Wium Lie to allow website designers to change the layout of their websites, including fonts, colors, etc. HÃ¥kon was working at CERN when the idea of CSS was proposed to him in 1994.
This was when the internet started to be used as a platform for electronic publishing. But the problem was that there was no way to design the elements in a newspaper format, which would’ve been a better way to publish articles. And having worked on personalized newspaper presentations at MIT Media Laboratory, he saw the need to design it.
The first version of CSS was invented in 1996. In 1998, CSS 2 was released, and the work on CSS 3 began. CSS 3 was very different from other versions because it was published as modules instead of single monolithic specifications. 2011 saw the release of CSS 2.1, which improved CSS 2 and fixed its errors.
Today, most web browsers implement CSS3, which is easier to use, has better graphics, is economical, and is time-saving.
What Does CSS Do?
Modern-day websites contain three fundamental files; HTML, Javascript, and CSS. Sure, there may be endless frameworks like React, Angular, and Vue, but the basic building blocks of the web remain the same.
HTML defines the website’s basic structure and where each element goes. There is some basic built-in styling. For example, headings will look bigger than regular text, and links will be colored and underlined to make them stand out from regular text.
Javascript defines the behavior of those elements and makes things interactive, like how the elements respond when you hover over them or click on them, etc.
CSS defines the appearance and style of those elements. You can specify exactly how you want to design your markup language (HTML) using CSS. It gives the website a stylish and attractive look and can even be used to make certain kinds of animations. Additionally, you can use many CSS frameworks, like Foundation, Bootstrap, and Tailwind CSS.
Types of CSS
There are three ways you can implement CSS on your web page, each with its pros and cons.
- Inline CSS
- Internal or Embedded CSS
- External CSS
Inline CSS
Using the CSS properties inside the body section of your HTML file attached with an element is called Inline CSS. It is specified within an HTML tag using the style attribute:
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style = "color:#009900; font-size:50px;
font-style:italic; text-align:center;">
This element is styled with inline CSS
</p>
</body>
</html>While not the best way to implement CSS, it is still worth knowing about Inline styling. The main reason to avoid using inline CSS is that it doesn’t separate content from design. It also makes your code messy and harder to maintain.
Internal or Embedded CSS
Internal CSS is used when a single HTML page needs to be stylized. The Internal CSS rules must be defined within the <head> section of an HTML page with the <style> tag. You must target each element with a class name just like you would with external CSS. For example:
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
<style>
.my-element {
color:#009900;
font-size:50px;
font-style:italic;
text-align:center;
</head>
<body>
<p class="my-element">
This element is styled with inline CSS
</p>
</body>
</html>Though internal CSS is better than inline CSS, there are still some limitations. The main issue is that you will still end up writing more code since the styles will only work on one page. If you use internal CSS, you have to rewrite the styles for each page you create, adding up to lots of wasted time on larger projects. For smaller projects that are only a single page, you could get away with using internal CSS.
External CSS
External CSS is when the CSS rules are not written inside the HTML file; instead, a separate CSS file is created, which contains all the style properties in one place. The file is made with the .css extension and has to be linked with the HTML document using the <link> tag:
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="my-element">
This element is styled with inline CSS
</p>
</body>
</html>This means all styling properties need to be defined just once and can be added to all pages just by adding the tag. As you can imagine, this method saves a lot of time, especially on larger projects.
How to Learn CSS?
If you’re just getting into web development, an early step on your journey should be CSS. You won’t get far with learning if you try to take shortcuts like skipping right to a framework, either. Sure, tools like Bootstrap and Tailwind make it easier to build your website, but you should understand how the CSS works behind the scenes first.
CSS is easy to learn, and there are some things you can do to learn it effectively.
- Learn HTML – CSS is closely related to HTML and builds upon the language. So, you must learn and practice HTML first and ensure you are proficient enough before moving on. It is the foundation on which you build a website, so it helps to start strong.
- Know the basics first – Make sure you know all the essential things in CSS first, such as Inline CSS, External CSS, and Embedded CSS. As well as how to use <div id> and <div class>.
- You don’t need to memorize the syntax, but having at least the primary CSS attributes at your fingertips is essential, so you don’t have to err when customizing a webpage in CSS.
- Learn and Build – An excellent way to learn and improve CSS is to build your own websites. Practice building many websites to learn the ins and outs of it. You can also leverage multiple resources such as books, tutorials, and courses to increase your expertise in CSS.
Frequently Asked Questions
What does CSS stand for?
CSS stands for Cascade Style Sheets and is used to design the look and feel of a website.
Will CSS ever be replaced?
No, at least not in the foreseeable future, since HTML and CSS are the only ways of styling a website’s content.
Is CSS hard to learn?
CSS has a reputation for being simple and easy to learn. It is simple to pick up the basics and become proficient with a little practice.
What is the best type of CSS?
External CSS is the best way to do CSS since it allows you to easily change the style and format of all webpages attached by editing just one file.
Great Websites to Learn CSS
If you want to get into web development as a career, learning CSS should be one of the first steps. Luckily, there are plenty of free resources on the internet to help you out.
Here are some of my favorite websites for learning CSS, that helped me out when I was first starting:
- w3schools
- freecodecamp
- css-tricks
- mdn web docs
YouTube also has plenty of teachers, happily sharing their craft free of charge. Have a look at the video below if you want to see us put some basic CSS into action while building a restaurant landing page:
