What is CSS?

What is Cascading Style Sheets?

Resources for
Editors, References, Tutorials, Cheat Sheets, Generators

Updated: September 25, 2019
By: RSH Web Editorial Staff
What is CSS

Cascading Style Sheets

CSS provide a central location in which information about what colors, background colors, various font types, foreground colors, spacing should be applied to various HTML elements within a web page or Website. Cascading style sheets can also control how various parts of a page, such as the header, footer, body, article content, sections and asides, are laid out on the page. This is extremely helpful when content must be laid out in a dramatically different fashion depending upon whether it is being viewed on a desktop, tablet or smart-phones

Proper use of CSS

In the early days and development of the World Wide Web, it was common for HTML files to include not only Hypertext Markup Language and content, but formatting information and Java script as well. This made web pages difficult to write, difficult to read, difficult to update and difficult to maintain. As the WWW matured, it became a best practice to divide HTML, scripting content and style information into separate, easy-to-maintain files. And now most modern web pages are typically made up of three separate entities: a Cascading Style Sheet, a JavaScript file and the HTML file itself

Implementing CSS formatting

The cascading nature of CSS files is attributed to the fact that style information for a web page can be defined in any of three different places, also known as style levels. The preferred practice is to put style information in a separate file with a .css extension. Using formatting information contained within an external cascading style sheet is accomplished via the HTML link tag. A webpage can link to zero, one or may different external CSS files by using multiple link tags such as this example:
<link rel="stylesheet" type="text/css" href="what-is-css.css">
However, on smaller projects or in cases where a given web page is interested in overriding some of the style information in an external CSS file, style information can be written within a <style> tag inside the web page. This is known as an internal style level. Internal style level information within a webpage will override any style information provided by an external cascading style sheet

html

In the above image you will notice that ALL "h1" tags on every page will be the Courier font with size 20pt's, color is blue...
Also the "P" tag calls for ALL paragraphs to have the font family as Arial first, size 12pt's and the color to be #6b6bd7 or a "moderate blue-purple" in color

Cascading style rules

All HTML5 tags have a style property that one can use to override any style information defined at either the page style level or in an external style sheet. Using an HTML tag to define CSS information is referred to as an inline style. The fact that style rules dictate that parent-level styles are overridden by page-level styles and page-level styles are overridden by tag-level styles is what is meant by style sheets being cascading

Style sheet language

CSS syntax is relatively simple
The name of the element to style, referred to as the CSS selector, is followed by braces, within which various attributes, such as font-size and background-color are assigned values. The World Wide Web Consortium (W3C) standards organization defines the CSS attributes, although various browsers may offer supplemental support by defining their own custom fields. This is often done for proposed attributes that are expected to be included in future CSS releases

CSS selectors

CSS selectors can be HTML tags, class attributes assigned to HTML tags and even states of a given element, such as the disabled state of an input field or the hover state of an anchor link. Making it possible to customize the style of components depending upon their state or how they are classified on a page provides the graphic designer a great deal of flexibility in determining how a webpage will be rendered by the browser


  CSS Resources

CSS Editors

Notepad++
Notepad++ is perhaps one of the most popular choices among web developers when it comes to free editor applications. It is well suited for Windows audience

PSPad
There are no specific tools for working with CSS or HTML languages. For writing basic code it is a standard text editor that works exceptionally good with plain content

Stylizer
Provides you with a toolset to quickly develop optimized and readable snippets for formatting and styling websites

Rapid CSS Editor
Rapid CSS Editor is intended to streamline and quicken the process of website development. It is suitable for code in HTML, CSS, LESS, JavaScript, SASS, PHP, XML, and some others

CSS Reference

W3C CSS3 Basic User Interface Module
It’s perhaps not the most user friendly reference available, however the official CSS3 specifications from the World Wide Web Consortium lists everything you ever need to know about CSS

HTML Dog CSS Properties
A list of all valid properties of CSS 2.1. Short descriptions, possible values, examples and related properties of each property are all given

Mozilla CSS Reference
An alphabetical list of all CSS properties, pseudo-classes and elements, @-rules, and selectors. The CSS version of each property is listed along with its browser compatibility. It’s well presented and very easy to use

CSS3 Click Chart
Learn dozens of CSS3 tricks by clicking on the property you want to reproduce and viewing the code at the bottom of the page. The browser support for each property, description and link to the World Wide Web Consortium information page are referenced too

Meiert CSS Properties
A CSS property table that is updated regularly. Properties are listed alphabetically and linked to the corresponding W3 information page. The table also details what CSS version the property works with and its initial value

CSS3 Compatibility table
Shows what version of Internet Explorer, FireFox, Opera, Safari and Google Chrome each CSS3 selector works with

Can I Use
Support tables for HTML5, CSS3, etc. A fantastic browser compatibility table that shows you what CSS3 elements are supported on desktop and mobile browsers. It includes a large list of filter options such as browser, version, language and more

CSS Tutorials

CSS Basics
Resource for beginners that will give you a basic understanding of how CSS works. The course is divided into 18 chapters, covering everything from CSS classes to lists and pseudo elements. PDF form

CSS Tricks
Arguably the best CSS blog online, CSS Tricks is a beautifully designed website from developer Chris Coyier that posts new CSS tricks and techniques every few days

456 Berea Street
Don’t let the average design full you, 456 Berea Street is a fantastic resource that has close to 400 CSS tutorials

CSS Tutorial
A tutorial website that is geared towards beginners. It walk beginners step by step through the basics of CSS. It also has over 50 video tutorials and several podcasts too

CSS Cheat Sheets

CSS Cheat Sheet (V2)
One of the best CSS cheat sheets available. It displays a box model and lists of the most popular syntax, properties and units by category. Despite cries from a lot of fans, it has not been updated to from CSS2.1 to CSS3.

Core CSS
A good series of CSS reference cards. Part 1 covers CSS rationale and use, syntax rules, inheritance and more. Part 2 discusses element selectors, ID selectors, descendant selectors, attribute selectors and combining selectors. Part 3 discusses the CSS visual model, box model, problems with floats and positioning

BlueprintCSS Cheat Sheet
A great cheat sheet that users of the BlueprintCSS Framework will find useful. The second page shows a grid for designing layouts, file structures and tools and resources

CSS Generators and Testing

CSS3 Rule Generator
The Cross-Browser CSS3 Rule Generator that changes the elements on the right hand side as you modify the CSS code on the main page as you type. Fantastic!!!

CSS3 Generator
Several different CSS generators in 1. The service allows you to customise text shadows, font faces, columns and more

CSS Color Gradient Generator
A user friendly CSS gradient generator that has dozens of great looking preset gradients. You can choose the direction of the gradient and there is an option to add IE9 support too

CSS Color Extractor
Extract colors from CSS files. Paste, drag or enter the URL to your CSS file. Works with hex, rgb, rgba, hsl, hsla and named colors

CSS-Gradient.com
Easily create your custom linear or radial gradient in HEX or RGBA color format

AngryTools.com
Gradient is combination of two or more colors where transitions between colors are smooth. These gradient is useful for background, banners and buttons

Gradient to Image maker
Create multilayer transparent gradients styles and save png image. Create custom orientation of gradients and arrange them in layers then convert into png file. It also create base 64 image code and css code

CSS Generator
Code generator tool is for create source code for top most useful CSS styling


Tweet  Share  Pin  Tumble  Email

 

1997 -   |  RSH Web Services  |  All Rights Reserved.