top button
Flag Notify
    Connect to us
      Facebook Login
      Site Registration Why to Join

    Get Free Article Updates

Facebook Login
Site Registration

An introduction to CSS

+2 votes
61 views

Introduction to Cascading Style Sheets

A Cascading Style Sheet (CSS) is a rule-based language, which specifies the formatting instructions for the content specified in an HTML page. It purpose is to separate HTML content from its formatting so that web page designers would not worry about the formatting and layout. This is because they can define the layout and formatting of the content in a separate file saved as .css. In the .css file, the formatting instructions for an element are referred to as a rule set. CSS was invented in 1997.

Need of Style Sheets

A style sheet is a collection of rules that specifies the appearance of data in an HTML document. HTML is a markup language that focuses only on the layout of the content on a web page. For example, if you want to change the text in the H2 element to bold, this has to be done manually for all the H2 elements. Such a manual task might result into human errors such as missing an occurrence of the H2 element for applying the bold format. This result in format inconsistency among the H2 elements with an HTML page.

Benefits of css
Code Reusability: CSS saves time by specifying the formatting options of an element only once and applying to multiple HTML pages.

Less HTML Code: CSS helps in reducing the file size of HTML documents by specifying the formatting instructions in another file.

Device Independence: CSS is designed for different devices to provide the same look and feel of the HTML page across them.

 

Working of CSS

You can embed the CSS code within the HTML code or link the HTML file to the CSS file. The browser will locate the style sheet irrespective of its location and will apply it to the HTML page. There are certain steps involved in applying a style sheet to an HTML page. These steps are:

1. The user requests for a web page from the browser using the URL.

2. The server responds with the HTML file and related files such as image files, audio files, and external .css files, if any.

3. The browser executes the CSS code using the rendering engine and applies the styles to the HTML file.

4. Then web page is then displayed in the browser.

The rendering engine is software that applies the formatting instructions to the web page and displays the formatted content on the screen.

CSS Syntax

The general syntax of css consists of three parts namely, selector, property, and value. A selector is an HTML element for which you want to specify the style or the formatting instruction. A property is a css property that specifies the type of the style to be applied to the selector. CSS allows controlling the appearance of the content by providing various properties. These properties include text properties,, positioning properties, font properties, color properties, and so on. A value refers to the value of the CSS property. A CSS property can have multiple values. For example, the values of the color property include red, green, yellow, and so on.

The property and its value of a selector are separated with a colon (:). They are enclosed within the curly brackets ({}) that is known as the declaration block.

Multiple Properties and Selectors

You can various combinations for rules for HTML elements. First, you can specify multiple property-value pairs for a selector, which are separated by a semicolon (;) within the declaration block. Second, you can specify multiple selectors for a single property by grouping the selectors. To group the selectors, the selectors are separated by commas followed by a declaration block of properties and values. Third, you can specify properties for multiple selectors. Here, the comma-separated selectors are followed with multiple property-value pairs.

Length Measurement Units

CSS uses various units of measurements for specifying size of the font, width and height of margins, and so on. These units measure the horizontal and vertical length of the content. CSS supports two types of measurement units namely, relative and absolute.

Relative

Relative length specifies the length units related to other length property.

 em- Specifies the font size (height) of a particular font. The em unit is relative to the value of the font-size property of the selector.

 ex-  Specifies the ‘x-height’ of a particular font. The ‘x-height’ value is approximately half the font size or the height of the lowercase letter ‘x’.

 px-  Specifies the size in pixels, which is relative to the screen of the device.

 

      

Absolute

Absolute lengths are specified when the web page designer is aware of the physical properties of the output device.

 in-   Specifies the size in inches, where 1 inch= 2.54 centimeters. 

cm-  Specifies the size in centimeters.

mm- Specifies the size in millimeters.

pt-    Specifies the size in points, where 1 point= 1/72th of the inch.

pc-   Specifies the size in picas, where 1 pica= 12 points.

Types of Style Sheets

There are three types of style sheets namely, inline, internal, and external style sheets. An inline style sheet uses the style attribute within an HTML element to specify the style for HTML elements.

An internal style sheet is also included within the HTML document. However, it is defined using the STYLE element with the HEAD element. The style rules appear in a declaration block for each HTML element under the STYLE element. The type attribute of the STYLE element specified the content type, which is text/css. This means that the content under the STYLE element is CSS code. You can specify any combinations of specifying style rules. The style rules specified for an element will be applied to all the sub-elements. Internal style sheets are useful when styles are to be applied to a specific web page.

posted May 24, 2017 by Pankaj Singh

  Promote This Article
Facebook Share Button Twitter Share Button Google+ Share Button LinkedIn Share Button Multiple Social Share Button
Well written with graphics.


Related Articles

Selectors refer to the HTML element with the styles you want to apply to them. CSS provides four different types of selectors. These are:

1) Type selector.

2) Class selector.

3) ID selector.

4) Universal selectors.

1) Type selectors: The type selector simply specifies the element name along with the style to be applied to that element.

2) Class Selector:  A class selector matches elements, whose class attributes is set in an HTML page and applies styles to the content of all those elements. For example, if there are SPAN and DIV elements in a web page with their class attributes, the style specified for the class selector will be applied to both the elements.

A class selector is the value of the class attribute preceded by a period (.) and followed by property declarations.

3) ID Selector: An selector matches an element whose id attributes is set in an HTML page and applies styles to the content of that element. The ID selector specifies styles for an element whose id attribute is set to a unique value.

An ID selector starts with the hash symbol (#) followed by the id attribute’s value and the declaration block.

4) Universal Selector: The universal selector represents all the elements within the HTML page. It matches all the elements in the HTML file. This means that it applies the specified applies styles to the content of all the elements. For example, to specify the color of all the content as red, you would specify a universal selector followed by the property declarations.

The asterisk (*) symbol specifies a universal selector within the CSS file.

For more go through this video:

https://www.youtube.com/watch?v=EeZKHmNJipE

 

READ MORE

What is Bootstrap ?

Bootstrap is an open-source Javascript framework developed by the team at Twitter.
It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
Bootstrap was also programmed to support both HTML5 and CSS3.

Also it is called Front-end-framework.

Bootstrap is a free collection of tools for creating a websites and web applications.

It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.

Some Reasons for programmers preferred Bootstrap Framework

  • Easy to get started
  • Great grid system
  • Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons)
  • Extensive list of components
  • Bundled Javascript plugins

Pre Styled Components

Some of the components pre styled are:

  1. Dropdowns
  2. Button Groups
  3. Navigation Bar
  4. Breadcrumbs
  5. Labels & Badges
  6. Alerts
  7. Progress Bar
  8. And many others.

Video Reference

https://www.youtube.com/watch?v=V7x_hosDoIo

READ MORE
Contact Us
+91 9880187415
sales@queryhome.net
support@queryhome.net
#280, 3rd floor, 5th Main
6th Sector, HSR Layout
Bangalore-560102
Karnataka INDIA.
QUERY HOME
...