SlideShare a Scribd company logo
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 Saves a Lot of Work!
• The style definitions are normally saved in
external .css files.
• With an external stylesheet file, you can
change the look of an entire website by
changing just one file!
CSS Syntax
• A CSS rule-set 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.
• A CSS declaration always ends with a semicolon, and
declaration blocks are surrounded by curly braces.
CSS Selectors
• CSS selectors are used to "find" (or select)
HTML elements based on their element name,
tag,id, class, attribute, and more.
The element Selector
• The element selector selects elements based on
the element name.
• You can select all <p> elements on a page like this
(in this case, all <p> elements will be center-
aligned, with a red text color):
Example
p {
text-align: center;
color: red;
}
Selector
The id Selector
The class Selector
The class selector selects elements with a specific class
attribute.
• You can also specify that only specific HTML elements
should be affected by a class.
• In the example below, only <p> elements with
class="center" will be center-aligned:
• Example
• p.center {
text-align: center;
color: red;
}
More than one class
HTML elements can also refer to more than one
class.
the <p> element will be styled according to
class="center" and to class="large":
Example
<p class="center large">This paragraph refers to
two classes.</p>
Note: A class name cannot start with a number!
Grouping Selectors
• If you have elements with the same style definitions, like this:
• h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
• It will be better to group the selectors, to minimize the code.
• To group selectors, separate each selector with a comma.
• In the example below we have grouped the selectors from the code above:
Example
h1, h2, p {
text-align: center;
color: red;
}
CSS Comments
• Comments are used to explain the code, and
may help when you edit the source code at a
later date.
• Comments are ignored by browsers.
• A CSS comment starts with /* and ends with
*/. Comments can also span multiple lines:
CSS How To...
Three Ways to Insert CSS
There are three ways of inserting a style
sheet:
External style sheet
Internal style sheet
Inline style
External Style Sheet
With an external style sheet, you can change the look of an
entire website by changing just one file!
Each page must include a reference to the external style sheet
file inside the <link> element. The <link> element goes inside
the <head> section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
An external style sheet can be written in any text
editor. The file should not contain any html tags. The
style sheet file must be saved with a .css extension.
Example
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20 px;
}
Note: Do not add a space between the property value
and the unit (such as margin-left: 20 px;). The correct
way is: margin-left: 20px;
Internal Style Sheet
An internal style sheet may be used if one single
page has a unique style.
Internal styles are defined within the <style>
element, inside the <head> section of an HTML
page:
Inline Styles
An inline style may be used to apply a unique style
for a single element.
To use inline styles, add the style attribute to the
relevant element. The style attribute can contain
any CSS property.
**Tip: An inline style loses many of the advantages
of a style sheet (by mixing content with
presentation). Use this method sparingly
CSS Colors
• Colors in CSS are most often specified by:
• a valid color name - like "red"
• an RGB value - like "rgb(255, 0, 0)"
• a HEX value - like "#ff0000“
• Follow exam[les
CSS Backgrounds
CSS background properties:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
Background Color
body {
background-color: lightblue;
}
Background Image
body {
background-image: url("paper.gif");
}
Background Image - Repeat Horizontally or
Vertically
• Please try to understand the example:
• Please be attentive.
• Background Image - Set position and no-
repeat
• Ex::
• We want to change the position of the image,
so that it does not disturb the text too much.
Background Property
• Background Image - Fixed position
• Background - Shorthand property
When using the shorthand property the order of
the property values is:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
Text Color
body {
color: blue;
}
h1 {
color: green;
}
****DO YOURSELF
Note: For W3C compliant CSS: If you define the
color property, you must also define the
background-color.
Text Alignment
• The text-align property is used to set the horizontal
alignment of a text.
• A text can be left or right aligned, centered, or justified.
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right; ///// ** Do yourself please
}
Text Decoration
• The text-decoration property is used to set or
remove decorations from text.
• The value text-decoration: none; is often used
to remove underlines from links:
Example
a {
text-decoration: none;
}
Text Decoration Example
• The other text-decoration values are used to decorate text:
Example
• h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
Text Transformation
• The text-transform property is used to specify
uppercase and lowercase letters in a text.
• ////Try yourself
Text Indentation
• The text-indent property is used to specify the
indentation of the first line of a text:
Example
p {
text-indent: 50px;
}
Letter Spacing
• The letter-spacing property is used to specify
the space between the characters in a text.
• Check the EXAMPLE
Line Height
• The line-height property is used to specify the
space between lines:
• Check example::
Text Direction
• The direction property is used to change the
text direction of an element:
• Example: --------------
Word Spacing
The word-spacing property is used to specify
the space between the words in a text.
The example demonstrates how to increase or
decrease the space between words:
Text Shadow
• The text-shadow property adds shadow to
text.
• Check The example
CSS Lists
HTML Lists and CSS List Properties
• In HTML, there are two main types of lists:
• unordered lists (<ul>) - the list items are marked with
bullets
• ordered lists (<ol>) - the list items are marked with
numbers or letters
• The CSS list properties allow you to:
• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colors to lists and list items
Different List Item Markers
• The list-style-type property specifies the type
of list item marker.
• Example
An Image as The List Item Marker
• The list-style-image property specifies an
image as the list item marker:
• Example: 
Position The List Item Markers
• The list-style-position property specifies
whether the list-item markers should appear
inside or outside the content flow:
• Ex 
List - Shorthand property
• When using the shorthand property, the order of the
property values are:
• list-style-type (if a list-style-image is specified, the
value of this property will be displayed if the image for
some reason cannot be displayed)
• list-style-position (specifies whether the list-item
markers should appear inside or outside the content
flow)
• list-style-image (specifies an image as the list item
marker)
• If one of the property values above are missing, the
default value for the missing property will be inserted,
if any.
CSS tutorial chapter 1

