SlideShare a Scribd company logo
Web Technology
(NCS-504)
Prepared By
Mr. Abhishek Kesharwani
Assistant Professor,UCER Naini,Allahabad
CSS
• Cascading Style Sheets, fondly referred to as CSS,
is a simple design language intended to simplify
the process of making web pages presentable.
• CSS handles the look and feel part of a web page.
Using CSS, you can control the color of the text,
the style of fonts, the spacing between
paragraphs, how columns are sized and laid out,
what background images or colors are used, as
well as a variety of other effects.
• CSS is easy to learn and understand but it
provides powerful control over the presentation
of an HTML document.
Advantages of CSS
• CSS saves time - You can write CSS once and then
reuse 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.
• Pages load faster - If you are using CSS, you do
not need to write HTML tag attributes every time.
Just write one CSS rule of a tag and apply to all
the occurrences of that tag. So less code means
faster download times.
• Easy maintenance - To make a global change,
simply change the style, and all elements in all
the web pages will be updated automatically.
• Superior styles to HTML - CSS has a much wider
array of attributes than HTML so you can give far
better look to your HTML page in comparison of
HTML attributes.
• Multiple Device Compatibility - Style sheets
allow content to be optimized for more than one
type of device. By using the same HTML
document, different versions of a website can be
presented for handheld devices such as PDAs and
cell phones or for printing.
• Global web standards - Now HTML attributes are
being deprecated and it is being recommended to
use CSS.
Who Creates and Maintains CSS?
• CSS is created and maintained through a
group of people within the W3C called the CSS
Working Group. The CSS Working Group
creates documents called specifications.
When a specification has been discussed and
officially ratified by W3C members, it becomes
a recommendation.
NOTE: The World Wide Web Consortium, or
W3C is a group that makes recommendations
about how the Internet works and how it
should evolve
CSS Versions
• Cascading Style Sheets, level 1 (CSS1) was came
out of W3C as a recommendation in December
1996. This version describes the CSS language as
well as a simple visual formatting model for all
the HTML tags.
• CSS2 was became a W3C recommendation in
May 1998 and builds on CSS1. This version adds
support for media-specific style sheets e.g.
printers and aural devices, downloadable fonts,
element positioning and tables.
• The earliest CSS 3 drafts were published in June
1999.
CSS Syntax – Selectors
A CSS comprises of style rules that are interpreted
by the browser and then applied to the
corresponding elements in your document. A
style rule is made of three parts:
• Selector: A selector is an HTML tag at which style
will be applied. This could be any tag like <h1> or
<table> etc.
• Property: A property is a type of attribute of
HTML tag. Put simply, all the HTML attributes are
converted into CSS properties. They could
be color or border etc.
• Value: Values are assigned to properties. For
example color property can have value
either red or #F1F1F1 etc.
selector { property: value }
Example: You can define a table border as
follows:
table{ border :1px}
CSS Inclusion - Associating Styles
There are four ways to associate styles with your
HTML document. Most commonly used
methods are inline CSS and External CSS.
Embedded CSS
Inline CSS
External CSS
Imported CSS
Embedded CSS
• You can put your CSS rules into an HTML
document using the <style> element. This tag is
placed inside <head>...</head> tags. Rules
defined using this syntax will be applied to all
the elements available in the document.
Syntax:
<head>
<style type="text/css" media="...">
Style Rules............
</style>
</head>
Inline CSS
• You can use style attribute of any HTML
element to define style rules. These rules will
be applied to that element only. Here is the
generic syntax:
• <element style="...style rules....">
<h1 style ="color:#36C;"> This is inline CSS</h1>
External CSS
• The <link> element can be used to include an
external stylesheet file in your HTML
document.
• An external style sheet is a separate text file
with .css extension. You define all the Style
rules within this text file and then you can
include this file in any HTML document using
<link> element.
<head><link rel=”stylesheet” type="text/css"
href="..." media="..." /></head>
Imported CSS
• @import is used to import an external
stylesheet in a manner similar to the <link>
element.
<head>
<style>
@import url("a.css");
</style>
</head>
The Type Selectors
In this type simply apply selector name and set
the attribute value you have to change.
h1 { color: #36CFFF; }
The Descendant Selectors
• Suppose you want to apply a style rule to a
particular element only when it lies inside a
particular element.
• ul em { color: #000000; }
The Class Selectors
• You can define style rules based on the class
attribute of the elements. All the elements
having that class will be formatted according
to the defined rule.
• .black { color: #000000; }
• <h1 class="black">Hello Welcome </h1>
The ID Selectors
• You can define style rules based on the id
attribute of the elements. All the elements
having that id will be formatted according to
the defined rule.
• #black { color: #000000; }
• <h1 id="mycolor">Hello Welcome </h1>
The Child Selectors
• You have seen descendant selectors. There is one
more type of selectors which is very similar to
descendants but have different functionality.
• body > p { color: #000000; }
• This rule will render all the paragraphs in black if
they are direct child of <body> element. Other
paragraphs put inside other elements like <div>
or <td> etc. would not have any effect of this rule.
Multiple Style Rules
• You may need to define multiple style rules for
a single element.
h1 {color: #36C;
font-weight: normal;
letter-spacing: .4px;
margin-bottom: 1px;
text-transform: lowercase;
}
Grouping Selectors
• You can apply a style to many selectors if you
like. Just separate the selectors with a comma
as given in the following example:
h1, h2, h3 {color: #36C;font-weight:
normal;letter-spacing: .4em;margin-bottom:
1em;text-transform: lowercase;}
CSS Rules Overriding
• Any inline style sheet takes highest priority. So
it will override any rule defined in
<style>...</style> tags or rules defined in any
external style sheet file.
• Any rule defined in <style>...</style> tags will
override rules defined in any external style
sheet file.
• Any rule defined in external style sheet file
takes lowest priority and rules defined in this
file will be applied only when above two rules
are not applicable.
CSS - Measurement Units
CSS - Colors
Setting Backgrounds using CSS
• The background-color property is used to set the
background color of an element.
• The background-image property is used to set the
background image of an element.
• The background-repeat property is used to control
the repetition of an image in the background.
• The background-position property is used to control
the position of an image in the background.
• The background-attachment property is used to
control the scrolling of an image in the background.
• The background property is used as shorthand to
specify a number of other background properties
• <p style="background-color:yellow;“>
• <table style="background-
image:url(/https/www.slideshare.net/images/pattern1.gif);">
• <table style="background-
image:url(/https/www.slideshare.net/images/pattern1.gif);
• background-repeat: repeat;">
• <table style="background-
image:url(/https/www.slideshare.net/images/pattern1.gif);
• background-repeat: repeat-y;">
Setting Fonts using CSS
• The font-family property is used to change the
face of a font.
• The font-style property is used to make a font
italic or oblique.
• The font-variant property is used to create a
small-caps effect.
• The font-weight property is used to increase or
decrease how bold or light a font appears.
• The font-size property is used to increase or
decrease the size of a font.
• The font property is used as shorthand to specify
a number of other font properties.
<p style="font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the
default
serif font depending on which font you have at your system.
</p>
<p style="font-style:italic;">
This text will be rendered in italic style
</p>
<p style="font-variant:small-caps;">
This text will be rendered as small caps
</p>
<p style="font-weight:bold;">
This font is bold.
</p>
<p style="font-weight:bolder;">
This font is bolder.
</p>
<p style="font-weight:900;">
This font is 900 weight.
</p>
<p style="font-size:20px;">
This font size is 20 pixels
</p>
<p style="font-size:small;">
This font size is small
</p>
<p style="font-size:large;">
This font size is large
</p>
<p style="font:italic small-caps bold 15px greorgia;">
Applying all the properties on the text at once.
</p>

More Related Content

PPTX
uptu web technology unit 2 Css
PPTX
uptu web technology unit 2 html
PPTX
uptu web technology unit 2 html
PPTX
uptu web technology unit 2 html
PDF
Introduction to HTML and CSS
PPT
Introduction to HTML
PDF
HTML CSS Basics
PPTX
Html and css
uptu web technology unit 2 Css
uptu web technology unit 2 html
uptu web technology unit 2 html
uptu web technology unit 2 html
Introduction to HTML and CSS
Introduction to HTML
HTML CSS Basics
Html and css

What's hot (20)

PDF
Intro to HTML and CSS basics
PPTX
(Fast) Introduction to HTML & CSS
PDF
HTML Lecture Part 1 of 2
PPTX
HTML Lists & Llinks
PDF
Web front end development introduction to html css and javascript
PPTX
Introduction to HTML and CSS
PPTX
Introduction to CSS
ODP
CSS Basics
PDF
Web Design Course: CSS lecture 1
PPTX
PPTX
uptu web technology unit 2 html
KEY
HTML/CSS Lecture 1
PPTX
Css Basics
PPTX
Images and Lists in HTML
PDF
Html / CSS Presentation
PPT
How Cascading Style Sheets (CSS) Works
PDF
Web Design Course: CSS lecture 5
PPTX
Cascading style sheets
Intro to HTML and CSS basics
(Fast) Introduction to HTML & CSS
HTML Lecture Part 1 of 2
HTML Lists & Llinks
Web front end development introduction to html css and javascript
Introduction to HTML and CSS
Introduction to CSS
CSS Basics
Web Design Course: CSS lecture 1
uptu web technology unit 2 html
HTML/CSS Lecture 1
Css Basics
Images and Lists in HTML
Html / CSS Presentation
How Cascading Style Sheets (CSS) Works
Web Design Course: CSS lecture 5
Cascading style sheets
Ad

Similar to uptu web technology unit 2 Css (20)

PPTX
PDF
Css tutorial
PDF
Css - Tutorial
PPTX
Kick start @ css
PDF
Introduction to CSS3
PPTX
Cascading Styling Sheets(CSS) simple design language intended to transform th...
DOCX
PPTX
PPTX
PPTX
Web Programming-css.pptx
DOC
Css introduction
PPTX
PPTX
HTML-CSS-QUARTER4 COMPUTER PROGRAMMING SSC
PPTX
PPTX
CASCADING STYLE SHEETS (CSS).pptx
PDF
PPTX
Cascading style sheet, CSS Box model, Table in CSS
Css tutorial
Css - Tutorial
Kick start @ css
Introduction to CSS3
Cascading Styling Sheets(CSS) simple design language intended to transform th...
Web Programming-css.pptx
Css introduction
HTML-CSS-QUARTER4 COMPUTER PROGRAMMING SSC
CASCADING STYLE SHEETS (CSS).pptx
Cascading style sheet, CSS Box model, Table in CSS
Ad

More from Abhishek Kesharwani (20)

PDF
Software Engineering unit 1 Notes AKTU ppt
PPTX
Software Engineering unit 1 Notes AKTU ppt
PPTX
uptu web technology unit 2 html
PPT
uptu web technology unit 2 Xml2
PPT
uptu web technology unit 2 Xml2
PPT
uptu web technology unit 2 Xml2
PPT
uptu web technology unit 2 Xml2
PPTX
Unit 1 web technology uptu slide
PDF
Unit1 Web Technology UPTU UNIT 1
PPTX
PDF
Web Technology UPTU UNIT 1
DOCX
Mtech syllabus computer science uptu
PDF
Wi max tutorial
PDF
Virtual lan
DOCX
Virtual lan
PPT
Tcp traffic control and red ecn
PDF
Schedulling
PDF
DOCX
Rsa example
PDF
Routers and planes (1)
Software Engineering unit 1 Notes AKTU ppt
Software Engineering unit 1 Notes AKTU ppt
uptu web technology unit 2 html
uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2
Unit 1 web technology uptu slide
Unit1 Web Technology UPTU UNIT 1
Web Technology UPTU UNIT 1
Mtech syllabus computer science uptu
Wi max tutorial
Virtual lan
Virtual lan
Tcp traffic control and red ecn
Schedulling
Rsa example
Routers and planes (1)

Recently uploaded (20)

PPTX
Tissue processing ( HISTOPATHOLOGICAL TECHNIQUE
PDF
2.FourierTransform-ShortQuestionswithAnswers.pdf
PDF
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
PPTX
Final Presentation General Medicine 03-08-2024.pptx
PPTX
202450812 BayCHI UCSC-SV 20250812 v17.pptx
PDF
Weekly quiz Compilation Jan -July 25.pdf
PPTX
IMMUNITY IMMUNITY refers to protection against infection, and the immune syst...
PDF
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
PDF
FourierSeries-QuestionsWithAnswers(Part-A).pdf
PPTX
Lesson notes of climatology university.
PDF
GENETICS IN BIOLOGY IN SECONDARY LEVEL FORM 3
PDF
01-Introduction-to-Information-Management.pdf
PPTX
Pharmacology of Heart Failure /Pharmacotherapy of CHF
PDF
RTP_AR_KS1_Tutor's Guide_English [FOR REPRODUCTION].pdf
PDF
Black Hat USA 2025 - Micro ICS Summit - ICS/OT Threat Landscape
PDF
Supply Chain Operations Speaking Notes -ICLT Program
PDF
Microbial disease of the cardiovascular and lymphatic systems
PDF
VCE English Exam - Section C Student Revision Booklet
PDF
STATICS OF THE RIGID BODIES Hibbelers.pdf
PDF
O5-L3 Freight Transport Ops (International) V1.pdf
Tissue processing ( HISTOPATHOLOGICAL TECHNIQUE
2.FourierTransform-ShortQuestionswithAnswers.pdf
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
Final Presentation General Medicine 03-08-2024.pptx
202450812 BayCHI UCSC-SV 20250812 v17.pptx
Weekly quiz Compilation Jan -July 25.pdf
IMMUNITY IMMUNITY refers to protection against infection, and the immune syst...
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
FourierSeries-QuestionsWithAnswers(Part-A).pdf
Lesson notes of climatology university.
GENETICS IN BIOLOGY IN SECONDARY LEVEL FORM 3
01-Introduction-to-Information-Management.pdf
Pharmacology of Heart Failure /Pharmacotherapy of CHF
RTP_AR_KS1_Tutor's Guide_English [FOR REPRODUCTION].pdf
Black Hat USA 2025 - Micro ICS Summit - ICS/OT Threat Landscape
Supply Chain Operations Speaking Notes -ICLT Program
Microbial disease of the cardiovascular and lymphatic systems
VCE English Exam - Section C Student Revision Booklet
STATICS OF THE RIGID BODIES Hibbelers.pdf
O5-L3 Freight Transport Ops (International) V1.pdf

uptu web technology unit 2 Css

  • 1. Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad
  • 2. CSS • Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. • CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects. • CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document.
  • 3. Advantages of CSS • CSS saves time - You can write CSS once and then reuse 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. • Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply to all the occurrences of that tag. So less code means faster download times. • Easy maintenance - To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
  • 4. • Superior styles to HTML - CSS has a much wider array of attributes than HTML so you can give far better look to your HTML page in comparison of HTML attributes. • Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing. • Global web standards - Now HTML attributes are being deprecated and it is being recommended to use CSS.
  • 5. Who Creates and Maintains CSS? • CSS is created and maintained through a group of people within the W3C called the CSS Working Group. The CSS Working Group creates documents called specifications. When a specification has been discussed and officially ratified by W3C members, it becomes a recommendation. NOTE: The World Wide Web Consortium, or W3C is a group that makes recommendations about how the Internet works and how it should evolve
  • 6. CSS Versions • Cascading Style Sheets, level 1 (CSS1) was came out of W3C as a recommendation in December 1996. This version describes the CSS language as well as a simple visual formatting model for all the HTML tags. • CSS2 was became a W3C recommendation in May 1998 and builds on CSS1. This version adds support for media-specific style sheets e.g. printers and aural devices, downloadable fonts, element positioning and tables. • The earliest CSS 3 drafts were published in June 1999.
  • 7. CSS Syntax – Selectors A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts: • Selector: A selector is an HTML tag at which style will be applied. This could be any tag like <h1> or <table> etc. • Property: A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color or border etc. • Value: Values are assigned to properties. For example color property can have value either red or #F1F1F1 etc.
  • 8. selector { property: value } Example: You can define a table border as follows: table{ border :1px}
  • 9. CSS Inclusion - Associating Styles There are four ways to associate styles with your HTML document. Most commonly used methods are inline CSS and External CSS. Embedded CSS Inline CSS External CSS Imported CSS
  • 10. Embedded CSS • You can put your CSS rules into an HTML document using the <style> element. This tag is placed inside <head>...</head> tags. Rules defined using this syntax will be applied to all the elements available in the document. Syntax: <head> <style type="text/css" media="..."> Style Rules............ </style> </head>
  • 11. Inline CSS • You can use style attribute of any HTML element to define style rules. These rules will be applied to that element only. Here is the generic syntax: • <element style="...style rules...."> <h1 style ="color:#36C;"> This is inline CSS</h1>
  • 12. External CSS • The <link> element can be used to include an external stylesheet file in your HTML document. • An external style sheet is a separate text file with .css extension. You define all the Style rules within this text file and then you can include this file in any HTML document using <link> element. <head><link rel=”stylesheet” type="text/css" href="..." media="..." /></head>
  • 13. Imported CSS • @import is used to import an external stylesheet in a manner similar to the <link> element. <head> <style> @import url("a.css"); </style> </head>
  • 14. The Type Selectors In this type simply apply selector name and set the attribute value you have to change. h1 { color: #36CFFF; }
  • 15. The Descendant Selectors • Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. • ul em { color: #000000; }
  • 16. The Class Selectors • You can define style rules based on the class attribute of the elements. All the elements having that class will be formatted according to the defined rule. • .black { color: #000000; } • <h1 class="black">Hello Welcome </h1>
  • 17. The ID Selectors • You can define style rules based on the id attribute of the elements. All the elements having that id will be formatted according to the defined rule. • #black { color: #000000; } • <h1 id="mycolor">Hello Welcome </h1>
  • 18. The Child Selectors • You have seen descendant selectors. There is one more type of selectors which is very similar to descendants but have different functionality. • body > p { color: #000000; } • This rule will render all the paragraphs in black if they are direct child of <body> element. Other paragraphs put inside other elements like <div> or <td> etc. would not have any effect of this rule.
  • 19. Multiple Style Rules • You may need to define multiple style rules for a single element. h1 {color: #36C; font-weight: normal; letter-spacing: .4px; margin-bottom: 1px; text-transform: lowercase; }
  • 20. Grouping Selectors • You can apply a style to many selectors if you like. Just separate the selectors with a comma as given in the following example: h1, h2, h3 {color: #36C;font-weight: normal;letter-spacing: .4em;margin-bottom: 1em;text-transform: lowercase;}
  • 21. CSS Rules Overriding • Any inline style sheet takes highest priority. So it will override any rule defined in <style>...</style> tags or rules defined in any external style sheet file. • Any rule defined in <style>...</style> tags will override rules defined in any external style sheet file. • Any rule defined in external style sheet file takes lowest priority and rules defined in this file will be applied only when above two rules are not applicable.
  • 24. Setting Backgrounds using CSS • The background-color property is used to set the background color of an element. • The background-image property is used to set the background image of an element. • The background-repeat property is used to control the repetition of an image in the background. • The background-position property is used to control the position of an image in the background. • The background-attachment property is used to control the scrolling of an image in the background. • The background property is used as shorthand to specify a number of other background properties
  • 25. • <p style="background-color:yellow;“> • <table style="background- image:url(/https/www.slideshare.net/images/pattern1.gif);"> • <table style="background- image:url(/https/www.slideshare.net/images/pattern1.gif); • background-repeat: repeat;"> • <table style="background- image:url(/https/www.slideshare.net/images/pattern1.gif); • background-repeat: repeat-y;">
  • 26. Setting Fonts using CSS • The font-family property is used to change the face of a font. • The font-style property is used to make a font italic or oblique. • The font-variant property is used to create a small-caps effect. • The font-weight property is used to increase or decrease how bold or light a font appears. • The font-size property is used to increase or decrease the size of a font. • The font property is used as shorthand to specify a number of other font properties.
  • 27. <p style="font-family:georgia,garamond,serif;"> This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system. </p> <p style="font-style:italic;"> This text will be rendered in italic style </p> <p style="font-variant:small-caps;"> This text will be rendered as small caps </p> <p style="font-weight:bold;"> This font is bold. </p>
  • 28. <p style="font-weight:bolder;"> This font is bolder. </p> <p style="font-weight:900;"> This font is 900 weight. </p> <p style="font-size:20px;"> This font size is 20 pixels </p> <p style="font-size:small;"> This font size is small </p> <p style="font-size:large;"> This font size is large </p> <p style="font:italic small-caps bold 15px greorgia;"> Applying all the properties on the text at once. </p>