CSS

Cascading Style Sheets. The look and feel of a webpage.

This webpage is styled using bootstrap and 30+ custom CSS entries.


Custom CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
p {
  padding-left: 2px;
  padding-right: 2px
}

body {
  background-color: #252839;
  padding-top: 70px;
  padding-bottom: 45px
}

.text-info {
  text-align: right
}

footer {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  height: 55px;
  background-color: #252839
}

Enable / Disable CSS:

Click the buttons below to preview this page with some of the main CSS elements changed.

It is a bit of a shock to see how different the webpage becomes without a few important CSS entires.

There are hundreds of CSS properties that control font sizes, backgrounds, margins, padding, etc. Without CSS it is difficult to style a website.

CSS can be applied 'inline' directly on HTML elements, however it is usually more efficient to use an external CSS file to style multiple elements at once using Classes.


Preprocessors:

CSS preprocessors such as SASS allow web developers to easily manage styles programmatically. SASS need to be compiled into standard CSS for a browser to interpret. This can be done with command line programs like Webpack and Gulp or graphical programs such as CodeKit.