gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

CSS.md (#28609)

Browse Source 
* CSS.md

Add sample codes and more information about CSS

* update CSS.md

Typo mistakes corrected
This commit is contained in:
Aathil Ahamed
2018-12-09 21:21:06 +05:30
committed by Tom
parent eeb66d2c4e
commit 9ae9e9c0d7
1 changed files with 34 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
guide/english/css/index.md
View File

@ -2,23 +2,54 @@
title: Cascading Style Sheets (CSS)
---
# Cascading Style Sheets (CSS)
![CSS Logo](https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/320px-CSS3_logo_and_wordmark.svg.png)
## 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:
1) Internal CSS
2) External CSS
3) Inline CSS
External CSS files save with extension of .css.
CSS specifications are maintained by the [World Wide Web Consortium (W3C)](https://www.w3.org/).
You can build some pretty amazing things in CSS alone, such as this pure-CSS [Minesweeper game](https://codepen.io/bali_balo/pen/BLJONk) (which uses no JavaScript).
![Minesweeper clone in CSS](https://cdn-images-1.medium.com/max/800/1*GFcKk9KxqHAnWa1ECcKDOQ.png)
### 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:
```html
<!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.
Some of the most popular CSS Frameworks are:
Bootstrap, Foundation, Bulma, uikit, Semantic UI, mini.css, Materialize, Material Design Lite, Spectre, Kube, and tailwind.css
## Suggested Reading:
### Suggested Reading:
A good start is the freeCodeCamp curriculum [Introduction to Basic CSS](https://learn.freecodecamp.org/responsive-web-design/basic-css).
Another suggestion for beginners is W3C's [Starting with HTML + CSS](https://www.w3.org/Style/Examples/011/firstcss) teaches how to create a style sheet.