What is CSS.pptx power point presentation

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.

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.

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!

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.

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.

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.

 Example
 In this example all <p> elements will be center-aligned, with a red text color:

<!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>).

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.

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>

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:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
</body>
</html>

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.

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>
</body>
</html>

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>

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”

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>

CSS selector
 In addition to setting a style for a HTML element,CSS allows us to specify own
selector called “id” and “class
 Different types of selector are:
 A)CSS element selector:
 e.g:- p{
 text-align:center
 color: blue;
 }

 B) CSS ID Selector:
<html>
<head>
<style>
#para1{ text-align: center; color:blue;}
</style>
</head>
<body>
<p id=“para1”>Hello CSS </p>
<p>This paragraph will not be affected</p>
</body>
</html>

 CSS Class Selector: The class selector selects HTML elements with a specific
class attribute.it is used with period(.) followed by class name.
 <html>
 <head>
 <style>
 .center{ text-align : center; color: blue}
 </style>
 </head>
 <body>
 <h1 class=“center”>This heading is blue and center-aligned</h1>
 <p class=“center”> This paragraph is blue and center aligned</p>
 </body>
 </html>

 CSS group Selector:
 The grouping selector is used to select all the elements with the same style
definitions.
 <html>
 <head>
 <style>h1,h2,p{text-align:center; color:blue}
 </style>
 </head>
 <body>
 <h1>Hello javatpoint.com</h1>
 <h2>hello javatpoint.com</h2>
 <p> this is a paragraph</p>
 </body>
 </html>

What is CSS.pptx power point presentation

More Related Content

Similar to What is CSS.pptx power point presentation

More from Coderkids

Recently uploaded

What is CSS.pptx power point presentation