More Related Content

What's hot (20)

PPTX
CSS
DivyaKS12
 
PPTX
Css
Hemant Saini
 
PPT
Presentation on html, css
Aamir Sohail
 
PPTX
Html ppt
Ruchi Kumari
 
PPTX
HTML: Tables and Forms
BG Java EE Course
 
PDF
Html / CSS Presentation
Shawn Calvert
 
PDF
CSS Dasar #4 : Font Styling
Sandhika Galih
 
PPTX
(Fast) Introduction to HTML & CSS
Dave Kelly
 
PPTX
Cascading style sheets (CSS-Web Technology)
Timbal Mayank
 
PDF
CSS3 Media Queries
Russ Weakley
 
PPSX
computer language - Html frames
Dr. I. Uma Maheswari Maheswari
 
PPT
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
PDF
CSS Dasar #8 : Pseudo-class
Sandhika Galih
 
PDF
Xml schema
Prabhakaran V M
 
PPTX
1 03 - CSS Introduction
apnwebdev
 
PDF
CSS Best practice
Russ Weakley
 
PDF
Lesson 1: Introduction to HTML
Olivia Moran
 
PPTX
Introducing Cascading Style Sheets
St. Petersburg College
 
PDF
Introduction to HTML5
Gil Fink
 
PPTX
HTML Fundamentals
BG Java EE Course
 
Presentation on html, css
Aamir Sohail
 
Html ppt
Ruchi Kumari
 
HTML: Tables and Forms
BG Java EE Course
 
Html / CSS Presentation
Shawn Calvert
 
CSS Dasar #4 : Font Styling
Sandhika Galih
 
(Fast) Introduction to HTML & CSS
Dave Kelly
 
Cascading style sheets (CSS-Web Technology)
Timbal Mayank
 
CSS3 Media Queries
Russ Weakley
 
computer language - Html frames
Dr. I. Uma Maheswari Maheswari
 
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
CSS Dasar #8 : Pseudo-class
Sandhika Galih
 
Xml schema
Prabhakaran V M
 
1 03 - CSS Introduction
apnwebdev
 
CSS Best practice
Russ Weakley
 
Lesson 1: Introduction to HTML
Olivia Moran
 
Introducing Cascading Style Sheets
St. Petersburg College
 
