ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

HTML Companion : CSS

Updated on February 23, 2018
Lalit Bunkar profile image

Lalit Kumar is a software developer and programmer and has been developing websites and softwares since 2008.

What is Cascading Style Sheet or CSS ?

CSS is used to manage the structure and style of a HTML web page in an easy and efficient manner.

CSS or "Cascading Style Sheets" handles the presenation part of a HTML web page. Using CSS, you can manage the color, font style, margins & paddings, size and structure of rows and column, background image or color definition, structure of web page,managing and formatting layout for different devices as per screen size of the device and many more effects.

CSS is very easy to understand and it provides powerful mean in displaying HTML web page. You can control multiple web pages even your complete website just by one stylesheet. You can make changes easily in your presentation by minimal changes in your stylesheet and changes will be consistent throughout your website.

Mastering Cascading Style Sheets takes time and you need to take steps one by one. You can start with how to use selector and can learn about simple properties like color, font-style, font-size and use it in your projects.

CSS Definition !!!

You can use inline or embedded approach to define the CSS rules. These approaches are not efficient and should not be used until its absolutely necessary.

The CSS style definitions written in external .css files can be used and included in HTML tag. This is best and most used approach to work with CSS. You can manage the look and feel of entire website just by changing this CSS file.

Features & Advantages

  • Time saving − You can write all display related rules in CSS and can use this CSS in all of your projects or web pages. It will save a lot of time even if you want to change something in all of your pages, you will have to do it only in one file.
  • Easy to maintain − If you want to change the look and feel of your web page, you can control it from a single file.
  • Lots of options − It has a many more option and attributes than HTML, so you can define a much prettier look to your web page in comparison to HTML attributes.
  • Adaptable Screen Size − You can handle all type of screen sizes by CSS. So your web page will not get distorted and small screen size like mobiles.
  • Respecting web standards − Since W3C and most of the web developers already set standard to use CSS instead of HTML tags for presentation, we should go with standard global recommendations.
  • Browser independent − The style sheets attributes works almost on all browsers.

Who Maintains CSS?

CSS Working Group at W3C maintains the CSS standard. This group creates in specification documents for CSS. When a specification gets released, it becomes a recommendation. Recommendation works as guideline or rule for web developers which make it essential for them to work according to these rules.

CSS definition in web page..

We can include CSS in web page in following possible ways..

  • Inline Style : Inline style can be defined within starting tag of HTML element with "style" attribute.
  • Inpage Style : We can define CSS styles within "<style>" and "</style>" in <head> of the HTML web page.
  • External Style Sheet : We can define all the rules in external stylesheet and include it by using <link> tag in <head> element of web page.

CSS Versions

Version
Release Date
 
CSS 1
December 1996
 
CSS 2
May 1998
 
CSS 3
June 1999
 

A CSS Style Rule

1. Selector − HTML tag on which style has to be applied.

2. Property - Property of HTML element to change like color, font, size.

3. Value - Value of that property like for color 'red', 'green' or for font size pixel size.

More to know...

  • You can define multiple external CSS file for different screen sizes and can include them all in web page.
  • Inline styles have highest priority. Inpage comes on second number priority and external stylesheets gets the lowest priority.
  • You can define multiple stylesheets and can put a mechanism together to let user choose stylesheet to use for their display.

CSS3 Modules

CSS3 Modules are having old CSS specifications as well as extension features.

  • Selectors
  • Box Model
  • Backgrounds and Borders
  • Image Values and Replaced Content
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • User Interface

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    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)