Engineering module 3

1. Module-3
Cascading Style
Sheets (CSS)

2. Module 3:
Cascading Style Sheets (CSS)

3. Introduction
• The CSS1 specification was developed in 1996
• CSS2 was released in 1998
• CSS3 is on its way
• CSSs provide the means to control and change presentation of
HTML documents
• CSS is not technically HTML, but can be embedded in HTML
documents
• Style sheets allow you to impose a standard style on a whole
document, or even a whole collection of documents
• Style is specified for a tag by the values of its properties

4. Levels of Style Sheets
• There are three levels of style sheets
– Inline - specified for a specific occurrence of a tag and apply only to
that tag
– This is fine-grain style, which defeats the purpose of style sheets -
uniform style
– Document-level style sheets - apply to the whole document in which
they appear
– External style sheets - can be applied to any number of documents
• When more than one style sheet applies to a specific tag in a
document, the lowest level style sheet has precedence
– In a sense, the browser searches for a style property spec, starting
with inline, until it finds one (or there isn’t one)

5. Levels of Style Sheets (continued)
• Inline style sheets appear in the tag itself
• Document-level style sheets appear in the
head of the document
• External style sheets are in separate files,
potentially on any server on the Internet
– Written as text files with the MIME type text/css

6. Introduction
Cascading Style Sheets (CSS) concepts and CSS basic
syntax.
• Cascading Style Sheets is a style sheet language
used for describing the presentation of a
document written in a markup language such as
HTML or XML.
• The W3C’s philosophy in terms of how HTML and
CSS should fit together is (1) use HTML elements
to specify a web page’s content, and (2) use CSS to
specify a web page’s appearance.
• There are lots and lots of CSS properties that

7. CSS Rules
CSS Rule Sets
• A CSS rule set contains one or more selectors
and one or more declarations.
• The selector(s), which in this example is h1 , points
to an HTML element.
• The declaration(s), which in this example are
color: blue and text-align: center style the element
with a property and value.

8. CSS Rules
• The selector points to the HTML element to style (h1).
• The declaration block (in curly braces) contains one or more
declarations separated by semicolons.
• Each declaration includes a CSS property name and a value,
separated by a colon.

9. CSS Rules
Selector
Declaration of
Property:
value

10. CSS Rules
Example for Selector and Declaration: Tree
Poem web page

11. CSS Rules
Example for Selector and Declaration: Tree
Poem web page
In the Tree Poem web page, the
• * {text-align: center;} rule causes the elements that contain
text to be centered.
• The hr element does not contain text, so it’s not affected by
the text-align property and hr elements are centered by
default.
• The hr {width: 50%;} rule causes the horizontal line to
render with a width that’s 50% of the web page body’s
width.
• The h2, p {font-style: italic; color: blue;} rule causes the
heading and paragraph elements to be italicized and blue.

12. CSS Syntax and style
CSS Syntax
The style container positioned at the bottom of the web
page’s head container. In the style start tag, it’s legal to
include a type attribute with a value of "text/css", like
this

13. CSS Syntax and style
CSS Syntax
In the Tree Poem web page, the type attribute is omitted.
Currently, text/css is the only legal value for the type
attribute, and it’s the default value for the type attribute.
Google’s Style Guide, which covers both HTML and CSS,
recommends that you reduce the size of your web page file
by omitting the type attribute.

14. CSS Syntax and style
CSS Style
Style is used to style and layout the web pages — for
example, to alter the font, color, size, and spacing of
your content, split it into multiple columns, or add
animations and other decorative features.

15. CSS Syntax and style
CSS Style
when there is block formatting for multi-line container
elements, the start tag and end tag are aligned at the
left, and interior lines are indented.
If there is a long CSS (at least two
or three property-value pairs), use
block formatting like this

16. CSS Class Selectors
Class selector
• A CSS class is an attribute used to define a group of
HTML elements in order to apply unique styling and
formatting to those elements with CSS.
• Use a dot operator(.) followed by the class name in a
style block.
• Use a bracket called a declaration block that contains the
property to stylize the element, such as text color or text
size. CSS Classes will help to stylize HTML elements
quickly
• Example: .class name

17. CSS Class Selectors
The two types of normal selectors are selectors and the
universal selector.
The third type of CSS selector—a class selector
The dot thing (.red in this example) is called a class selector because its
purpose is to select elements that have a particular value for their class
attribute. So the class selector rule would select/match the following element
because it has a class attribute with a value of red:
<p class= red> a class selector that select elements that have a
particular value for their class attribute</p> In applying the class selector
rule to this element, the quote gets displayed with a tomato background
color

18. CSS Class Selectors
Class selector:
The three CSS rules with their class selectors .red,
.white, and .blue
<q> tag defines a
short quotation

19. CSS Class Selectors
Class selector:
The three CSS rules with their class selectors .red,
.white, and .blue

20. CSS Class Selectors
Class Selectors with Element Type Prefixes
It is used apply a CSS rule to any element whose one of the classes
matches specified prefix. When the same class name is to be used for
multiple elements, but each with a different style, you can prefix the
dot with the HTML element name.
element-type.class-value {property1: value;
property2: value;}

21. CSS Class Selectors
Class Selectors with * Prefixes
• Instead of prefacing a class selector with an element type, as an
alternative, you can preface a class selector with an *. Because *
is the universal selector, it matches all elements. Therefore, the
following CSS rule is equivalent to a standard class selector rule
(with no prefix)
*.class-value {property1: value;
property2: value;}
Example: *.big-warning {font-size: x-large;
color: red;
• It would match all elements in the web page that have a class
attribute value of big-warning, and it would display those
elements with extra-large red font.
• CSS property names follow the same coding convention as developer-
defined class attribute values—if there are multiple words, use hyphens
to separate the words (e.g., font-size). CSS property values usually follow
the same use-hyphens-to-separate-multiple-words coding convention.

22. CSS ID Selectors
• An ID selector is similar to a class selector in that it relies on
an element attribute value in searching for element matches.
• An ID selector uses an element’s id attribute (as opposed to a
class selector, which uses an element’s class attribute).
• A significant feature of an id attribute is that its value must be
unique within a particular web page. That’s different from a
class attribute’s value, which does not have to be unique within
a particular web page.
• The ID selector’s unique-value feature means that an ID
selector’s CSS rule matches only one element on a web page.
• ID selectors are an important part of CSS.

23. CSS ID Selectors
To match an element with an id attribute, an ID selector rule is
needed, and the syntax is
The syntax is the same as for a class selector rule, except that you
use a pound sign (#) instead of a dot (.), and use an id attribute
value instead of a class attribute value.
#lizards-lounge {color: green;}
<h1 id="lizards-lounge">Lizards Lounge</h1>

24. CSS ID Selectors
To match an element with an id attribute, an ID selector rule iss
needed, and the syntax is

25. CSS * Selector
The * selector selects all elements.
The * selector can also select all elements inside
another element
Syntax :
* {
css declarations;
}
Example:
* {
background-color: yellow;
}