What is CSS?

What is Cascading Style Sheets?

Updated: November 3, 2018
By: RSH Web Editorial Staff
blogs

Blog Categories

Cascading Style Sheets

CSS provide a central location in which information about what colors, background colors, italicization various fonts, foreground colors and emphasization 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 JavaScript 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 webpage 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 webpage. 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


Tweet  Share  Pin  Tumble  Email

1997 - 2019  |  RSH Web Services  |  All Rights Reserved.