Scribd
Upload
98 views59 pages

Cascading Style Sheets (CSS) : CSS Is Used To Control The Style of A Web Document in A Simple and Easy Way

CSS (Cascading Style Sheets) allows users to control the style and layout of web pages. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. It saves time by reusing the same style sheet across multiple web pages, allows for faster page loading, and makes pages easier to maintain. There are three main ways to include CSS in a webpage - inline/local, embedded/internal, and linked/external stylesheets. The order of precedence from highest to lowest is inline, internal, then external stylesheets.

Uploaded by

dab red
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
98 views59 pages

Cascading Style Sheets (CSS) : CSS Is Used To Control The Style of A Web Document in A Simple and Easy Way

CSS (Cascading Style Sheets) allows users to control the style and layout of web pages. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. It saves time by reusing the same style sheet across multiple web pages, allows for faster page loading, and makes pages easier to maintain. There are three main ways to include CSS in a webpage - inline/local, embedded/internal, and linked/external stylesheets. The order of precedence from highest to lowest is inline, internal, then external stylesheets.

Uploaded by

dab red
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 59

1 Cascading Style Sheets (CSS)

 CSS is used to control the style of a web document in a simple and easy way.
 CSS describes the appearance, layout, and presentation of information on a web page
 HTML describes the content of the page
 CSS describes how information is to be displayed, not what is being displayed
 Can be embedded in HTML document or placed into separate .css file

CS380
2 CSS stands for “Cascading Style Sheets”

Sheets: the “sheets” are like templates, or a set of rules, for determining how the webpage will
look.
Cascading: refers to the procedure that determines which style will apply to a certain section,
if you have more than one style rule.
Style: how you want a certain part of your page to look. You can set things like color,
margins, font, etc for things like tables, paragraphs, and headings.
Applications 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 it 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 a far better
look to your HTML page in comparison to 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.
So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.
Basic CSS rule syntax or Style Specification Format
4

Format1
selector {
property: value;
property: value;
...
property: value;
} CSS
p {
font-family: sans-serif;
color: red;
} CSS
 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 to which a 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, border etc.
 Value − Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc.
Format 2
5 example
<p style="font-size: 10pt; color: red; font-weight: bold; font-family: Arial;">

 Format-3
 Example:

<html>
<head>
<title>Title</title>
<style type="text/css">
<!--[STYLE INFORMATION GOES HERE] -->
</style>
</head>
<body>
[DOCUMENT BODY GOES HERE]
</body>
</html>
Levels of Style Sheets (or) Types of CSS
6

Three ways to include CSS:


1. Local or Inline
2. Global or Embedded or Internal
3. Linked or External
7 1. Local

 Inline style sheet.


 Placed inside tags.
 Specific to a single instance of an html tag on a page.
 Must be used instead of <font> tags to specify font size, color, and typeface and to define
margins, etc.
 Use to override an external or embedded style specification.
8 Local (inline)

 Example
<p style="font-size: 10pt; color: red; font-weight: bold; font-family: Arial, Helvetica, sans-serif">
This is a local stylesheet declaration. </p>

On the browser:
Example of inline

<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>
10 2. Global

 Embedded or internal style sheet


 Applicable to an entire document
 Styles are defined within the <style> </style> tag, which is placed in the head section of
the html file (i.e., within <head> and </head>).
11 Global (Internal)

 Example:

<html>
<head>
<title>Title</title>
<style type="text/css">
<!--[STYLE INFORMATION GOES HERE] -->
</style>
</head>
<body>
[DOCUMENT BODY GOES HERE]
</body>
</html>
Example of Internal
<html>
<head>
<style type="text/css"> >
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
13 3. Linked

 External style sheet


 Styles are saved in a separate file, with the extension .css
 This single stylesheet can be used to define the look of multiple pages.
14 Linked (External)

 Example Save this text


In TextPad,Notepad, etc.…
file as
p {font-family: verdana, sans- whatever.css
serif; font-size: 12pt; color: red}

h1 {font-family: serif; font-size:


14pt; color: green}

h2 {font-family: serif; font-size:


11pt; color: blue}
15 Linked (External)
 Example (continued)

To apply the stylesheet “whatever.css“ to an HTML document, call it in from


the header:
<head>
<link rel="stylesheet" href=“whatever.css"
type="text/css">
</head>
Example of external
Save as styles.css To link the styles.css in html
program
body { <html>
background-color: powderblue; <head>
} <link rel="stylesheet" href="styles.css">
h1 { </head>
color: blue; <body>
} <h1>This is a heading</h1>
p{ <p>This is a paragraph.</p>
color: red; </body>
} </html>
17 Inheritance: which style prevails when several are present?

 Inline (local) overrides internal (global)


 Internal (global) overrides external (linked).