Introduction to HTML5
Gil Fink
 
HTML Fundamentals
BG Java EE Course
 

Similar to CSS tutorial chapter 1 (20)

PPTX
Casecading Style Sheets for Hyper Text Transfer Protocol.pptx
usmanahmadawan
 
PPTX
basic programming language AND HTML CSS JAVApdf
elayelily
 
DOC
Css introduction
vishnu murthy
 
PPTX
BITM3730Week4.pptx
MattMarino13
 
DOC
Css introduction
Sridhar P
 
PPTX
BITM3730 9-19.pptx
MattMarino13
 
PPTX
BITM3730 9-20.pptx
MattMarino13
 
PDF
TUTORIAL DE CSS 2.0
Vladimir Valencia
 
PPTX
WT CSS
Mohan186867
 
PPTX
Css types internal, external and inline (1)
Webtech Learning
 
PPTX
Cascading style sheets
smitha273566
 
PPTX
Unit 2 Internet and web technology CSS report
ajaysahusistec
 
PPTX
Cascading style sheets
smithaps4
 
PPTX
cascadingstylesheets,introduction.css styles-210909054722.pptx
hannahroseline2
 
PPTX
html-css
Dhirendra Chauhan
 
PDF
Css tutorial
vedaste
 
PPTX
v5-introduction to html-css-210321161444.pptx
hannahroseline2
 
PPTX
v5-introduction to html-css-210321161444.pptx
hannahroseline2
 
Casecading Style Sheets for Hyper Text Transfer Protocol.pptx
usmanahmadawan
 
basic programming language AND HTML CSS JAVApdf
elayelily
 
Css introduction
vishnu murthy
 
BITM3730Week4.pptx
MattMarino13
 
Css introduction
Sridhar P
 
BITM3730 9-19.pptx
MattMarino13
 
BITM3730 9-20.pptx
MattMarino13
 
TUTORIAL DE CSS 2.0
Vladimir Valencia
 
WT CSS
Mohan186867
 
Css types internal, external and inline (1)
Webtech Learning
 
Cascading style sheets
smitha273566
 
Unit 2 Internet and web technology CSS report
ajaysahusistec
 
Cascading style sheets
smithaps4
 
cascadingstylesheets,introduction.css styles-210909054722.pptx
hannahroseline2
 
Css tutorial
vedaste
 
v5-introduction to html-css-210321161444.pptx
hannahroseline2
 
v5-introduction to html-css-210321161444.pptx
hannahroseline2
 
Ad

Recently uploaded (20)

PDF
AI-assisted IP-Design lecture from the MIPLM 2025
MIPLM
 
PPTX
How to Configure Re-Ordering From Portal in Odoo 18 Website
Celine George
 
PPTX
AIMA UCSC-SV Leadership_in_the_AI_era 20250628 v16.pptx
home
 
PPTX
Light Reflection and Refraction- Activities - Class X Science
SONU ACADEMY
 
PDF
Week 2 - Irish Natural Heritage Powerpoint.pdf
swainealan
 
PDF
Android Programming - Basics of Mobile App, App tools and Android Basics
Kavitha P.V
 
PPTX
Lesson 1 Cell (Structures, Functions, and Theory).pptx
marvinnbustamante1
 
PPTX
How to Manage Expiry Date in Odoo 18 Inventory
Celine George
 
PDF
WATERSHED MANAGEMENT CASE STUDIES - ULUGURU MOUNTAINS AND ARVARI RIVERpdf
Ar.Asna
 
PDF
I3PM Industry Case Study Siemens on Strategic and Value-Oriented IP Management
MIPLM
 
PDF
I3PM Case study smart parking 2025 with uptoIP® and ABP
MIPLM
 
PPTX
CATEGORIES OF NURSING PERSONNEL: HOSPITAL & COLLEGE
PRADEEP ABOTHU
 
PPTX
SD_GMRC5_Session 6AB_Dulog Pedagohikal at Pagtataya (1).pptx
NickeyArguelles
 
