4
Style Sheets &
Advanced Selectors
By: Rahul Kumar
1
What we have learnt so far
● HTML Tags and related CSS Properties
● Image and Attribute Tags
● CSS Basic Selectors
● Inline and Internal CSS Styling using
<style> tag
2
Listing Items on our Webpage
3
Creating Lists in our Web Page
● Organizes Content
● Improves Accessibility
● Facilitates Easy Comprehension
● Enhances Readability
4
Type of Lists
Ordered List
Unordered List
Wikipedia
Flipkart
5
Ordered List
Used when sequence or ranking of items matter, like steps in a process etc.
6
Ordered List
7
List Item
Each individual item in a list is a list item and is contained within the <li> tags. Each
list item must be enclosed within a list.
8
Unordered List
Used when sequence or ranking of items does not matter, like list of items, shopping
list etc.
9
Unordered List
10
Advanced Selectors
11
HTML DOM Tree
A hierarchical structure that represents the structure of an HTML document in a tree
format, acronym for ‘Document Object Model’.
12
Descendant Selector
Used to apply styles to the specified children elements inside the parent element, no
matter how deep they are nested.
13
Descendant Selector
14
Child Selector
Used to apply styles to the direct children elements inside the parent element, means
just one level deep with respect to the parent element.
15
Child Selector
16
General Sibling Selector
Used to apply styles to all the siblings (sharing the same level) coming after the
specified element.
17
General Sibling Selector
18
Adjacent Sibling Selector
Used to apply styles to the next immediate sibling element of the specified element.
19
Adjacent Sibling Selector
20
Attribute Selector
Used to apply styles to the elements having a specific attribute.
21
Attribute Selector
22
Pseudo Selectors
23
Pseudo Classes
We can also add styles to an element according to the state it is in, using special
keywords called pseudo-classes.
Like putting styles on an element, that will be visible only when the user hovers the
cursor over it.
24
Syntax of adding Pseudo Classes
usualSelector:pseudoClass {
/* Styles Here */
25
:hover
hover pseudo class applies styles to an element when the user hovers over the
element, but does not necessarily activate it.
26
:active
active pseudo class applies styles to an element when the user activates the
element, like clicking on a link(anchor tag) means activating it.
27
:visited
visited pseudo class applies styles to an anchor element(with a valid href attribute)
once the user has visited the link.
28
:visited
29
:first-child
first-child pseudo class applies styles to the first element among a group of sibling
elements.
30
:last-child
last-child pseudo class applies styles to the last element among a group of sibling
elements.
31
:nth-child
nth-child pseudo class applies styles to the sibling elements based on an index.
We can give complex patterns to this pseudo class as well.
32
Pseudo Elements
We can also add styles to a specific part of the selected element, using special
keywords called pseudo-elements.
Like putting to just the first-letter of first-line of a paragraph.
An article from the ‘New Yorker’ site styling just the first letter
33
Syntax of adding Pseudo Elements
usualSelector::pseudoElement {
/* Styles Here */
34
::first-line
first-line pseudo element applies styles to the first line of an element*.
35
::first-letter
first-letter pseudo element applies styles to the first letter of the first line of an
element*.
36
Adding Content using Pseudo Elements
Pseudo Elements also allow us to add some content before or after an element
and style it there only.
37
::before
38
::after
39
External CSS
40
Uniform Styles in Web Pages
41
External CSS Styles
Adding CSS Styles to each web page using inline or internal CSS would be too much
work, if our website has hundreds of pages.
Ex. Each blog in a blogging site follows the same pattern.
In such a case, we use external style sheets, define styles there, and then, link those
styles to each of our HTML files to put those styles on that respective web page.
HTML File → .html extension
CSS File → .css extension
42
How to link CSS file to HTML file?
43
<link> tag
44
Knowledge Sprint
45
Thanks
for
watching!
46
