Page 66 - Code & Click - 7
P. 66
7 Adding CSS in HTML5
Pre-Processing
Pre-Processing
• Understanding Cascading Style Sheets • Ways of Inserting CSS in HTML
• Setting Background Properties • Setting Text Properties
• Setting Margin Properties • Setting Border Properties
• Inline Styles
Let us now learn to use Cascading Style Sheets or CSS, in an HTML document to apply formatting to
various elements on a web page.
UNDERSTANDING CASCADING STYLE SHEETS
Cascading Style Sheets (CSS) is a style sheet language used to describe
the presentation of an HTML document. A style sheet holds formatting
codes that control the appearance of your web page. CSS helps you
control the style and layout of multiple web pages at once.
Style Sheet Syntax
Style sheets are made up of rules. Each rule within CSS has two components: a selector and a
declaration.
Selector : The selector specifies the element to which you want to apply a style rule and is followed
by a space.
Declaration : The declaration specifies the formatting rules for the selector. It consists of a property
and its value, separated by a colon (:). Multiple properties and their values can be specified, separated
by semicolons (;). The declaration is enclosed within a pair of braces { }.
selector {property1: value; property2: value; ...}
Declaration
For example, to set the background of a web page as yellow, the CSS statement is :
body {background-color: yellow}
Here, body is the selector, background-color is the property, and yellow is the value of the property.
WAYS OF INSERTING CSS IN HTML
CSS can be inserted in an HTML document in one of the following ways:
• Inline CSS – An Inline CSS is defined in an HTML document inside the
<body> section to specify formatting for specific elements.
• Embedded (or Internal) CSS – An Embedded CSS is part of an HTML
document and is defined in the <head> section of the document
using the <style> element.
• External CSS – An External CSS is a separate document that contains the style rules for various
elements on a web page. It is specified in the HTML document in the <head> section.
64