PDF
Vietnam Street Food & QSR Market 2025-1.pdf
ssuserec8cd0
 
PPTX
How to Send Email From Odoo 18 Website - Odoo Slides
Celine George
 
PPTX
care of patient with elimination needs.pptx
Rekhanjali Gupta
 
PDF
Lean IP - Lecture by Dr Oliver Baldus at the MIPLM 2025
MIPLM
 
PPTX
HUMAN RESOURCE MANAGEMENT: RECRUITMENT, SELECTION, PLACEMENT, DEPLOYMENT, TRA...
PRADEEP ABOTHU
 
PPTX
infertility, types,causes, impact, and management
Ritu480198
 
PPTX
Identifying elements in the story. Arrange the events in the story
geraldineamahido2
 
AI-assisted IP-Design lecture from the MIPLM 2025
MIPLM
 
How to Configure Re-Ordering From Portal in Odoo 18 Website
Celine George
 
AIMA UCSC-SV Leadership_in_the_AI_era 20250628 v16.pptx
home
 
Light Reflection and Refraction- Activities - Class X Science
SONU ACADEMY
 
Week 2 - Irish Natural Heritage Powerpoint.pdf
swainealan
 
Android Programming - Basics of Mobile App, App tools and Android Basics
Kavitha P.V
 
Lesson 1 Cell (Structures, Functions, and Theory).pptx
marvinnbustamante1
 
How to Manage Expiry Date in Odoo 18 Inventory
Celine George
 
WATERSHED MANAGEMENT CASE STUDIES - ULUGURU MOUNTAINS AND ARVARI RIVERpdf
Ar.Asna
 
I3PM Industry Case Study Siemens on Strategic and Value-Oriented IP Management
MIPLM
 
I3PM Case study smart parking 2025 with uptoIP® and ABP
MIPLM
 
CATEGORIES OF NURSING PERSONNEL: HOSPITAL & COLLEGE
PRADEEP ABOTHU
 
SD_GMRC5_Session 6AB_Dulog Pedagohikal at Pagtataya (1).pptx
NickeyArguelles
 
Vietnam Street Food & QSR Market 2025-1.pdf
ssuserec8cd0
 
How to Send Email From Odoo 18 Website - Odoo Slides
Celine George
 
care of patient with elimination needs.pptx
Rekhanjali Gupta
 
Lean IP - Lecture by Dr Oliver Baldus at the MIPLM 2025
MIPLM
 
HUMAN RESOURCE MANAGEMENT: RECRUITMENT, SELECTION, PLACEMENT, DEPLOYMENT, TRA...
PRADEEP ABOTHU
 
infertility, types,causes, impact, and management
Ritu480198
 
Identifying elements in the story. Arrange the events in the story
geraldineamahido2
 
Ad

