HTML is the standard way to describe how the content in a webpage is to be displayed. But when there are large websites, it is difficult to modify or make changes in the webpages which are all linked together. Here CSS (Cascading Style Sheets) is useful as it may our task easy.
Using CSS, you can easily set what background images or colors are to be used. You can design the layout as well as variations in display for different devices and screen sizes. With CSS you can control the font attributes of the text too in a simple way.
HTML and CSS are the two of the core technologies for building Web pages. HTML provides the structure of the page and CSS the visual layout. Most commonly, CSS is combined with the markup languages HTML and XHTML.
Cascading Style Sheets (CSS) describe how documents are presented on websites. When the W3C was found in 1994, it actively promoted the use of style sheets on the web. It is called the Cascading style sheet as you can make the most recent style override the earlier. For example, with CSS we can start by specifying the text size as 12. Later we can add a color to the text or change the size. In that case, the last will override the first one.
Superior styles : CSS has a much wider range of attributes than HTML, which helps you to give a better look to your HTML page.
Simple to use : It is easy to learn and understand.
Saves time : CSS save time as you can define a style sheet and reuse the same for many different webpages.
Pages load faster : If you are using CSS, you do not need to write HTML attributes every time. So, you have to less code, the pages will load much faster.
Easy to maintain : You can make a change in the style sheet and this will be updated in all the webpage automatically. So, it is easy to update the webpages.
Global Web Standards : As more and more HTML attributes are being deprecated, It is better to use CSS keeping in future comptability in mind.
Multiple device comptability : Using style sheets the content of the same HTML page can be optimized for different devices like Tablets, PDAs etc.
Which means that it different style are specified for HTML elements, the styles will cascade into new styles with the following priority :
First – Inline Styles
Second – External and Internal Style Sheets
Third – Browser Default
CSS Synatx
Using CSS, you can specify a number of style properties for a given HTML element. Each property has a name and a value, separated by a colon (:) and each property declaration is separated by a semi-colon (;).
A CSS rule set consists of a selector and a declaration block.
Selector : It points to the HTML element you want to style.
Declaration Block : It contains one or more declarations. Each declaration is separated by a semicolon. The declaration blocks are enclosed in curly braces. It contains the property and the value assigned to it.
Property : A property is a type of attribute of HTML tag which has been converted to CSS property.
Value : A value is given to the attribute or property. The attribute is separated by a colon from the value.
Adding CSS to the webpage
CSS can be added to HTML elements in three ways :-
External Style Sheet – Define Style Sheet rules in separate .CSS file and then include that fike in your HTML document using HTML <link> tag.
Internal Style Sheet – Define Style sheet in header section of the HTML document using <style> tag.
Inline Style Sheet – Define style sheet rules directly along with the HTML elements using style attribute.
Add Comment