4. Web Technology CSS Basics-1

WEB TECHNOLOGY
CASCADING STYLE SHEET BASIC
DR. JYOTI YADAV

WEB LANGUAGE
•Applying CSS- The different ways you can apply CSS to HTML.
•Selectors, Properties, and Values - The bits that make up CSS.
•Colors- How to use color?
•Text- How to manipulate the size and shape of text.
•Margins and Padding- How to space things out.
•Borders- Erm. Borders. Things that go around things.
•Putting It All Together- Throwing all of the above ingredients
into one spicy hotpot.

WHY CSS ?
As we know that HTML has limited design capabilities, we
can’t be able to create most appealing, professional websites
using just HTML. Using only HTML we can’t add various
styles, animations, special effects, transitions, to web pages.
We need to take help of CSS to create well designed websites.
HTML and CSS together help us to create consistent,
readable, accessible, manageable and appealing professional
web sites. (Over-all: well designed websites.) CSS helps us to
add style, special effects, animations, transitions, etc to our
web pages.

WHAT IS CSS?
CSS is the acronym for: ‘Cascading Style Sheets’.
CSS is the sister language to HTML that allows you to style
your web pages.
An example of a style change would be to make words bold.
In standard HTML you would use the <b> tag like so:
<b>make me bold</b>
This will make that specific paragraph red.
But, if you remember, the best-practice approach is that the HTML
should be a stand-alone, presentation free document, and so in-
line styles should be avoided wherever possible.

CASCADING STYLE SHEET/DOCUMENT
• CSS contains collection of style rules some of
them are passed on or inherited to child tags
when applied to their parent tags.
• CSS is something like a beauty kit for our web
pages or entire website. It is used to add design
aesthetics, design principles to websites and
create most appealing and well designed web
sites.

TREE REPRESENTATION OF HTML CODE
<html>
<head> <body>
<title>
<p> <p> <p>
<b> <u> <b>
<html>
<head>
<title> Home Page </title>
</head>
<body>
<p>Welcome to <b> CSS </b> </p>
<p>Welcome to CSS </p>
<p>Welcome to </u> <b> CSS </b>
</p>
</body>
</html>

BENEFITS AND LIMITATIONS OF CSS
Advantages of CSS:
• CSS allows us to add styles, animations, transition and various effects to web
pages.
• Create consistent and easy to maintain websites.
• Easily implement design principles to websites.
• Separate structure of web page from presentation of web page.
develop web sites rapidly.
• Create well designed websites.
Limitations of CSS:
• CSS is used to add design aesthetics, styles, and effects to web pages.
• We can’t create more interactive (Dynamic / real-time) web sites using just CSS.
• So, creating real time simulations, games, applications is not possible using CSS.
• To overcome this limitation we use scripting languages like JavaScript, PHP,
etc…

DECLARING CSS STYLE
Style: Distinctive appearance
Distinguish one element from other elements
Ex: color, font-size, border, border-style etc…..
Style Rule: styles are properties in CSS
property-name : value
Ex:
Property-name Value
Color Red
Background-color Yellow
Font-family Arial
Font-size 24pt

DECLARING CSS STYLE
Declaring style rules: property-name : value ;
Ex:
color : red;
background-color : yellow;
font-family : Arial;
font-size : 24pt;
Declaration list:
color : red; background-color : yellow; font-family : Arial; font-size : 24pt;
Declaration list is a collection of style rules separated by semicolons. OR
Declaration list is a list of style rule declarations.

CSS STYLE RULE SET OF RULES
CSS Style rule set: set of rules (declaration list)
Syntax:
selector
{
declaration list;
}
Ex:
p
{
color : red;
font-family : Arial;
font-size : 24pt;
}

APPLYING STYLES
There are 3 different ways of applying styles :
1.Inline styles
2. Embedded Styles
3. External Styles