Selector Forms
The selector can have variety of forms

Types of Selector Forms


1. Simple Selector Forms
2. Class Selector
3. Generic Selector
4. id Selector
5. Universal Selector
6. Pseudo Classes
 SIMPLE SELECTOR
 The Simple Selector form is a single element to which the property and value is applied.
 For example
h1 { font-size:20pt; color:red; }

 CLASS SELECTOR Using Class Selector we can assign different styles to the same
element.
 These different styles appear on different occurrences of that element.
 For example
H1.RedText { font-size:20pt; color:red; }
<body>
<h1 class=“RedText”>Heading</h1>
</body>
 GENERIC SELECTOR
 We define the class in generalized form, that particular class can be applied to any tag.
 For example
.RedText { font-size:20pt; color:red; }
<body>
<h1 class=“RedText”>Heading</h1>
</body>
 ID SELECTOR
 To define a special style for special element we can use “id Selector”. The id Selector is
similar to the Class Selector.
 Syntax:-
#nameof_id{property:value list;}
 For example
#RedText { font-size:20pt; color:red; }
<body> <h1 id=“RedText”>Heading</h1>
</body>
 UNIVERSAL SELECTOR
 This Selector is denoted by ”*”.
 This selector applied to all the elements in the document.
 For example
* { font-size:20pt; color:red; }

 PSEUDO CLASSES
 Using Pseudo classes we can give special effects on the selector.
 There some pseudo classes which are more commonly used
• Hover-it applies when its associated element has the mouse cursor over it.
• Focus-it applies when its associated element has focus.
Syntax:-
selector:pseudo-class {property:value list;}
Example of pseudo-class
 Example-2
 Example-1
<html>
<html>
<head>
<head> <style>
<style> input:hover{color:red;}
p:hover{color:red;} input:focus{color:green;}

p:focus{color:green;} </style>
</head>
</style>
<body>
</head>
<form>
<body>
<label>enter name:
<p>hi welcome to html</p> <input type="text"></label>
<body> </form>
</html> <body>
Anchor Pseudo-classes
Links can be displayed in different ways:
<html><head> <body>

<style> <h2>CSS Links</h2>


<a href=“https://www.amazon.com”>
/* unvisited link */
Click here
a:link {color: red;}
</a>
/* visited link */
a:visited {color: green;}
</body>
/* mouse over link */
</html>
a:hover { color: hotpink;}
/* selected link */
a:active {color: blue;}
</style>
</head>
Property value Forms

 CSS include 60 different properties in seven categories. They are:


1. Fonts
2. Lists
3. Alignment of text
4. Margins
5. Color
6. Background
7. borders
25 1. CSS properties for Fonts
property description
font-family which font will be used
font-size how large the letters will be drawn
font-style used to enable/disable italic style
font-weight used to enable/disable bold style
The default value is normal, which
specifies the usual character font.
Font-variant
This property can be set to small-caps
to specify small capital letters.

CS380
26 font-family
p {
font-family: Georgia;
}
h2 {
font-family: "Courier New";
} CSS

This paragraph uses the first style above.

This h2 uses the second style above.


output

 Enclose multi-word font names in quotes

CS380
27 More about font-family
p {
font-family: Garamond, "Times New Roman", serif;
} CSS

This paragraph uses the above style.


output
 We can specify multiple fonts from highest to lowest priority
 Generic font names:
 serif, sans-serif, cursive, fantasy, monospace
 If the first font is not found on the user's computer, the next is tried
 Placing a generic font name at the end of your font-family value, ensures that every computer
will use a valid font
28 font-size
p {
font-size: 24pt;
} CSS

This paragraph uses the style above.


output
 units: pixels (px) vs. point (pt) vs. m-size (em)
16px, 16pt, 1.16em
 vague font sizes: xx-small, x-small, small, medium, large, x-
large, xx-large, smaller, larger
 percentage font sizes, e.g.: 90%, 120%

CS380
29 font-size
p {
font-size: 24pt;
} CSS

This paragraph uses the style above.


output
 pt specifies number of point, where a point is 1/72 of an inch onscreen
 px specifies a number of pixels on the screen
 em specifies number of m-widths, where 1 em is equal to the font's current
size

CS380
30 font-weight, font-style
p {
font-weight: bold;
font-style: italic;
} CSS

This paragraph uses the style above.


output

 Either of the above can be set to normal to turn them off (e.g.
headings)

CS380
Font Shorthands
 To shorten the code, it is also possible to specify all the individual font properties in one property.
 The font property is a shorthand property for:
 font-style
 font-variant
 font-weight
 font-size/line-height
 font-family
 Example
 Use font to set several font properties in one declaration:
