2.Reshaping-Indias-Political-Map.ppt/pdf/8th class social science Exploring S...Sandeep Swamy
properties of css.pptx power pointpresentation
1. What is CSS?
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be
displayed on screen, paper, or in other media .
CSS saves a lot of work.
It can control the layout of multiple web pages
all at once.
External stylesheets are stored in CSS files.
2. Why Use CSS?
CSS is used to define styles for your web pages,
including the design, layout and variations in
display for different devices and screen sizes.
3. CSS Solved a Big Problem
HTML was NEVER intended to contain tags for formatting a web page! HTML was
created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2 specification,
it started a nightmare for web developers. Development of large websites, where
fonts and color information were added to every single page, became a long and
expensive process to solve this problem, the World Wide Web Consortium (W3C)
created CSS.
CSS removed the style formatting from the HTML page!
4. CSS Syntax
A CSS rule consists of a selector and a
declaration block.
The selector points to the HTML element you
want to style
The declaration block contains one or more
declarations separated by semicolons.
Each declaration includes a CSS property name
and a value, separated by a colon.
Multiple CSS declarations are separated with
semicolons, and declaration blocks are
surrounded by curly braces.
5. Advantages of CSS
CSS saves time.
You can write CSS once and then reuse the same sheet in multiple
HTML pages.
You can define a style for each HTML element and apply it to as many
Web pages as you want.
Easy maintenance − To make a global change, simply change the
style, and all elements in all the web pages will be updated
automatically.
Global web standards − Now HTML attributes are being
deprecated and it is being recommended to use CSS.
So it's a good idea to start using CSS in all the HTML pages to make
them compatible with future browsers.
Platform Independence − The Script offer consistent platform
independence and can support latest browsers as well.
6. Disadvantages of CSS
Browser Compatibility: CSS works differently on different browsers. Internet
Explorer and Opera supports CSS as a different logic.
Different syntax to HTML: CSS as developed independently of HTML and uses a
different syntax, so web developer has to lean two sets of formatting syntax
instead of one.
Lack of security: CSS is an open text based system. There is no built-in
security and anyone with read/ write access to website can disturb the
formatting by changing CSS file.
7. Example
In this example all <p> elements will be center-aligned, with a red text color:
8. <!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Example Explained
p is a selector in CSS (it points to the HTML element you want to style: <p>).
9. Using CSS
CSS can be added to HTML documents in 3 ways:
Inline - by using the style attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files.
10. Inline CSS
We can use style attribute of any HTML element to define style rules. These elements
will be applied to that element only.
Syntax:
<element style=“style rule”>
Example:-
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>
11. Internal CSS or Embedded CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within
a <style> element.
The following example sets the text color of ALL the <h1> elements (on that page) to
blue, and the text color of ALL the <p> elements to red. In addition, the page will be
displayed with a "powderblue" background color:
13. External CSS
An external style sheet is used to define the style for many HTML pages.
With an external style sheet, you can change the look of an entire web site,
by changing one file!
The <link> element can be used to include an external style sheet file in
HTML document.
An external style sheet is a separate text file with .CSS extension.
The <LINK> tag goes in header section.
14. EXAMPLE:
code for external style sheet
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
code for HTML DOCUMENT
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
15. Imported CSS
@imported rule statement is used to import an external style sheet in a
manner similer to <LINK> element.
The @import rule statement goes inside the head section.
Syntax:
<head>
<style type=“text/css”>
@import “url”;
</style>
</head>
16. Example:
Body{
background-color : light blue;
font-family: impact;
}
H1,h2{
font weight:bold;
font size:24pt;
color:red;
}
Note: save above external style sheet with name “ext.css”
17. Code to import external css in html
document
<html>
<head>
<style type=“text/css”>
@import url(“ext.css”);
</style>
</head>
<body>
<h1> WELCOME TO THE WORLD OF STYLE SHEET</h1>
<h2> This is how to import External style sheet</h2>
</body>
</html>
18. Styling with css properties
Background properties:
Property Description values
Background-color Sets background color of
element
Color_nmae(like-red)
Background-image Sets background image
for <body>element
url(“image-file”)
Background-position Sets starting position of
a background image
Center top,left
center,left top,center
bottom, right
center,left bottom,right
bottom,right center
Background-size Specifies size of
background images
Auto
Percentage
cover
20. Text properties
Property Description Values
Color Sets the color of text Color_name
Line_height Sets the distances
between lines
Normal,number,length,%
Letter-spacing Increase and decrease
spaces between
characters
Normal,length
Text-align Aligns text in an element Left,right,center justify
Text-decoration` Adds decoration to text None,underline,overline,li
ne-through
Text-indent Indent the first line of
text in an element
Length,%
Text-transform Controls the letters in an
element
None,capitalize,uppercase
,lowercase
21. Font Properties:
Property Description Values
Font-family Specifies font family for text Family-name(like-Arial)
Font-size Specifies the font size of text Xx-small,x-
small,small,medium,large,x-
large,xx-
large,smaller,larger,length(like-
20pt)
Font-style Specifies font style for text Normal,italic,oblique
Font-variant Specifies whether or not a text
should be displayed in a small-
caps font
Normal,small-caps
Font-weight Specifies the weight of a font Normal,bold,bolder,lighter
22. Id slector
The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific
element.
The id of an element is unique within a page, so the id selector is used to
select one unique element!
To select an element with a specific id, write a hash (#) character, followed
by the id of the element.
24. The CSS class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by
the class name.
Example
In this example all HTML elements with class="center" will be red and center-
aligned:
