CSS

1. CSS Introduction
Dr. Ashwani Kumar
B. Tech., M. Tech., (Ph.D.)
Associate Professor
Dept. of CSE

2. Cascading Style Sheets (CSS)

3. CSS Introduction
• Cascading Style Sheets (CSS)
– Used to describe the presentation of documents
– Define sizes, spacing, fonts, colors, layout, etc.
– Improve content accessibility
– Improve flexibility
• Designed to separate presentation from content
• Due to CSS, all HTML presentation tags and
attributes are deprecated, e.g. font, center,
etc.

4. 4
h1 {
font-family: Times, Georgia, serif;
font-size: 24px;
text-align: center;
}
CSS Rules: Selectors and Declarations
Selector
Declarations
Rule
A more readable way of writing CSS rules

5. 5
h1 {
font-family: Times, Georgia, serif;
font-size: 24px;
text-align: center;
}
CSS Rules: Declaration Parts
Values
Properties
Declarations consist of 2 parts: a property and a value. Each declaration ends
with a semi-colon ( ; ). Properties and values are separated with a colon ( : ).
Properties and values
separated with a colon
Each declaration separated
with a semi-colon
: ;

6. 6
Versions of CSS
• Like XML and XHTML, CSS specifications are laid down by the
World Wide Web Consortium.
• The current, most widely used version of the CSS specification
is version 2.1
• There are over 100 different properties available in CSS

7. 7
CSS Simple, or Element Selectors
• The most basic form of CSS selector is an XHTML
element name;
– h1, h2, p, ol, ul, table, etc.
• This is the simple or element selector. Example:
– p { color: #003366; }
• This will set every occurrence of content marked
up the <p> paragraph tag to be a dark blue colour.

8. 8
CSS Class Selectors
• However, in XHTML markup, elements can
have class attributes assigned to them. The
value attached to a class attribute can be one
(or more) names, separated by spaces.
Example:
– <h1 class=“special”> or
– <h1 class=“special underlined”>
• The actual definition of the value “special” is
defined in a CSS class selector…

9. 9
CSS ID Selectors
• XHTML elements can also have id selectors assigned to them.
Example:
• <p id=“summary”>blah, blah, blah.</p>
• In the CSS, the id “summary” can be styled in a rule, thus:
• #summary { font-style: italic; }
• Whereas class selectors can be used across a number of
elements in an XHTML document, ID selectors can only be
assigned to one specific element in any given XHTML
document.

10. Example of Class & ID Selector
#top {
background-color: #ccc;
padding: 20px;
}
.intro {
color: red; font-weight: bold;
}
10
<div id="top"> <h1>Chocolate
curry</h1>
<p class="intro">This is my recipe
for making curry purely with
chocolate</p>
</div>

11. 11
Class Selectors vs ID Selectors
• How do we know which to use and when?
ID selectors:
1. As they must be unique to a page, ID selectors are useful for persistent structural
elements, such as navigation zones, or key content areas, that occur once on a
page, but that are consistent across a site.
2. For example, #mainNav may be the selector to style the the main navigation
element, which will likely appear on every page of your site.
3. So, ID selectors are generally applied to conceptually similar elements across a
site.

12. 12
Class Selectors vs ID Selectors
• How do we know which to use and when?
Class selectors:
1. As they can be allied to any number of elements on a page, class selectors are
useful for identifying (and targeting) types of content, or similar items.
2. For example, you have a news page with a date at the start of each story. If you
use ID selectors, you’d have to give every occurrence of the date a separate ID
name. Much easier to give every date one class name and style that one class.

13. 13
Element Selector Grouping
• Element selectors can be grouped together if
you want to apply one CSS rule to a range of
elements. Example:
• h1, h2, h3, h4, h5, h6 { color: #FF0000; }
• Each element is separated by a comma (except
for the last element before the start of the
declaration).
• However…

14. 14
The Universal Selector
• There is also a Universal Selector, that acts like
a wildcard, styling every available element that
isn’t specifically styled elsewhere. Example:
• * { padding: 0; margin: 0; }
• …would usefully set the overall page styling to
zero padding and margin, which could then be
adjusted as-needed further down the line.
• The universal selector is donated by an *
symbol

15. CSS TYPES
• INLINE CSS
• INTERNAL CSS
• EXTERNAL CSS

16. Inline Styles: Example
16
<!DOCTYPE html >
<head>
<title>Inline Styles</title>
</head>
<body>
<p>Here is some text</p>
<!--Separate multiple styles with a semicolon-->
<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
</html>
inline-styles.html

17. Internal Styles
• The <style> tag is placed in the <head> section of the
document
•
– type attribute specifies the MIME type
• MIME describes the format of the content
• Other MIME types include text/html, image/gif,
text/javascript …
• Used for document-specific styles
17
<style type="text/css">

18. <html>
<head>
<style>
body {background-
color:lightgrey}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a
paragraph.</p>
USING INTERNAL CSS

19. External CSS Styles
• External linking
– Separate pages can all use a shared style sheet
– Only modify a single file to change the styles across your
entire Web site (see http://www.csszengarden.com/)
• link tag (with a rel attribute)
– Specifies a relationship between current document and
another document
– link elements should be in the <head>
19
<link rel="stylesheet" type="text/css"
href="styles.css">

20. <html>
<head>
<title>Using External CSS</title>
<link href="css/styles.css"
type="text/css” rel="stylesheet">
</head>
<body>
<h1>Potatoes</h1>
<p>There are dozens of...</p>
</body>
</html>
USING EXTERNAL CSS

21. External CSS Styles (2)
@import
– Another way to link external CSS files
– Example:
– Ancient browsers do not recognize @import
– Use @import in an external CSS file to workaround
the IE 32 CSS file limit
21
<style type="text/css">
@import url("styles.css");
/* same as */
@import "styles.css";
</style>

22. External Styles
22
<head>
<title>Importing style sheets</title>
<link type="text/css" rel="stylesheet"
href="styles.css" />
</head>
<body>
<h1>Shopping list for <em>Monday</em>:</h1>
<li>Milk</li>
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<a href="http://food.com" title="grocery
store">Go to the Grocery store</a>
</body>
</html>
external-styles.html

23. Styles.css
body {
background-color: white;
}
h1 {
color: white;
text-align: center;
font-family: "Times New Roman";
font-size: 20px;
}

24. Benefits of using CSS
• More powerful formatting than using
presentation tags
• Your pages load faster, because browsers cache
the .css files
• Increased accessibility, because rules can be
defined according given media
• Pages are easier to maintain and update
24

25. Maintenance Example
25
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
Title
Some random
text here. You
can’t read it
anyway! Har har
har! Use Css.
CSS
file