CSS tutorial chapter 1

  • 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 Saves a Lot of Work! • The style definitions are normally saved in external .css files. • With an external stylesheet file, you can change the look of an entire website by changing just one file!
  • 5. CSS Syntax • A CSS rule-set 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. • A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
  • 6. CSS Selectors • CSS selectors are used to "find" (or select) HTML elements based on their element name, tag,id, class, attribute, and more.
  • 7. The element Selector • The element selector selects elements based on the element name. • You can select all <p> elements on a page like this (in this case, all <p> elements will be center- aligned, with a red text color): Example p { text-align: center; color: red; }
  • 8. Selector The id Selector The class Selector The class selector selects elements with a specific class attribute. • You can also specify that only specific HTML elements should be affected by a class. • In the example below, only <p> elements with class="center" will be center-aligned: • Example • p.center { text-align: center; color: red; }
  • 9. More than one class HTML elements can also refer to more than one class. the <p> element will be styled according to class="center" and to class="large": Example <p class="center large">This paragraph refers to two classes.</p> Note: A class name cannot start with a number!
  • 10. Grouping Selectors • If you have elements with the same style definitions, like this: • h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; } • It will be better to group the selectors, to minimize the code. • To group selectors, separate each selector with a comma. • In the example below we have grouped the selectors from the code above: Example h1, h2, p { text-align: center; color: red; }
  • 11. CSS Comments • Comments are used to explain the code, and may help when you edit the source code at a later date. • Comments are ignored by browsers. • A CSS comment starts with /* and ends with */. Comments can also span multiple lines:
  • 12. CSS How To... Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style sheet Inline style
  • 13. External Style Sheet With an external style sheet, you can change the look of an entire website by changing just one file! Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension.
  • 14. Example body { background-color: lightblue; } h1 { color: navy; margin-left: 20 px; } Note: Do not add a space between the property value and the unit (such as margin-left: 20 px;). The correct way is: margin-left: 20px;
  • 15. Internal Style Sheet An internal style sheet may be used if one single page has a unique style. Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
  • 16. Inline Styles An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. **Tip: An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly
  • 17. CSS Colors • Colors in CSS are most often specified by: • a valid color name - like "red" • an RGB value - like "rgb(255, 0, 0)" • a HEX value - like "#ff0000“ • Follow exam[les
  • 18. CSS Backgrounds CSS background properties: • background-color • background-image • background-repeat • background-attachment • background-position
  • 19. Background Color body { background-color: lightblue; } Background Image body { background-image: url("paper.gif"); }
  • 20. Background Image - Repeat Horizontally or Vertically • Please try to understand the example: • Please be attentive. • Background Image - Set position and no- repeat • Ex:: • We want to change the position of the image, so that it does not disturb the text too much.
  • 21. Background Property • Background Image - Fixed position • Background - Shorthand property When using the shorthand property the order of the property values is: • background-color • background-image • background-repeat • background-attachment • background-position
  • 22. Text Color body { color: blue; } h1 { color: green; } ****DO YOURSELF Note: For W3C compliant CSS: If you define the color property, you must also define the background-color.
  • 23. Text Alignment • The text-align property is used to set the horizontal alignment of a text. • A text can be left or right aligned, centered, or justified. h1 { text-align: center; } h2 { text-align: left; } h3 { text-align: right; ///// ** Do yourself please }
  • 24. Text Decoration • The text-decoration property is used to set or remove decorations from text. • The value text-decoration: none; is often used to remove underlines from links: Example a { text-decoration: none; }
  • 25. Text Decoration Example • The other text-decoration values are used to decorate text: Example • h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; }
  • 26. Text Transformation • The text-transform property is used to specify uppercase and lowercase letters in a text. • ////Try yourself
  • 27. Text Indentation • The text-indent property is used to specify the indentation of the first line of a text: Example p { text-indent: 50px; }
  • 28. Letter Spacing • The letter-spacing property is used to specify the space between the characters in a text. • Check the EXAMPLE
  • 29. Line Height • The line-height property is used to specify the space between lines: • Check example::
  • 30. Text Direction • The direction property is used to change the text direction of an element: • Example: --------------
  • 31. Word Spacing The word-spacing property is used to specify the space between the words in a text. The example demonstrates how to increase or decrease the space between words:
  • 32. Text Shadow • The text-shadow property adds shadow to text. • Check The example
  • 33. CSS Lists HTML Lists and CSS List Properties • In HTML, there are two main types of lists: • unordered lists (<ul>) - the list items are marked with bullets • ordered lists (<ol>) - the list items are marked with numbers or letters • The CSS list properties allow you to: • Set different list item markers for ordered lists • Set different list item markers for unordered lists • Set an image as the list item marker • Add background colors to lists and list items
  • 34. Different List Item Markers • The list-style-type property specifies the type of list item marker. • Example
  • 35. An Image as The List Item Marker • The list-style-image property specifies an image as the list item marker: • Example: 
  • 36. Position The List Item Markers • The list-style-position property specifies whether the list-item markers should appear inside or outside the content flow: • Ex 
  • 37. List - Shorthand property • When using the shorthand property, the order of the property values are: • list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed) • list-style-position (specifies whether the list-item markers should appear inside or outside the content flow) • list-style-image (specifies an image as the list item marker) • If one of the property values above are missing, the default value for the missing property will be inserted, if any.