p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic small-caps bold 30px Georgia, serif;
}
Example of font
<html>
<head>
<style type="text/css">
p.a{font:20px Arial;}
p.b{font:italic small-caps bold 30px Georgia;}
</style>
</head>
<body>
<p class="a">hi iam using style of a class</p>
<p class="b">hi iam using style of b class</p>
</body>
</html>
33 text-align & text-decoration
h2 { text-align: center; }

• text-align can be left, right, center, or justify


CSS

p {
text-decoration: underline;
}

• Text decoration can be underline, overline, line-through, blink, or none


• effects can be combined:
text-decoration: overline underline;
CSS

CS380
Text Color and Background Color
 In this example, we define both the background-color property and the color property:
 Example
body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}
Text Direction & Text Transformation
 The direction and unicode-bidi properties can be used to change the text direction of an element:
 Example
p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

 Text Transformation
 The text-transform property is used to specify uppercase and lowercase letters in a text.
 It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word:
 Example
p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}
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.
 Example
h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}
Text Shadow
 The text-shadow property adds shadow to text.
 In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow
(2px):
 Text shadow effect!
 Example
h1 {
  text-shadow: 2px 2px;
}
 Next, add a color (red) to the shadow:
 Example
h1 {
  text-shadow: 2px 2px red;
}
38 2. The list-style-type property
ol { list-style-type: lower-roman; }
ul { list-style-type: square;}
CSS
 Possible values:
i. none : No marker
ii. disc (default), circle, square
iii. Decimal: 1, 2, 3, etc.
iv. decimal-leading-zero: 01, 02, 03, etc.
v. lower-roman: i, ii, iii, iv, v, etc.
vi. upper-roman: I, II, III, IV, V, etc.
vii. lower-alpha: a, b, c, d, e, etc.
viii. upper-alpha: A, B, C, D, E, etc.
x. lower-greek: alpha, beta, gamma, etc.

CS380
Example of list style
<html> <ul class="b">
<head> <li>Coffee</li>
<style> <li>Tea</li>
<li>Coca Cola</li>
ul.a {list-style-type: circle;}
</ul>
ul.b { list-style-type: square;}
<p>Example of ordered lists:</p>
ol.c {list-style-type: upper-roman;}
<ol class="c">
ol.d {list-style-type: lower-alpha;} <li>Coffee</li>
</style> <li>Tea</li>
</head> <li>Coca Cola</li>
<body> </ol>
<h2>Lists</h2> <ol class="d">
<p>Example of unordered lists:</p> <li>Coffee</li>
<ul class="a"> <li>Tea</li>
<li>Coffee</li> <li>Coca Cola</li>
<li>Tea</li> </ol>
<li>Coca Cola</li></ul> </body>
</html
40 3.CSS properties for colors
p {
color: red;
background-color: yellow;
}
CSS

This paragraph uses the style above output

property description
color color of the element's text
color that will appear behind the
background-color
element

CS380
41 Specifying colors
p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }
CSS

This paragraph uses the first style above

This h2 uses the second style above.

This h4 uses the third style above.


output
 color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
olive, purple, red, silver, teal, white (white), yellow
 RGB codes: red, green, and blue values from 0 (none) to 255 (full)
 hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)
42 CSS properties for backgrounds
property description
background-color color to fill background
background-image image to place in background
placement of bg image within
background-position
element
whether/how bg image should be
background-repeat
repeated
background-attachment whether bg image scrolls with page
shorthand to set all background
background
properties

CS380
43 background-image
body {
background-image: url("images/draft.jpg");
}
CSS

 background image/color fills the element's content area

CS380
44 background-repeat
body {
background-image: url("images/draft.jpg");
background-repeat: repeat-x;
}
CSS

 can be repeat (default), repeat-x, repeat-y, or no-repeat

CS380
45 background-position
body {
background-image: url("images/draft.jpg");
background-repeat: no-repeat;
background-position: 370px 20px;
} CSS

 value consists of two tokens, each of which can be top, left, right,
bottom, center, a percentage, or a length value in px, pt, etc.
 value can be negative to shift left/up by a given amount
CS380
46 Grouping selectors

 Separate selectors with a comma


 Example:
h1,h2,h3,h4,h5,h6 { color: green }
(each header will be green)
 Separate selectors with a space
 Example:
p li { color: red }
(only items within a list and a paragraph tag will be red)
47 Grouping styles
p, h1, h2 {
color: green;
}
h2 {
background-color: yellow;
} CSS

This paragraph uses the above style.


This h2 uses the above styles.
output

 A style can select multiple elements separated by commas


 The individual elements can also have their own styles
