Cascading Style Sheets

Develop by: Zahid Javed

Why is it called Cascading?

Zahid Javed
 More about CSS and different versions

• CSS is the medium through which we can inform

the browser how we want our text or content to
be displayed. Through CSS, we can define how to
render the HTML elements like paragraphs,
tables, list etc in a more stylish and appealing
manner.
• Since the technologies are always evolving, there
have been and will be different versions of CSS.
We have CSS1, CSS2 and CSS3. CSS4 is the current
latest specification.

Zahid Javed
1-Compatibility (CSS2 VS CSS3)

Zahid Javed
2- Rounded corners and Gradients
(CSS2 VS CSS3)

Zahid Javed
3- Animation and Text Effects
(CSS2 VS CSS3)

Zahid Javed
4- List (CSS2 VS CSS3)

Zahid Javed
4- Pseudo-Classes (CSS2 VS CSS3)

Zahid Javed
 Why you should use CSS?

1- Easy to maintain
To update a change simply change the style file and the elements in all web
Pages will be updated automatically.

2- Page loads Faster

Since the style rules are written in another file, the page loads faster. Less
code means more speed.

3- Write once and use many times

You can use the same style sheets for any number of web pages. This saves a
lot of time. Zahid Javed
 Why you should use CSS?

4- Better look than HTML

The CSS has wide variety of attributes than HTML. So, we have
many options to style our elements.

5- Compatible with future browsers

Use CSS to make your code compatible with the future browsers.

Zahid Javed
Why you should use CSS?

Zahid Javed
CSS Syntax

Zahid Javed
 Syntax of CSS

The syntax of CSS two blocks

1. Selector
Selector is any tag on which you wish to apply the styles. Examples of selectors
are body, p, table etc.
2. Declaration block.
The declaration block consists of one or more property-value pairs.
i) Property is the property of the html element you wish to apply styles on like
border, color, background-color etc.
ii) Value is the value you wish to set like #0000FF, center, red etc.
Zahid Javed
Types of Selectors

Zahid Javed
Types of Selectors

Zahid Javed
Types of Selectors

Zahid Javed
Types of Selectors (Descendant )

Result

Zahid Javed
 Types of Selectors (Descendant )

This combinator allows you to select an element

that is a descendant of another element.
"Descendants" here can be child, grandchild, great-
grandchild, great-great-great...and so on.
To use this combinator, you enter an empty space Result
between selectors like this:

Zahid Javed
Types of Selectors (Descendant )
Types of Selectors

Zahid Javed
Types of Selectors

Zahid Javed
Types of Selectors

Zahid Javed
Types of Selectors

Zahid Javed
Types of Selectors

Zahid Javed
Types of Selectors (Child)

Zahid Javed
Types of Selectors (Child)

The descendant combinator matches a child, grandchild, and

so on. The child combinator selects elements that are direct
children of another element.
You use the greater than symbol (>) between selectors to
specify that one selector is a direct child of the other.

Zahid Javed
Types of Selectors (Child)

Result

Result

Zahid Javed
Types of Selectors (Child)
Types of Selectors

Zahid Javed
Types of Selectors

Zahid Javed
Types of Selectors

Zahid Javed
Types of Selectors on Tag

Zahid Javed
Types of Selectors (Adjacent Sibling)

Zahid Javed
 Types of Selectors (Adjacent Sibling)

This combinator is similar to the sibling

combinator. The difference is that Result
while the sibling combinator matches
all siblings that come AFTER an
element, the adjacent combinator
matches only the IMMEDIATE sibling
that comes after an element.

Zahid Javed
Types of Selectors (Adjacent Sibling)
 Types of Selectors ( General Sibling ~)

The sibling combinator used

between selectors matches Result
elements that are siblings of
another element.
To use this combinator, you
enter the tilde (~) symbol.
Here is an example:

Zahid Javed
Types of Selectors (General Sibling ~)
Types of Selectors (Tag’s Attributes)

Zahid Javed
Types of Selectors (Selector: Pseudo-class)

Zahid Javed
https://guinatal.github.io/under
standing-css-combinators/
CSS Combinators

Zahid Javed
CSS Combinators

Zahid Javed
 Attribute Starts With Selector
• <p class="line-first-para">First Paragraph</p>
• <p class="second-para">Second Paragraph</p>
• <p class="line-last">Third Paragraph</p>

[class^="line"] selects elements

with class="line" and either
class="line" or class="line-
first-para".
 Attribute Ends With Selector

• <p class="line-first-para">First Paragraph</p>

• <p class="second-para">Second Paragraph</p>
• <p class="line-last">Third Paragraph</p>

[class$="para"] selects all paragraph

which end with para.
 Attribute Wildcard Selector

• <p class="line-first-para">First Paragraph</p>

• <p class="second-para">Second Paragraph</p>
• <p class="line-last">Third Paragraph</p>

[class*="-"] selects all elements with "-"

in their class, such as class="second-para" or
class="third-para".
Attribute Wildcard Selector
CSS Values / Units

,rem, ch, vh, vw, vmin, vmax

https://www.digitalocean.com/community/tutorials/css-css-units-explained Zahid Javed

CSS can be added to HTML code in 3 ways,

CSS can be added to HTML code in 3 ways,

1. External Style Sheet
2. Internal Style Sheet
3. Inline Style Sheet

Zahid Javed
 External Style Sheet

• This is the most sought method for applying styles to web pages.
• It is an ideal and ultimate choice when we want to style several web pages. The
style rules are supplied in a separate file called CSS file.
• It is created using notepad and saved with .css extension. This CSS file
exclusively contains the style rules we wish to apply to our web site or a group
of web pages.

Zahid Javed
 External Style
Sheet
• Font type or color or anything
like that, we can just edit it in
the CSS file and the change gets
applied wherever it is
applicable. So we can change
the entire look of the web site
by just making change in one
file.

• Each web page is linked to the

style sheet using link tag. The
link tag is included in the head
element.
 Internal Style Sheet

This method of styling has the style

tag in the head section. It is also
called embedded CSS. Rules defined
within style tag would be applicable
to the whole document wherever
applicable.

Zahid Javed
 Internal Style Sheet
The example for inclusion of internal
style sheet is as follows:-
 Inline style sheet

 Using the style attribute we can apply the inline styling to a tag. The applied
styling is only applicable to the tag on which it is used. This is not an efficient
approach as we are combining presentation with the content.
 Inline styles affect the stand alone property of HTML. In the above example, if
we want to change the text to another color, we have to go to each and every
line & edit the code. This consumes a lot of time & effort.
 It is a good idea to avoid inline style sheets whenever and wherever possible.

Zahid Javed
Inline style sheet
CSS can be added to HTML code in 3 ways

Zahid Javed
 CSS
The example for
inclusion of internal style
sheet is as follows:-
Order of Priority
CSS Rule
Inline Vs Internal Vs External

Zahid Javed
 Reference
https://www.educba.com/css-vs-css3/

Zahid Javed