3.8 KiB
title |
---|
Cascading Style Sheets (CSS) |
Cascading Style Sheets (CSS)
CSS stands for Cascading Style Sheets. It is a language used for describing the style of a document written in HTML. It was designed to enable the separation of presentation and content, which greatly improved content accessibility and gave more flexibility and control in the specification of presentation, and reduced complexity and repetition in the structural content. It was first invented in 1996, and is now a standard feature of all major web browsers. The newest version of CSS is CSS3, which builds upon CSS2.1 and adds more visual functionalities, ready for the modern world.
We can describe CSS in three ways:
- Internal CSS
- External CSS
- Inline CSS
External CSS files save with extension of .css.
CSS specifications are maintained by the World Wide Web Consortium (W3C).
You can build some pretty amazing things in CSS alone, such as this pure-CSS Minesweeper game (which uses no JavaScript).
Syntax
body { background-color: yellow; }
this is the Syntax of a CSS property.
In here, body
is the selector and says what HTML element we want to style.
background-color
is the property we want to style.
and yellow
is the style we want to give it.
Sample Code:
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: Yellow; }
p { font-size: 18px; }
</style>
</head>
<body>
<p>Welcome to the world of CSS</p>
</body>
</html>
We use the <style>
and </style>
tags to define the CSS in the HTML file.
Popular CSS Frameworks 2018
Frameworks exist to make the more complex parts of css easier and more efficient for developers to build out websites. They also allow the developer to have more flexibility as well as additional features to produce amazing results. Some of the most popular CSS Frameworks are:
Suggested Reading:
- Introduction to Basic CSS by freeCodeCamp: a good place to start!
- Starting with HTML + CSS by W3C: how to create a style sheet - for beginners.
- CSS Zen Garden: a great example of how the same HTML can be styled to look totally unique.
- Jon Duckett's book on HTML and CSS could be an exellent start for the ones who wish to explore the topic to it's great depth with some amazing examples.
- The Odin Project features a full course on using CSS alongside HTML.
- Species In Pieces: for a demonstration of the power of CSS.
- MDN Web Docs for CSS for more resources for developers, BY developers!
- CSS reference.io to help you along the way if you're unsure about a property. A great tool for helping visualize what each CSS property does.
- CSS-Tricks Tips and tricks for working with CSS
- tutorialspoint