INLINE STYLES
• styles that are placed within the tag itself.
• we use style attribute to place inline styles.
• value to the style attribute is declaration list.
Limitations of inline style:
• If we have many tags with common styles, then we have to copy
• paste the entire declaration list to every other tag.
• That increases the webpage size.
• Increase in code size.
• Code Redundancy.
• No maintainability.
• Time consuming.
To overcome this limitation we use embedded styles.

INLINE STYLE
<tagname style = “declaration list”> </tagname>
Eg.
<p style = “color:white;background-color:black;
font-size:14pt;”>Welcome to CSS </p>

EMBEDDED STYLE
• Styles that are placed within the style tag are called embedded styles.We use style
tag to place embedded styles.
• Declaration block: is used to group declarations separated by semicolon in one
block, so that more than one styles can be applied on a selected element or more
than one selected elements.
{ //beginning of a block
color:white; // declaration of style rule 1
background-color:black; // declaration of style rule 2
font-size:24pt; // declaration of style rule 3
} // end of a block

EMBEDDED STYLE
• Selector: is a string used to select an element or more than one elements to
which we want to apply group of style rules.
selector
{
color:white;
background-color:black;
font-size:24pt;
}
p //This P tag is used as a selector and is applied to the entire group of properties
{
color:white;
background-color:black;
font-size:24pt;
}

EMBEDDED STYLE
• Types of selectors:
tag selector, class selector, id selector, and contextual selector.
Limitations of Embedded Style:
• If we have many web pages with common styles, then we have to copy paste
all embedded declaration blocks to every other web page.
• That increases the web site size.
• Increase in code size.
• Code Redundancy.
• No maintainability.
• Time consuming.
• To overcome this limitation we use external style.

EXTERNAL STYLE
• External Style Sheet is basically a .CSS file containing list of declaration
blocks.
• This .CSS file is linked to various web pages to apply common styles.
• To link html and css files together we use link tag.
attributes:
href: href stands for Hyperlink reference
type: indicates the content in the reference file.
rel: rel indicates relationship, is style-sheet
Advantage:
• We can implement consistency throughout the website.
• Reduces code redundancy. Reduces website size.
Limitations:
If we make any changes in the CSS file, then every other linked html page will
get affected. So, we need to handle it carefully

WEB LANGUAGE
To link html and css files together:
<link href=“filename.css” type =“text/css” rel=“stylesheet”/>
<link> tag should be placed within the <head> tag
To link html and css files together we use link tag.
attributes:
href: href stands for Hyperlink reference
type: indicates the content in the reference file.
rel: rel indicates relationship, is style-sheet
Advantage:
We can implement consistency throughout the website.
Reduces code redundancy. Reduces website size.
Limitations:
If we make any changes in the CSS file, then every other linked html page will get
affected. So, we need to handle it carefully.

CSS- PRECEDENCE OF STYLES
• The type of style being considered more important than other is known as precedence of style.
• The order in which styles are placed determines which style rule takes the highest precedence.
• The better understanding of precedence of styles will help us to create more organized and
manageable code.
• Order of precedence:
1. Inline styles
2. Internal (Embedded) styles
3. External styles.
4. Browser default styles.

CSS CASCADE VS INHERITANCE
• Cascade: deals with precedence of style rules or CSS properties (i.e.
the order in which properties are applied to an html element).
• It solves conflict situations.
• The rules of the cascade include:
1. Later properties (nearest) override earlier (farthest) properties
2. More specific selectors (less generic) override less specific (more
generic) selectors

CSS CASCADE VS INHERITANCE
Inheritance:
• Deals with how styles poured down from a parent element to its
child elements.
• Certain properties, like font-family gets inherited. If you set a font-
family on the body element, then it will get inherited by all the
elements within the body.
• The same is true for color, but it is not true for background color,
border-style, margin or height which will always default to
transparent, none, auto and auto.

