ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

What are cascading style sheets (css)?

Updated on March 12, 2016
JanTUB profile image

One of my previous careers, at the same time as I was quilting and running my own website, was as a web designer.

What is css?

Cascading style sheets are special rules that web browsers understand. Known as CSS for short, these rules tell the browser how to display parts of a web page, such as the headings, the links, and the colours for the 'look' of the page. If we still wrote web pages like we did when I started, we would have either really slo-o-ow to load pages or text-heavy pages with little visual impact like those that were common at that time. I used one single image on my first site (left), with colour in the text. The page was laid out using tables, which needed a great deal of code.

What this hub is not

It's NOT a tutorial on using CSS

It IS a few explanations about how styles are called into a page by the browser.

The information here is just to explain to non-designers or fledgling websters what CSS is about, and why web designers need to know how to use it.

Included are some links to excellent sources of CSS tutorials and books for self-education.

(That's how I did it, along with much experimentation.)

How does styling work?

for web pages.

All web pages are composed of words (text) and pictures (images).

While you can change the look of words on a page by highlighting a paragraph and changing the colour to something other than black, and a different size of text, this makes for more code.

Each time you want to change another paragraph to use that same colour you need to do the same thing all over again.

This is called inline styling.

That's how we have to do it here on Squidoo.

Instead, you can write some rules for the way the paragraphs should look and apply those rules to any paragraphs on the page. You put these rules in the code at the top of a web page — the head — and then each time you want to use those rules, you call them up.

This is called embedded styling.

An example of this is where a page has headings throughout, level 1, 2 or 3 down to 6. If the rule you write is for level 2 headings, then each time you make a paragraph as a level 2 heading, even if it is many times over, all of them look the same.

Another way to call upon rules for the styles of your page is to include them in a text file that the page can be linked to instead of writing the styles on the page.

This is called external styling.

All or some of the pages in a website can be linked to the file, making all of them appear similar. Consistent site appearance and layout, but the pages have no extra code for the styling.

And that's what CSS styling is all about.

Source

Where does CSS come in?

A page with no style sheet link

A style sheet is a text file — the file extension is .css — that contains all your style rules for paragraphs, headings, image spacing, link formatting, and much, much more.

The file is kept on your server and any pages that have been linked to it can read the rules and the browser applies the styles.

Browsers have default styles and if for some reason, the style sheet can't be found, or has not been uploaded, or styles are turned off the page will still render.

The picture shows my quilt website with styles turned off. There is much more text not showing in the picture.

Styling makes a difference

Same page linked to a stylesheet

All my website construction uses external CSS, making the pages very 'lightweight' and fast loading.

The picture shows the page as it usually looks, with styles turned on in the browser.

The content is all visible, because I have styled the page to have three columns, and small news items with headings styled with a pale blue background.

How much more user friendly is that than the one above?

No embedded styles

Valid, standards compliant

sites keep the styling

and the content

separate

Why does it matter?

Standards compliance says it's important

If a site visitor has vision impairment, for example, he/she would be using a screen reader. The screen reader doesn't need to see how pretty the page is, just read the content.

What has developed then, is a set of standards for web page construction. Although many persons who make web pages are unaware that standards even exist, professional web designers should be.

Content needs to be separated from the layout, and semantically correct.

Fast loading, content rich pages that are styled by linking to style sheets elsewhere on the server give the best user experience to your site visitors.

Like this hub? Tell us why...

© 2009 Jan T Urquhart Baillie

CSS stylin' - help for laypersons

    0 of 8192 characters used
    Post Comment

    • JanTUB profile imageAUTHOR

      Jan T Urquhart Baillie 

      9 years ago from Australia

      [in reply to Mickie_G] How kind. A hero, yet! I'm honoured, thanks.

    • JanTUB profile imageAUTHOR

      Jan T Urquhart Baillie 

      9 years ago from Australia

      [in reply to CleanerLife] Thanks for the kind words. Glad you liked this stuff.

    • Mickie Gee profile image

      Mickie Goad 

      9 years ago

      You are my hero. Thanks for the information. You have a good future here on Squidoo.

    • profile image

      CleanerLife 

      9 years ago

      Very informative. I think the pictures of your site with the style turned off, then on again really helps to explain why CSS is important!

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)