If you’re new to web development it may feel like the more experienced developers know everything about CSS, but the truth is that everyone needs a great cheat sheet and some online resources. Here we’ve compiled a resource sheet with information about what CSS is, how it’s used, why it’s important to web developers, and a practical CSS cheat sheet you can refer to as you work.
CSS basics
CSS stands for Cascading Style Sheets. CSS and HTML work together to create what you see online, because HTML documents need something to define and format them. CSS is a style language that does that, covering advanced positions, background images, colors, fonts, height, lines, margins, width, and much more. When it comes to adding layout to websites, CSS is more sophisticated, accurate, and versatile than HTML by itself.
How CSS works
CSS lets you apply whatever style attributes you want to a website, whether you’ve defined them in a stylesheet or locally, by overriding the default tag interpretation settings of the browser. This lets you apply your redefined HTML elements, element tags, and attributes easily.
Rules, made up of declarations that define how to apply styles and selectors, are listed in stylesheets. A selector connects the style and the HTML document. Selectors include attributes (ID names and class names) and types (redefined HTML elements).
There are two parts to each CSS declaration: a property and a value. So for example, the property of a declaration might be “font-size,” and the corresponding value might be “twelve.”
A typical rule with two declarations is written with this syntax:
selector {property 1:value 1; property 2:value 2}
P {font-size:12pt; color:black}
CSS is easy to use because small variations with extra semi-colons, linebreaks, and whitespace don’t hurt your results or confuse it. This means you can format it to make it easier for you to read or to make bigger files more manageable. You can also separate multiple elements with commas to apply the same style rules to them at the same time:
H1, H2, H3, H4 {font-size:12pt; color:black}
Why CSS is important to web developers
CSS makes your life easier because back when you could only use HTML to add format and layout to the structured text, various browser producers created new HTML tags like to meet this demand. Unfortunately, this led to the misuse of structure tags as layout tags. Confusion also spread as different layout tags were created by different browsers and were not supported by other platforms.
CSS was created to solve this problem, offering universally supported layout opportunities. CSS also meant the separation of the content and presentation style of documents, making site maintenance far simpler. CSS benefits include:
· Ability to adjust layout for different types of media such as print and screen
· Ability to use a single stylesheet to control the layout of multiple documents
· Many sophisticated techniques for modifying layout
· More precise control of layout
Cheat sheet for practical CSS
Here are some of the more important cheats for everyday CSS users:
Text cheats
font-family: font used, Arial, Helvetica
font-size: text size, 5em, 60px
color: text color
font-weight: bold or regular
font-style: text style, italic or regular
Selectors
div: all DIV tabs
div, span: all DIV tabs and all SPAN tags
div span: all SPAN tabs inside DIVs
div > span: all SPANs one level deep in a DIV
Other
border: sets border style for all borders, whether solid, dashed, colored, etc.
position: places elements on screen
float: stacks elements horizontally
See the complete cheat sheet here: http://www.pxleyes.com/blog/2010/03/most-practical-css-cheat-sheet-yet/
Conclusion
CSS is an absolutely essential tool for every web developer. It revolutionized the way websites are created, and made the process far easier. It also put an end to the annoying problem of sites that could not be universally read by any browser. Make sure you’re ready to work with CSS and have a useful cheat sheet on hand as you learn.