Scribd
Upload
5 views

Lecture Notes-CSS(1)

CSS

Uploaded by

seif
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Lecture Notes-CSS(1)

CSS

Uploaded by

seif
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

Web Development for Business Applications

Lecture Notes: Fundamentals of CSS (1)

Learning Objectives:
• Introduction to CSS
• CSS Selectors
• CSS Rules
• Colors and Text
• CSS Box
• Floating Columns
• Positioning elements
• Display inline block
• Layouts

1. Introduction To CSS

What is CSS? CSS Stands for Cascading Style Sheet, it is used to describe how the content should be
displayed on the browser, print on screen.

In short, CSS handle the looks and feel of the web page. HTML is used to describe the content and CSS
is used to display the content in a presentable way.

Usage of CSS: CSS are written in file with extension .css and it is linked into HTML Page
Help to define the style once and then use it any where on your site,

Help to change the page layout based on the screen site is viewed on like Mobile, Tablet or Computer
Screen

CSS help to separate the presentation work from the HTML page and the developer can focus on building
the content and displayed separately.

Similar like Building a house:


• HTML: Number of rooms
• CSS: the Color of the wall and style
• JavaScript: Focus on the things that
we mainly do in daily life like eating

1|Page
CSS Syntax

1) Selectors: are the HTML tag that you


Want to apply the style on it
2) Custom selectors: are the selectors which
Names doesn’t match with HTML tag name
Like: h1 is selector but h1a is custom selector
Means the attribute you want to change
3) Property represents the attribute that you want to
Apply on html tag
4) Value: is the value of that property
5) { } is called as block.
6) {property: value;} is called as Declaration
7) Collection of Declaration is called as Declaration Block.

you can separate each declaration with ; inside the block


8) Deceleration Property: is predefined like color, font-size it
cannot be custom

In order to start work with CSS can be written in many different places in HTML page.
Internal CSS:

Internal CSS means inside the same HTML page, it is restricted to only specific html page and you cannot
reuse it on other page, <style> tag is used to write the CSS inside this tag.
This tag <style> is defined inside the <head>
It is used as instruction to do something on the page but it doesn’t display it mainly added on <head>

<html> Example: Color the heading in red color,


the Paragraph in Blue Color and list in
<head><style type="text/css"> Green Color
h1{color: red;}
p{color: blue;}
li{color: green;}
</style></head>
<body>
<h1> Heading </h1>
<p> Paragraph Text </p>
<ul><li> Item 1</li><li> Item 2 </li> <li> Item 3
</li></ul> </body></html>

2|Page
Example 2: Change the font size of h1, p and li tags

<html><head>
<style type="text/css">
h1{color: red;
font-size:12px;}
p{color: blue;
font-size:24px;}
li {color: green;
font-size:48px;}
</style></head>
<body>
<h1> Heading </h1>
<p> Paragraph Text </p>
<ul><li> Item 1</li>
<li> Item 2 </li> <li> Item 3 </li></ul>
</body></html>

CSS Comments: You can use the Special notation to comment the code inside the CSS

External CSS:

CSS Code can be written in many different places in HTML page.


One of the methods of defining the CSS is externally which means you can write CSS inside a file and
import it into HTML page.
External CSS means the CSS is written externally into another file which is later linked in the page.
This type of external CSS is very powerful and helpful technique which is commonly used in every
website development.

3|Page
External CSS filename should be .css and it is included in the <head> section
with <link> tag.

1) <link> tag is used to link the resource to the HTML page. The attribute of
link tag will let the browser knows what type of resource it is.
2) rel attribute is used to tell browser what kind of resource it is. rel =
“stylesheet” means it is a file with CSS inside it.
3) type attribute tells the type of the content in the file. In this case, it is text/css
4) href attribute is similar to <a> tag href to map the location of the file in the
server with the path and filename.

Example: this example has 2 files css.html and style23.css

Change the font size and color of h1, p and li tags in style23.css and embed the CSS file in the HTML
page.

HTML Page CSS Page Output