TYPES OF SELECTORS
1. Tag selector
2. Class selector
3. ID selector
4. Group selector
5. Contextual selector
a. Descendent selector
b. Child selector
c. Adjacent sibling selector
d. General sibling selector
6. Attribute selector
7. Pseudo classes
8. Pseudo elements
9. Universal selector

TAG SELECTOR
Syntax of CSS rule-set / rule:
selector
{
declaration list;
}
To implement tag selector, In place of selector, we write tag name.
Syntax of tag selector:
tagname
{
declaration list;
}
It selects every html tag with the specified tag name and applies styles on them.
Example for tag selector:
p
{
color: green;
font-size:16pt;
border: 2px solid red;
}
It selects every p tag available on the page and applies specified styles on them.

CLASS SELECTOR
To select tags by their “class attribute value” and apply styles on them we use class selector.
Syntax of CSS rule-set / rule:
selector
{
declaration list;
}
To implement class selector, in place of selector, we write class attribute value preceded by
period(dot).
Syntax of class selector:
tagname class=”classattributevalue”
.classattributevalue
{
declaration list;
}
It selects every html tag which has specified class attribute value and applies styles on them.

CLASS SELECTOR
Example for class selector:
p class=”solidborder”
. solidborder
{
}
It selects every html tag available on the page with a specified class attribute
value and applies specified styles on them.
You can specify same class attribute value to more than one tag, if required.
An html element can have list of class attribute values separated by white
space, if required.

