CSS (Cascading Style Sheets)

Introduction to CSS
• CSS can easily apply same style rules on multiple elements.
• CSS can control the presentation of multiple pages of a website
with a single style sheet.
• CSS can present the same page differently on different devices.
• CSS can style dynamic states of elements such as hover, focus, etc.
that isn't possible otherwise.
• CSS can change the position of an element on a web page without
changing the markup.
• CSS can alter the display of existing HTML elements.
• CSS can transform elements like scale, rotate, skew, etc. in 2D or 3D
space.
• CSS can create animations and transitions effects without using any
JavaScript.
• CSS can create print friendly version of web pages.
 Advantages of CSS
• CSS Save Lots of Time — CSS gives lots of flexibility to set the style properties of an
element. You can write CSS once; and then the same code can be applied to the
groups of HTML elements, and can also be reused in multiple HTML pages.
• Easy Maintenance — CSS provides an easy means to update the formatting of the
documents, and to maintain the consistency across multiple documents. Because
the content of the entire set of web pages can be easily controlled using one or
more style sheets.
• Pages Load Faster — CSS enables multiple pages to share the formatting
information, which reduces complexity and repetition in the structural contents of
the documents. It significantly reduces the file transfer size, which results in a
faster page loading.
• Superior Styles to HTML — CSS has much wider presentation capabilities than
HTML and provide much better control over the layout of your web pages. So you
can give far better look to your web pages in comparison to the HTML
presentational elements and attributes.
• Multiple Device Compatibility — CSS also allows web pages to be optimized for
more than one type of device or media. Using CSS the same HTML document can
be presented in different viewing styles for different rendering devices such as
desktop, cell phones, etc.
 CSS Syntax
A CSS rule-set consists of a selector and a declaration block:

• A CSS rule-set consists of a selector and a Example:

declaration block:
p{
• The selector points to the HTML element
you want to style. color: red;
• The declaration block contains one or text-align: center;
more declarations separated by }
semicolons. •p is a selector in CSS (it points to the
• Each declaration includes a CSS property HTML element you want to style: <p>).
name and a value, separated by a colon. •color is a property, and red is the
• A CSS declaration always ends with a property value
semicolon, and declaration blocks are •text-align is a property, and center is the
surrounded by curly braces. property value.
In this example all <p> elements will be center-aligned,
with a red text color
Including CSS in HTML Documents
• CSS can either be attached as a separate
document or embedded in the HTML document
itself. There are three methods of including CSS in
an HTML document:
• Inline styles — Using the style attribute in the
HTML start tag.
• Embedded styles — Using the <style> element in
the head section of a document.
• External style sheets — Using the <link> element,
pointing to an external CSS file.
 Inline Styles
• Inline styles are used to apply the unique style rules to an element
by putting the CSS rules directly into the start tag. It can be
attached to an element using the style attribute.
• The style attribute includes a series of CSS property and value pairs.
Each "property: value" pair is separated by a semicolon (;), just as
you would write into an embedded or external style sheets. But it
needs to be all in one line i.e. no line break after the semicolon, as
shown here:
1. <h1 style="color:red; font-size:30px;">This is a heading</h1>
2. <p style="color:green; font-size:22px;">This is a paragraph.</p>
3. <div style="color:blue; font-size:14px;">This is some text
content.</div>
 Embedded Style Sheets
• Embedded or internal style sheets only affect the document they are embedded
in.
• Embedded style sheets are defined in the <head> section of an HTML document
using the <style> element. You can define any number of <style> elements in an
HTML document but they must appear between the <head> and </head> tags.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<style>
body { background-color: YellowGreen; }
p { color: #fff; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
 External Style Sheets
• An external style sheet holds all the style rules in a separate document
that you can link from any HTML file on your site. External style sheets are
the most flexible because with an external style sheet, you can change the
look of an entire website by changing just one file.
• You can attach external style sheets in two ways — linking and importing.
Linking External Style Sheets An external style sheet can be linked to an HTML document
using the <link> tag. The <link> tag goes inside the <head>
Before linking, we need to create a style sheet
first. Let's open your favorite code editor and section.
create a new file. Now type the following CSS
code inside this file and save it as "style.css". <!DOCTYPE html>
Example: <html lang="en">
<head>
body { <title>My HTML Document</title>
background: lightyellow; <link rel="stylesheet" href="css/style.css">
font: 18px Arial, sans-serif; </head>
} <body>
h1 { color: orange; } <h1>This is a heading</h1>
An external style sheet can be linked to an <p>This is a paragraph of text.</p>
HTML document using the <link> tag. The <link> </body>
tag goes inside the <head> section. </html>
 External Style Sheets
Importing External Style Sheets
The @import rule is another way of loading an external style sheet. The @import
statement instructs the browser to load an external style sheet and use its styles.

The simplest is within the header of Use @import rule to import a style
the document sheet within another style sheet.
<style> @import url("css/layout.css");
@import url("css/style.css"); @import url("css/color.css");
p{ body {
color: blue; color: blue;
font-size: 16px; font-size: 14px;
} }
</style>
Among all the three methods, using external style sheet is the best method for
defining and applying styles to the HTML documents. As you can clearly see with
external style sheets, the affected HTML file require minimal changes in the markup .