CS380
48 CSS comments /*…*/
/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
} CSS

 CSS (like HTML) is usually not commented as rigorously as programming


languages such as Java
 The // single-line comment style is NOT supported in CSS
 The <!-- ... --> HTML comment style is also NOT supported in CSS

CS380
CSS Box Model
 In CSS, the term "box model" is used when talking about design and layout.
 The CSS box model is essentially a box that wraps around every HTML element. It consists of:
margins, borders, padding, and the actual content. The image below illustrates the box model:

 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent
 The box model allows us to add a border around elements, and to define space between
elements. 
CSS Margins
 The CSS margin properties are used to generate space around elements, OUTSIDE of any
defined border.
 The margins are completely transparent - and cannot have a background color.
 CSS has properties for specifying the margin for each side of an element:
• margin-top
• margin-right
• margin-bottom
• margin-left 
  All the margin properties can have the following values:
• auto - the browser calculates the margin.
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element.
• inherit - specifies that the margin should be inherited from the parent element. 
Example of margins
 Set different margins for all four sides of a <p> element:
p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}
 Margin - Shorthand Property
 So, here is how it works:
p { margin: 100px 150px 100px 80px; }
 If the margin property has four values:
margin: 20px 20px 55px 200px; – top margin is 20px – right margin is 20px – bottom margin is 55px – left margin is 200px  
 If the margin property has three values:
margin: 27px 10px 35px; – top margin is 27px – right and left margins are 10px – bottom margin is 35px
  If the margin property has two values:
margin: 45px 70px; – top and bottom margins are 45px – right and left margins are 70px 
  If the margin property has one value:
margin: 25px; – all four margins are 25px 
 Use of The auto Value
You can set the margin property to auto to horizontally center the element within its container.
CSS Borders

 The CSS border properties allow you to specify the style, width, and color of an element's border.
 The border-style property specifies what kind of border to display.
 The following values are allowed:
1. dotted - Defines a dotted border
2. dashed - Defines a dashed border
3. solid - Defines a solid border
4. double - Defines a double border
5. groove - Defines a 3D grooved border. The effect depends on the border-color value
6. ridge - Defines a 3D ridged border. The effect depends on the border-color value
7. inset - Defines a 3D inset border. The effect depends on the border-color value
8. outset - Defines a 3D outset border. The effect depends on the border-color value
9. none - Defines no border
10. hidden - Defines a hidden border
 Example
p {border-style: dotted;}
p{border-style: solid;}
 CSS Border Width
 The border-width property specifies the width of the four borders.
 CSS Border Color
 The border-color property is used to set the color of the four borders.
 Example
p.one {
  border-style: solid;
  border-width: 5px;
border-color: red;
}

p.two {
  border-style: solid;
  border-width: medium;
border-color: blue;
}

p.three {
  border-style: dotted;
  border-width: 2px;
border-color: green;
}

p.four {
  border-style: dotted;
  border-width: thick;
border-color: yellow;
}
CSS Border Sides
 CSS Border - Individual Sides
 From the examples on the previous pages, you have seen that it is possible to specify a
different border for each side.
 In CSS, there are also properties for specifying each of the borders (top, right, bottom, and
left):
 Example
p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}
CSS Border - Shorthand Property

 Like you saw in the previous page, there are many properties to consider when dealing with borders.
 To shorten the code, it is also possible to specify all the individual border properties in one property.
 The border property is a shorthand property for the following individual border properties:
1. border-width
2. border-style (required)
3. border-color
 Example
p {
  border: 5px solid red;
}
CSS Padding

 Padding is used to create space around an element's content, inside of any defined borders.
 The padding property is a shorthand property for the following individual padding properties:
1. padding-top
2. padding-right
3. padding-bottom
4. padding-left
 Example
 Use the padding shorthand property with four values:
p {
  padding: 25px 50px 75px 100px;
}
P{margin: 20px 20px 55px 200px; border: 5px solid red; padding: 25px 50px 75px 100px;}
HTML <span> Tag

 The <span> tag is an inline container used to mark up a part of a text or a part of a document.
 Example
 A <span> element which is used to color a part of a text:
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father
has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
Example
<html><head><style type=“text/css”>
.spanred{font-size:24pt;color:red;font-family:ariel;}</style></head>
<body>
<p>this is the <span class=“spanred”>span text</span></p>
</body></html>
HTML <div> Tag
 <div> tag is used to apply a style to a section of a document.
 Example
<html><head><style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;}
</style></head>
<body>
<h1>The div element</h1>
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
<p>This is some text outside the div element.</p>
</body>
</html>
 End of Unit-2

You might also like