ID SELECTOR
To select tags by their “id attribute value” and apply styles on them
we use id selector.
To implement id selector, In place of selector, we write id attribute
value preceded by hash(#) symbol. In CSS # symbol indicates ID
selector.
Syntax of id selector:
tagname id=”idattributevalue”
#idattributevalue
{
declaration list;
}
It selects every html tag which has specified id attribute value and
applies styles on them.

ID SELECTOR
Example for id selector:
h1 id=”solidborder”
# solidborder
{
}
It selects every html tag available on the page with a specified id attribute value and applies
specified styles on them.
You should not specify same id attribute value to more than one tag.
(i.e. id attribute value should be unique in the page).
If you want to identify an html element uniquely in the page use id selector.
An html element should not have list of id attribute values separated by white space.
ID attribute value is not only used to identify an html element uniquely and apply styles on it.
It is also used access an html element in JavaScript and allows us to add behavior to it.

GROUP SELECTOR / GROUPING SELECTORS
• There are situations where different tags may have similar styles
• To reduce code redundancy we create group selector
• To implement group selector, in place of selector we write comma separated
list of selectors
Syntax of group selector:
selector1, selector2, selector3
{
declaration list;
}

GROUP SELECTOR / GROUPING SELECTORS
h3
{
background-color:gray;
color:white;
border:2px solid black;
}
p
{
background-color:gray;
color:white;
}
Instead of writing two separate rule-sets, we can group them to reduce code redundancy
h3,p
{ background-color:gray;
color:white;
}

COMBINATION SELECTOR /
COMBINING SELECTORS
It is possible to combine a selector with other selectors to make
more specific selection.
To combine selectors, in place of selector without using any
separator; we write selectors one beside another from generic to
specific selector
Syntax of Combination selector:
selector1selector2
{
declaration list;
}

COMBINING SELECTORS
Ex: tagselectorclassselector
{
declaration list;
}
tagselectoridselector
{
declaration list;
}
classselectorattributeselector
{
declaration list;
}

COMBINING SELECTORS
Ex:
h1.redborder//tag selector +class selector
{
border:2px solid red;
background-color:cyan;
}
p.redborder// tag selector + class selector
{
border:2px solid red; background-color:yellow;
}
p.redborder[align=”right”] //Combination of tag selector + class selector+attribute selector
{
border:2px solid red; background-color:magenta;
}

DOCUMENT OBJECT MODEL TREE (DOM)
• For every HTML code we can draw a Document Object Model tree (DOM tree).
• DOM tree is drawn based on the parent and child relationship present between html elements.
• A tree is a finite set of nodes. Nodes in the tree are represented by oval shape. Nodes are connected with one
another by straight lines known as edges.
• First node or top most node in the tree is known as root node. A node containing single child or multiple
children is known as parent node. A node containing no children is known as leaf node.
• Ancestors of a node are any node visited in the path from the selected node to the root node.
(i.e. Parent, Grandparent, Grand grandparent, any node visited up to the root node are considered as
Ancestors)
• Descendants of a node are any node falling under the selected node tree.
(i.e. Direct Children, Children’s Children, or any node that can be reachable from the selected node up to the
leaf node is considered as descendant node)
• Two or more nodes with same parent are known as siblings (i.e. brothers)

DOM TREE
<div>
<header>
<h2> Heading Text </h2>
<p> Paragraph Text </p>
<a href='#'> HyperText </a>
</header>
</div>
<div>
</div>
<footer>
<h2> Heading Text </h2>
</footer>

DESCENDENT SELECTOR (WHITE SPACE)
Descendants of a node are any node falling under the selected node tree.
(i.e. Direct Children, Children’s Children, and so on or any node that can be reachable from the
selected node to the leaf nodes are considered as descendants of node)
It selects any html element targeted by the selector written after the space character, which
is/are descendant(s) of the any html element targeted by the selector written before the space
character.
To implement descendant selector, in place of selector; we write selectors one beside another
separated by the white space character
Syntax of Descendant Selector:
selector1 selector2
{
declaration list;
}
It selects any html element targeted by selector2, which is descendant(s) of any html element
targeted by selector1
Ex:
div p
{
}
It selects any p element, which is
descendant of any div element

CHILD SELECTOR / DIRECT CHILD
SELECTOR
It selects any HTML element targeted by the selector written after the greater than character,
which is a direct child of the any HTML element targeted by the selector written before the greater
than character.
To implement child selector, in place of selector; we write selectors one beside another separated
by the greater than character.
Syntax of Child Selector:
selector1 > selector2
{
declaration list;
}
It selects any HTML element targeted by selector2, which is direct child of any HTML element
targeted by selector1
Ex:
div > p
{
}
It selects any p element, which
is direct child of any div element

ADJACENT SIBLING SELECTOR OF NEXT SIBLING SELECTOR
• It selects any HTML element targeted by the selector written after the + character, which is/are
sibling of and immediately preceded by any HTML element targeted by the selector written
before the + character.
• To implement adjacent sibling selector, in place of selector; we write selectors one beside
another separated by + (plus) sign
Syntax of Adjacent Sibling (+) Selector:
selector1 + selector2
{
declaration list;
}
It selects any HTML element targeted by the selector2, which is sibling of and immediately
preceded by any HTML element targeted by the selector1
Ex:
h2 + p
{
}
It selects any p element which is sibling of and immediately preceded by any h2 element.

GENERAL SIBLING SELECTOR (~)
It selects any HTML element targeted by the selector written after the ~ character, which is/are sibling of and need not be
immediately preceded by but should be preceded by any HTML element targeted by the selector written before the ~ char.
To implement general sibling selector, in place of selector; we write selectors one beside another separated by ~ (tilde) char.
Syntax of Generic Sibling (~) Selector:
selector1 ~ selector2
{
declaration list;
}
It selects any HTML element targeted by the selector2, which is sibling of and need not be immediately preceded by but
should be preceded by any HTML element targeted by the selector1
Ex: General sibling selector:
h2 ~ p
{ border:2px solid red;
}
It selects any p element which is sibling of and need not be immediately preceded by but should be preceded by any h2
element
Ex: Adjacent sibling selector:
h2 + p
{
}
It selects any p element which is sibling of and should be immediately preceded by any h2 element.

ATTRIBUTE SELECTOR [ ]
Attribute selector is used to select HTML elements based on their attribute name and attribute value.
Syntax of attribute selector:
selector [attribute expression]
{
declaration list;
}
Where: selector is optional, it can be tag, class, id selector etc…
attribute expression can be a valid combination of attribute name, value and associated operators.
Ex:
tag selector[attribute name=”value”]
{
declaration list;
}
It selects any HTML element targeted by the tag selector, which contains an attribute name where the attribute
value exactly matches the value specified in attribute expression
Ex:
p[align=”right”]
{
}
It selects any paragraph element, which contains an attribute align, where the align attribute value exactly
matches the value right.

1.
[attribute name]
{
declaration list;
}
It selects any html element, which contains an attribute name written in between the square brackets
Ex:
[align]
{
}
It selects any html element, which contains an attribute with the name align
2.
selector[attribute name]
{
declaration list;
}
It selects any html element targeted by the selector, which contains an attribute name written in between the square
brackets
Ex:
p[align]
{
}
It selects any paragraph element, which contains an attribute with the name align

3.
selector[attribute name=”value”]
{
declaration list;
}
It selects any html element targeted by the selector, which contains an attribute name where the attribute value exactly
matches with the value specified in attribute expression
Ex:
p[align=”center”]
{
}
It selects any paragraph element, which contains an attribute align, where the align attribute value exactly matches with the
value center.
4.
selector[attribute name^=”value”]{
declaration list;
}
It selects any html element targeted by the selector, which contains an attribute name where the attribute value begins with
the value specified in attribute expression
Ex:
a[href^=”https://”]{
}
It selects any anchor element, which contains an attribute href, where href attribute value begins with https://

5.
selector[attribute name$=”value”]{
declaration list;
}
It selects any html element targeted by the selector, which contains an attribute name where the attribute
value ends with the value specified in attribute expression
Ex:
a[href$=”tutorials”]{
}
It selects any anchor element, which contains an attribute href, where href attribute value ends with tutorials
6.
selector[attribute name*=”value”]{
declaration list;
}
It selects any html element targeted by the selector, which contains an attribute name where the attribute
value contains the value specified in attribute expression
Ex:
a[href*=”.com”]{
}
It selects any anchor element, which contains an attribute href, where href attribute value contains .com.

7.
selector[attribute name~=”value”]
{
declaration list;
}
It selects any html element targeted by the selector, which contains an attribute
name where the attribute value is a space separated list of values, and contains
a word specified as the value in the attribute expression
Ex:
a[title~=”my”]
{
}
It selects any anchor element, which contains an attribute title, where title
attribute value contains a word my

8.
selector[attribute name|=”value”]
{
declaration list;
}
It selects any html element targeted by the selector, which contains an attribute
name where the attribute value begins with the value specified in attribute
expression and immediately followed by hyphen (-) character.
Ex:
a[lang|=”en”]
{
}
It selects any anchor element, which contains an attribute lang, where lang
attribute value begins with en word and immediately followed by hyphen (-)
character.

PSEUDO CLASS SELECTOR
Pseudo class selectors are used to select HTML elements based on their current status and apply styles on
them.
Syntax of Pseudo Class Selector:
selector: pseudo class keyword
{
declaration list;
}
It selects any HTML element targeted by the selector, and applies specified styles based on the pseudo class
keyword used
Syntax for “hover” pseudo class selector:
selector : hover
{
declaration list;
}
It selects any HTML element targeted by the selector, if its status is hovered (on mouse over)
Ex:
a:hover
{
background-color : orange;
}
It selects any anchor element, if its status is hovered

PSEUDO CLASS SELECTOR - NAVIGATION
1.
selector : link
{
declaration list;
}
It selects any html element targeted by the selector, if its status is un-visited (or default)
Ex:
a:link
{
text-decoration : none;
}
It selects any anchor element, if its status is un-visited
2.
selector : hover
{ declaration list; }
It selects any html element targeted by the selector, if its status is hovered (on mouse over)
Ex:
a:hover
{ border-bottom : 5px solid blue; }
It selects any anchor element, if its status is hovered

PSEUDO CLASS SELECTOR - NAVIGATION
3.
selector : visited
{declaration list;}
It selects any html element targeted by the selector, if its status is
visited (on click and page visit)
Ex:
a:visited
{
color : green;
}
It selects any anchor element, if its status is visited

PSEUDO CLASS SELECTOR -TARGET
4.
selector : target
{declaration list;}
targeted
(only when element id or name appears as targeted fragment
identifier in the page URI.)
Ex:
p:target
{border : 2px dotted red;}
It selects any p element which is currently a targeted fragment
identifier in the page URI (Uniform Resource Identifier).

PSEUDO CLASS SELECTOR - USER INTERFACE
1.
selector : enabled
{
declaration list;
}
It selects any html element targeted by the
selector, if its status is enabled (default)
2.
selector : disabled
{
declaration list;
}
It selects any html element targeted by the
selector, if its status is disabled
Ex:
input : enabled
{
}
It selects any input element, if its status is
enabled
Ex:
input : disabled
{
background-color : black;
}
It selects any input element, if its status is
disabled

3.
selector : checked
{
declaration list;
}
It selects any html element targeted by the selector, if its status is checked
Ex:
input : checked + span
{
color : white;
background-color : red;
}
It selects any span element, if it is a sibling of and immediately preceded by input
element which is in checked state

4.
selector : focus
{
declaration list;
}
It selects any html element targeted by the selector,
if its status is focused
Ex:
input : focus
{
color : white;
}
It selects any input element, if its status is focused

5.
selector : optional
{
declaration list;
}
optional
Ex:
input : optional
{
color : white;
}
It selects any input element, if its status is optional

6.
selector : required
{
declaration list;
}
required
Ex:
input : required
{
color : white;
}
It selects any input element, if its status is required

PSEUDO CLASS SELECTOR – VALID/INVALID
7.
selector : invalid
{
declaration list;
}
It selects any html element targeted by the selector, if its status is invalid
Ex:
input : invalid
{
color : white;
}
It selects any input element, if its status is invalid

PSEUDO CLASS SELECTOR – VALID/INVALID
8.
selector : valid
{
declaration list;
}
It selects any html element targeted by the selector, if its status is valid
Ex:
input : valid
{
color : white;
background-color : green;
}
It selects any input element, if its status is valid

STRUCTURAL PSEUDO CLASS SELECTORS
They are used to target html elements and apply styles based on the relationship present
between the html elements in the DOM tree structure. (I.e. root, first-child, last-child etc.)
1.
selector : root
{
declaration list;
}
It selects any html element targeted by the selector, if it is the root element in the DOM
tree
Ex:
html : root
{
}
It selects html tag, if it is root element in DOM tree. W.K.T. always html tag will be the
root element of the DOM tree, hence root pseudo class selector always targets to html
element

2.
selector : empty
{
declaration list;
}
It selects any html element targeted by the selector, if it is the empty element
(has no content)
Ex:
p: empty
{
}
It selects any p element, if it is the empty element

3.
selector : first-child
{
declaration list;
}
It selects any HTML element targeted by the selector, if it is the first child of its
parent HTML element
Ex:
p: first-child
{
}
It selects any p element, if it is the first child of its parent HTML element

4.
selector : last-child
{
declaration list;
}
It selects any html element targeted by the selector, if it is the last child of its parent html element
Ex:
p: last-child
{
}
It selects any p element, if it is the last child of its parent HTML element
5.
selector : only-child
{
declaration list;
}
It selects any HTML element targeted by the selector, if it is the only child of its parent HTML element
Ex:
p: only-child
{
}
It selects any p element, if it is the only child of its parent HTML element

4. Web Technology CSS Basics-1

More Related Content

What's hot (20)

Similar to 4. Web Technology CSS Basics-1 (20)

More from Jyoti Yadav (19)

Recently uploaded (20)

4. Web Technology CSS Basics-1