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
In the above example you will notice that ALL “h1” tags on every page will be the Courier font with size 20pt’s, color is blue. Bottom border solid blue. Similar to our above “Related Posts” paragraph
Next 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
Last just by using the code <span class=”red-text”> </span You can have any word, paragraph or even a whole page red 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 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
CSS Resources
CSS Editors
CSS Reference
CSS Tutorials
Originally published at https://rshweb.com.
