What is CSS? An Introduction to Cascading Style Sheets
CSS (cascading style sheets) is a style sheet language. It is similar to a programming language, except instead of telling a computer what to do, it tells a web browser how to display elements on a website. We use CSS to manipulate the styles of elements on a webpage. Make this button purple and give it rounded corners. Make the navbar twice as thick and give it a black background color.
HTML: You cannot use CSS without a markup language
Because CSS only describes style, you cannot “see” CSS on its own, without attaching it to a corresponding markup language.
CSS can be used with HTML, XHML, XML, and other XML-based markup languages. HTML is by far the most commonly used. Markup languages use plain text, images, video, and other media, and tag them as distinct content elements — a title, a paragraph, a list, etc. From here on in, we’ll use HTML instead of the term markup language, but remember that other markup languages exist.
In the wonderful world of grammar, adjectives like fluffy, shiny, tiny, bumpy, etc. are meaningless on their own. They need to be paired with a noun that they describe: the fluffy lamb, a tiny marmoset, etc. The relationship between HTML and CSS is similar.
We write HTML to define the structure or “nouns” of a webpage: I want an image and two paragraphs of text. Then we use CSS to describe the styles of those HTML elements: Make the image huge. Make the paragraphs bold and magenta. Without those HTML elements, we don’t have anything to style with CSS! Without CSS, our HTML elements look completely unstyled and generic.
An example of HTML with CSS
For example, this snippet of HTML <h1>My heading</h1> results in a plain, boring level one heading element. You can see the rendering result in the image below. In HTML, elements are bound between <> and </> tags. If you are completely new to HTML, you’ll want to gain some familiarity with it before continuing on with CSS.
The above heading element has no custom styles assigned, so the browser simply renders it using some default styles. We can change that using CSS!
There are really two steps to writing CSS
- Selecting a set of HTML elements to style
- Applying particular style declarations
For example, take the following CSS:
The first line selects all h1’s on the webpage. There are many, many ways of selecting different sets of elements in CSS. Now that we’ve selected the elements, we can move on to styling them. Line 2 sets the text color of all h1 elements to be purple. The end result is this beautiful purple heading element:
Here’s a more complex example of a complete webpage. Check out this codepen which only contains HTML and no CSS:
Top courses in CSS
Now, here is a codepen with the same underlying HTML and CSS. The CSS makes a huge impact!
What is CSS? Facts and figures
Original release date: December 17, 1996
Current version: CSS4 (released March 24, 2017)
Browser support: Edge, Firefox, Chrome, Safari, Opera, and pretty much any other web browser you can think of, including mobile browsers! For the most up-to-date CSS properties, remember to update your browser and check it using updated CSS elements to ensure the new elements work.
Most popular CSS editor: VSCode (free and on Windows, Linux, Mac)
The current number of websites running CSS: Usage statistics from W3 Techs show that 95.4% of all websites incorporate CSS as a site element.
The three types of CSS
External CSS refers to having a CSS document (aka file) separate from its associated HTML document. CSS files will have a .css extension; an HTML file will have a .html extension.
It’s good practice to separate CSS from HTML files. This way, you can reuse the same stylings (or tweak them) for new HTML documents, which gives the same style across all pages of a website (or a new website). With an external CSS file, it’s also easy to update the style as needed.
Internal CSS involves inserting your CSS code into the HTML page itself, in the document’s header.
The CSS code will be bounded by the HTML <head><style> </style></head> tags.
You can also insert CSS directly into an HTML element within the HTML document. This is also known as inline styles.
For example, <p style=”color: red;”>My paragraph</p> would show a red paragraph, as p describes a paragraph, and within the p tags is the text of the paragraph. Notice that you don’t need to use an end style tag here.
Developing for the web with CSS
Is there a drag and drop CSS editor?
Is CSS necessary for learning backend development?
How can I see a website’s CSS code?
The easiest way to do this is by using Chrome. Click the three vertical dots to show your menu, go to More Tools, then Developer Tools. This will open the code for the site. You will see the HTML (the document written in a markup language), then, to the left, under Style, the CSS code for elements. In the latest version of Chrome, you can even toggle on and off CSS styling to see how it affects the webpage. Another option is to right-click on a webpage and select inspect to open up the Chrome Inspector, which allows you to view and manipulate the underlying CSS on a webpage.