<html><head> /*CSS Comments*/
<link rel="Stylesheet" type="text/css" h1{color: red;
href="style23.css"></head>
font-size:12px;}
<body>
p {color: blue;
<h1> Heading </h1> .
font-size:24px;}
<p> Paragraph Text </p>
li {color: green;
<ul><li> Item 1</li>
font-size:48px;}
<li> Item 2 </li> <li> Item 3 </li></ul>
</body></html>

4|Page
Inline CSS:
Usage of Inline CSS Inline CSS is defined inside the tag itself like an attribute.
Inline CSS overrides all the styles defined in internal CSS and External CSS.
This is defined in the HTML tag as an attribute.
Example: Write Inline CSS and change the h1 tags color and font size as red, paragraph
as blue and list as green

<html>
<head>
</head>
<body>
<h1 style="color: red; font-size:12px;"> Heading </h1>
<p style="color: blue; font-size:24px;"> Paragraph
Text</p>
<ul style="color: green; font-size:48px;"><li> Item 1</li>
<li> Item 2 </li> <li> Item 3 </li></ul>
</body></html>

Linking CSS: Sometimes there is some font style or format on another CSS page you need to add it on
your page to make more presentable so in order to find suitable font style the below link contains several
font styles
https://fonts.google.com/
for example, if I need to add Poppins font family search for it once you choose the style

5|Page
You can create the multiple CSS file and import the one css file into another css file.
Take the import code from the format you choose on the plus sign choose @ import code to take it to CSS
page and add for the tag you want the font family you choose

Example: Change Heading 1 tag font family style into Poppins


HTML Page CSS Page Output

<html> /*CSS Comments*/


<head> @import
url('https://fonts.googleapis.com/css2?family=
<link rel="stylesheet"
Caveat&family=Playpen+Sans:wght@300&fa
type="text/css" href="style23.css">
mily=Poppins:ital,wght@0,200;0,400;1,300&
</head><body> display=swap');

<h1>Heading </h1> h1{color: red;

<p>Paragraph Text </p> font-size:12px; font-family: Poppins;}

<ul><li> Item 1</li> p {color: blue;

<li> Item 2 </li> <li> Item 3 font-size:24px;}


</li></ul>
li {color: green;
</body></html>
font-size:48px;}

6|Page
Example 2 :
HTML Page CSS Page
<html> /*CSS Comments*/
<head> @import
<link rel="stylesheet" type="text/css" url('https://fonts.googleapis.com/css2?family=C
href="style23.css" aveat&family=Playpen+Sans:wght@300&famil
y=Poppins:ital,wght@0,200;0,400;1,300&displ
</head> ay=swap');
<body>
<h1 style="color: red; text-align: center;">This is *{border-style: solid;
Inline Style with Heading and Center </h1>
border-color: red;}
<p>Paragraph Text with 20px font size, bold,
italics and aligned center</p> <p>Power of CSS!! p {font-size:20px; font-weight:bold;
</p> font-style: italic;
</body></html> text-align: center;}

Output:

2. CSS Selectors:

1) Selectors and Declarations: A CSS rule made up of two parts:


Selector Declaration

7|Page
Selector is used to indicate which element this rule should be applied to.

You can even write multiple elements by separating them by (,)


\

P, h1, li elements will be red in color with this one CSS rule.
Declaration indicates what is the rule to be applied on that element. The rule is indicated with
Property: value.

Multiple Declarations are separated


With Semi Colons ;

Example: Make all the text on the body blue


in color with one CSS rule.

HTML Page CSS Page Output

<html> /*CSS Comments*/


<head> @import
url('https://fonts.googleapis.com/c
<link rel="stylesheet"
ss2?family=Caveat&family=Play
type="text/css"
pen+Sans:wght@300&family=Po
href="style23.css">
ppins:ital,wght@0,200;0,400;1,30
</head><body> 0&display=swap');

<h1> Heading </h1>


<p> Paragraph Text </p> h1, p, li {

<ul><li> Item 1</li><li> Item 2 color: blue; }


</li><li> Item 3
</li></ul></body></html>

8|Page
Example2: Add two declarations for each selector and change the CSS to see the following output.
HTML Page CSS Page Output
<html> /*CSS Comments*/
<head> @import
<link rel="stylesheet" url('https://fonts.googleapis.com/css2?family=
type="text/css" Caveat&family=Playpen+Sans:wght@300&fami
href="style23.css"> ly=Poppins:ital,wght@0,200;0,400;1,300&displ
ay=swap');
</head><body>
h1{color: red;
<h1> Heading </h1>
font-size:12px;}
<p> Paragraph Text </p>
p {color: blue;
<ul><li> Item 1</li><li> Item
2 </li><li> Item 3 font-size:24px;}
</li></ul></body>
li{ color:green;
</html>
font-size:48px;}

2) Universal Selectors
Universal Selectors is the rule that you want to apply for all elements of the page.
Wild Character “*” is used to represent the universal selector

Universal selector is applied on all the elements of the page. Here all page tags will be red.

Example: Write two CSS rule Using Universal Selector change the color to red Change the h1 tag color
to blue. Observe the result.

9|Page
HTML page CSS Page Output

<html> /*CSS Comments*/

<head> @import
url('https://fonts.googleapis.com/
<link rel="stylesheet"
css2?family=Caveat&family=Playp
type="text/css" href="style23.css">
en+Sans:wght@300&family=Poppi
</head><body> ns:ital,wght@0,200;0,400;1,300&
display=swap');
<h1> Heading </h1>
*{color: red; }
<p> Paragraph Text </p>
<ul><li> Item 1</li><li> Item 2 h1{color: blue;}
</li><li> Item 3 </li></ul></body>
</html>

3) Type Selector: are defined with HTML tags only


When you find any selector that has a rule applied on the HTML tags then it is called type selector
Example: Write the CSS rule with Type Selectors Make the font size of h6
biggest and h1 smallest. Make all the headings tags blue in color.
HTML Page CSS Page Output

<html> /*CSS Comments*/

<head> @import
url('https://fonts.googleapis.com/
<link rel="stylesheet"
css2?family=Caveat&family=Playp
type="text/css" href="style23.css"
en+Sans:wght@300&family=Poppi
</head> ns:ital,wght@0,200;0,400;1,300&
display=swap');
<body>
h1{font-size:12px;}
<h1> Heading </h1>
<h6> Heading6 </h6> h6{font-size:48px;}

</body></html>

10 | P a g e
Example 2: Do the following steps: Make h1 and h2 same size and color. h3 and h4 same size and
color h5 and h6 same size and color. All the headings should be in Italics

HTML Page CSS Page Output

<html> @import
url('https://fonts.googleapis.com/
<head>
css2?family=Caveat&family=Playp
<link rel="stylesheet" en+Sans:wght@300&family=Poppi
type="text/css" href="style23.css"> ns:ital,wght@0,200;0,400;1,300&
display=swap');
</head>
<body> *{ font-style: italic;}

<h1> Heading </h1> h1, h2{font-size:12px;

<h2> Heading </h2> color: red;}

<h3> Heading </h3> h3, h4{font-size:24px;

<h4> Heading </h4> color: blue;}

<h5> Heading </h5> h5, h6{font-size:48px; color:


green;}
<h6> Heading6 </h6>
</body></html>

4) Class Selector
Usage of Class Selector Class Selector is custom selector that you can create
in the CSS rules and apply it to any HTML tag with class attribute.
Class selector names are custom so you should NOT use the predefined HTML tag names.
Custom Selector names are class selectors that can be applied to any HTML tag.
Class selector can be defined to any specific HTML tags and applied to any specify the tags.

You define the class selector with “.” in-front of it


If the selector starts with “.” and it name is not HTML tag then it is called as Class Selector.

11 | P a g e
If you want to create class selector only specific to HTML tags then use this notation

Example: Write the CSS rule with Class Selector Create one rule called as “. headings” and make the
color as blue, align center and italics.
HTML Page : CSS Page Output
<html> /*CSS Comments*/
<head> @import
<link rel="stylesheet" url('https://fonts.googleapis.com/
type="text/css" href="style23.css"> css2?family=Caveat&family=Playp
en+Sans:wght@300&family=Poppi
</head> ns:ital,wght@0,200;0,400;1,300&
<body> display=swap');

<h1 class="headings"> Heading . headings {


</h1>
color: blue;
<h1 class=”headings”> Head </h1>
text-align: center;
</body>
font-style: italic;}
</html>

12 | P a g e
Example 2: Create a class selector only for h1 tag. Even if this class selector is applied to other tags like
p it should not work.
HTML Page CSS Page

<html> /*CSS Comments*/


<head> @Import
url('https://fonts.googleapis.com/css2?family=Caveat&family=Playp
<link rel="stylesheet"
type="text/css" href="style23.css"> en+Sans:wght@300&family=Poppins:ital,wght@0,200;0,400;1,300&
display=swap');
</head>
h1. headings {
<body>
color: blue;
<h1 class="headings"> Heading
</h1> text-align: center;

<p class="headings"> Paragraph font-style: italic;}


Text</p>
</body></html>

Output

5) Class Multiple Selector:


You can apply the selector to the parent HTML tag and all the child elements will inherit the property
from the parent tags properties.

13 | P a g e
Example:
HTML Page CSS Page

<html> /*CSS Comments*/


<head> @Import
url('https://fonts.googleapis.com/css2?family=Caveat&family=Playp
<link rel="stylesheet"
type="text/css" href="style23.css"> en+Sans:wght@300&family=Poppins:ital,wght@0,200;0,400;1,300&
display=swap');
</head>
div. align-center {
<body>
text-align: center;}
<div class="align-center">
<p>Hello PSUT</p>
</div>
<div>
<p class="align-center">Hello
PSUT</p>
</div>

Output
</body></html>

Example 2: Apply the class top tag inside the h1 tag. Write some text inside the h1 tag.
Apply the class to div tag inside the h1 tag and write p tag inside the div tag. Guess the output

14 | P a g e
HTML Page CSS Page

<html> /*CSS Comments*/


<head> @Import
url('https://fonts.googleapis.com/css2?family=Caveat&f
<link rel="stylesheet"
type="text/css" href="style23.css"> amily=Playpen+Sans:wght@300&family=Poppins:ital,wg
ht@0,200;0,400;1,300&display=swap');
</head>
. align-center{
<body>
text-align: center;}
<h1> Hello PSUT<p class="align-
center">BIT Students</p></h1>
<h1>
<div class="align-center">
<p> Paragraph text </p>
</div> </h1> </body></html>

Output

6) ID Selectors

ID Selector is custom selector that you can create in the CSS rules and apply it to any HTML tag with id
attribute.
ID selector names are custom so you should NOT use the predefined HTML tag names.
Custom Selector names can be ID selectors that can be applied to any HTML tag.
You define the ID selector with “#” in-front of it.

15 | P a g e
Remove the “#” when the class selector is applied to the HTML tag attribute.
If you want to create ID selector only specific to HTML tags then use this notation

Example: Create one rule called as “#headings” and make the color as red, align center
and italics
HTML Page CSS Page Output

<html> /*CSS Comments*/


<head> @import
url('https://fonts.googleapis.com/css2?
<link rel="stylesheet"
family=Caveat&family=Playpen+Sans:w
type="text/css" href="style23.css">
ght@300&family=Poppins:ital,wght@0
</head> ,200;0,400;1,300&display=swap');
<body> #headings {
<h1 id="headings"> Heading 1 color: red;
</h1>
text-align: center;
</body></html>
font-style: italic;}

16 | P a g e
Example: Create an ID selector only for h1 tag. Even if this ID selector is applied to other tags like p it
should not work.
and italics
HTML Page CSS Page

<html> /*CSS Comments*/


<head> @import
url('https://fonts.googleapis.com/css2?family=Caveat&family=Plaype
<link rel="stylesheet"
type="text/css" href="style23.css"> n+Sans:wght@300&family=Poppins:ital,wght@0,200;0,400;1,300&dis
play=swap');
</head>
h1#headings {
<body>
color: red;
<h1 id="headings"> Heading 1
</h1> text-align: center;

<p id="headings">Paragraph Text font-style: italic;}


</p>
</body></html>

Output

7) Multiple IS Selectors

You can apply the selector to the parent HTML tag and all the child elements
will inherit the property from the parent tags properties.

17 | P a g e
Example: Write the CSS rule with Multiple ID Selector Create one rule called as “. align-center” for p
tag and h1 tag. Write p tag inside the h1 tag..
HTML Page CSS Page

<html> /*CSS Comments*/


<head> @import
url('https://fonts.googleapis.com/css2?family=Caveat&family=Plaype
<link rel="stylesheet"
type="text/css" href="style23.css"> n+Sans:wght@300&family=Poppins:ital,wght@0,200;0,400;1,300&dis
play=swap');
</head>
#align-center{
<body>
text-align: center;
<h1 id="align-center"><p> Hello
PSUT</p></h1> color: green;

<h1>Welcome<p id="align- }
center">BIT Students</p></h1>
</body></html>

Output

Example2:

18 | P a g e
HTML Page CSS Page

<html> /*CSS Comments*/


<head> @import
url('https://fonts.googleapis.com/css2?family=Caveat&family=Plaype
<link rel="stylesheet"
type="text/css" href="style23.css"> n+Sans:wght@300&family=Poppins:ital,wght@0,200;0,400;1,300&dis
play=swap');
</head>
#align-center {
<body>
text-align: center;
<h1> Hello PSUT<p id="align-
center">BIT Students</p></h1> color: green;

<h1> }

<div id="align-center">
<p> Paragraph text </p>
</div> </h1> </body></html>

Output:

8) Attribute Selector:
Attribute selector helps to apply the CSS rule when some specific condition is met on the HTML
attribute. One example is when you want apply color red on all the <p> tag when it has class attribute
with any value

p[class] this attribute selector tells the browser to apply the rule to the HTML Tag when it has
the class attribute.

19 | P a g e
HTML Page CSS Page Output

<html> /*CSS Comments*/


<head> @import
url('https://fonts.googleapis.com/css2
<link rel="stylesheet"
type="text/css" href="style23.css"> ?family=Caveat&family=Playpen+Sans
:wght@300&family=Poppins:ital,wght
</head> @0,200;0,400;1,300&display=swap');
<body> p[class]{
<p class="redcolor"> Hello PSUT color: red;}
</p>
<p class="heading"> Welcome </p>
</div> </h1> </body></html>

Example: Make p red when it has class and id both.

HTML Page CSS Page Output

<html> /*CSS Comments*/


<head> @import
url('https://fonts.googleapis.com/css2
<link rel="stylesheet"
type="text/css" href="style23.css"> ?family=Caveat&family=Playpen+Sans
:wght@300&family=Poppins:ital,wght
</head> @0,200;0,400;1,300&display=swap');
<body> p[class][id] {
<p class="redcolor" id="red"> Hello color: red;}
PSUT </p>
<p class="heading"> Welcome </p>
</div> </h1> </body></html>

20 | P a g e
Example: Make border radius for input form type text by 5pt
HTML Page CSS Page

<html> /*CSS Comments*/


<head> @import
url('https://fonts.googleapis.com/css2?family=
<link rel="stylesheet" type="text/css"
href="style23.css"> Caveat&family=Playpen+Sans:wght@300&fam
ily=Poppins:ital,wght@0,200;0,400;1,300&disp
</head> lay=swap');
<body> input[type=text] {
<form> border-radius:10pt;
<label for="fname"> First Name </label> }
<input type="text" placeholder="Enter your
name"><br><br>
<label for="lname">Last Name </label>
<input type="text" placeholder="Enter your
family name"><br>
<input type="button"
value="Submit"></form>
</body></html>

Output

21 | P a g e
9) Child Selector
Child Selector are used to pin point the location of the HTML tag in the nested HTML
sections.
“>” greater than symbol is used to point the location of the HTML tag.
If you want to apply the rule to anchor tag inside the paragraph tag then you can use the child
selector to apply the style to only tag inside the tag.

HTML Page CSS Page Output


<html> /*CSS Comments*/
<head> @import
url('https://fonts.googleapis.com/css2?fa
<link rel="stylesheet" type="text/css"
href="style23.css"> mily=Caveat&family=Playpen+Sans:wght
@300&family=Poppins:ital,wght@0,200;
</head> 0,400;1,300&display=swap');
<body> p>a{
<p> <a href="#"> Click 1 </a> </p> color:red;
<p> <a href="#"> Click 2 </a></p> }
</body></html>

Example2: Apply the CSS color red when tag is inside the and it has the class and id attribute
only. HTML Page CSS Page
Output
<html> /*CSS Comments*/
<head> @import
url('https://fonts.googleapis.com/css2?fa
<link rel="stylesheet" type="text/css"
href="style23.css"> mily=Caveat&family=Playpen+Sans:wght
@300&family=Poppins:ital,wght@0,200;
</head> 0,400;1,300&display=swap');
<body> p>a[class][id]{
<p> <a href="#" class="red" id="red"> Click color:red;
1 </a> </p>
}
<p> <a href="#"> Click 2 </a></p>
</body></html>

22 | P a g e
10) Descendant Selector
Descendant Selector rule is used when you want to apply rule to for every
element under one parent element.
Selectors are separated with ‘ ‘ (space) to indicate they are parent and child relation.
Example: make all a tags as green inside the body
HTML Page CSS Page Output
<html> /*CSS Comments*/
<head> @import
url('https://fonts.googleapis.com/css2?fa
<link rel="stylesheet" type="text/css"
href="style23.css"> mily=Caveat&family=Playpen+Sans:wght
@300&family=Poppins:ital,wght@0,200;
</head> 0,400;1,300&display=swap');
<body> body a{
<p> <a href="#"> Click 1 </a> </p> color: green;}
<p> <a href="#"> Click 2 </a></p>
</body></html>

Example2: Apply the CSS color red when tag is inside the with descendant and also child
selectors. Observe which rule is applied.(it will apply the last rule in css )
HTML Page CSS Page Output
<html> /*CSS Comments*/
<head> @import
url('https://fonts.googleapis.com/css2?fa
<link rel="stylesheet" type="text/css"
href="style23.css"> mily=Caveat&family=Playpen+Sans:wght
@300&family=Poppins:ital,wght@0,200;
</head> 0,400;1,300&display=swap');
<body> p a{
<p> <a href="#"> Click 1 </a> </p> color:red;}
<p> <a href="#"> Click 2 </a></p> p>a{
</body></html> color:blue;}

23 | P a g e
11) Adjacent Sibling Selector ( ‫)األقرب‬
Adjacent Sibling Selector rule is used when you want to apply rule to for the first element
which is one after the other.
Selectors are separated with ‘+’ (plus) sign to indicate the rule is applied one after the other
h1 + a {color: red;}
means apply the rule to only the first adjacent sibling <a> tag after h1.
Example: Write the CSS rule with Adjacent Selectors First make the <a> tag as blue Apply this
rule only when <h1> is adjacent to another <a> tag
here the first a apply blue color only.
HTML Page CSS Page Output
<html> /*CSS Comments*/
<head> @import
url('https://fonts.googleapis.com/css2?fa
<link rel="stylesheet" type="text/css"
href="style23.css"> mily=Caveat&family=Playpen+Sans:wght
@300&family=Poppins:ital,wght@0,200;
</head> 0,400;1,300&display=swap');
<body> h1+a{
<h1> Hello</h1> color:blue;
<a href="#"> Click 1 </a> <br> }
<a href="#"> Click 2 </a>
</body></html>

Example2: Apply the CSS color red when tag is inside the with descendant and also child
selectors and also with Adjacent Siblings Selector. (Child selector will be applied)

<html> /*CSS Comments*/ Output

<head> @import
url('https://fonts.googleapis.com/css2?fa
<link rel="stylesheet" type="text/css"
mily=Caveat&family=Playpen+Sans:wght
href="style23.css">
@300&family=Poppins:ital,wght@0,200;
</head> 0,400;1,300&display=swap');
<body> p a{color: red;}
<p><a href="#"> Click 1 </a></p> p>a{color: blue;}
<p><a href="#"> Click 2 </a></p> p+a{color: green;}
</body></html>
24 | P a g e
12) General Sibling Selector
General Adjacent Sibling Selector rule is used when you want to apply rule to
for every element which is one after the other. Selectors are separated with

‘~’ (plus) sign to indicate the rule is applied one after the other

h1 ~ a {color: red;}: means apply the rule to all the adjacent sibling <a> tag after h1.
<h1>Test</h1>
<a href=” #”>Red1</a>
<a href=” #”>Red2</a>
<a> with Red1 is adjacent to <h1> and sibling as well.
<a> with Red2 is also near adjacent to <h1>

Example: Apply the CSS color when <a> tag is inside the <p> with descendant and
also, child selectors and also with Adjacent Siblings Selector and also the
general sibling selector.(Child selector will be applied)
HTML Page CSS Page Output
<html> /*CSS Comments*/
<head> @import
url('https://fonts.googleapis.com/css2?fa
<link rel="stylesheet" type="text/css"
href="style23.css"> mily=Caveat&family=Playpen+Sans:wght
@300&family=Poppins:ital,wght@0,200;
</head> 0,400;1,300&display=swap');
<body> p a{ color:red;}
<p><a href="#"> Click 1 </a></p> p>a{color:blue; }
<p><a href="#"> Click 2 </a></p> p+a{color:green;}
</body> p~a{color: orange;}
</html>

25 | P a g e
13) Pseudo Classes

Pseudo Class Selector are predefined class that are available to use for the HTML tags.
For Example, you want to change the color of link when someone mouse over the link.
This is done by predefined class for the HTML tags called as Pseudo Class Selectors.
Example1:
HTML Page CSS Page Output
<html> /*CSS Comments*/
<head> @import
url('https://fonts.googleapis.com/css2?fa
<link rel="stylesheet" type="text/css"
href="style23.css"> mily=Caveat&family=Playpen+Sans:wght
@300&family=Poppins:ital,wght@0,200;
</head> 0,400;1,300&display=swap');
<body> a: hover {
<p><a href="#"> Click 1 </a></p> color: red;}
<p><a href="#"> Click 2 </a></p>
</body></html>

Example2: hover button green in form


HTML Page CSS Page

<html> /*CSS Comments*/


<head> @import
url('https://fonts.googleapis.com/css2?fa
<link rel="stylesheet" type="text/css" href="style23.css">
mily=Caveat&family=Playpen+Sans:wght
</head><body> @300&family=Poppins:ital,wght@0,200;
0,400;1,300&display=swap');
<form><label for="fname"> First Name </label>
<input type="text" placeholder="Enter your name"><br><br> input[type=button]:hover{

<label for="lname">Last Name </label> color:green;}

<input type="text" placeholder="Enter your family name"><br>


<input type="button" value="Submit"></form>
</body></html>

26 | P a g e
Output

14) Pseudo Elements


Pseudo Elements Selector are rules that you want to add right after the element is closed.
Irrespective of what is there after the tag. For Example, you want to add “!!!” after every
paragraph ending. Then you can use the Pseudo Element Selector.
Pseudo class are separated with “::” along with the HTML tags
Example1: add !!! after the p tag and before p tag
HTML Page CSS Page Output

<html> /*CSS Comments*/


<head> @import
url('https://fonts.googleapis.com/css2?fa
<link rel="stylesheet" type="text/css"
href="style23.css"> mily=Caveat&family=Playpen+Sans:wght
@300&family=Poppins:ital,wght@0,200;
</head> 0,400;1,300&display=swap');
<body> p::after{
<p> Power CSS</p> content:"!!!";}
</body></html>

<html> /*CSS Comments*/

<head> @Import
url('https://fonts.googleapis.com/css2?fa
<link rel="stylesheet" type="text/css"
mily=Caveat&family=Playpen+Sans:wght
href="style23.css">
@300&family=Poppins:ital,wght@0,200;
</head> 0,400;1,300&display=swap');
<body> p::before{ content:"!!!";}
<p> Power CSS</p></body></html>

27 | P a g e

You might also like