Web Technologies (CSC336)

Week 03-04
Introduction to CSS

MIAN MUHAMMAD TALHA

LECTURER
DEPARTMENT OF COMPUTER SCIENCE
COMSATS UNIVERSITY ISLAMABAD, WAH
CAMPUS
 Layout
01 Recap of Week 02

02 What is CSS?

03 Basic Structure of CSS

04 Self Learning Task
05 How to Add CSS ?

06 Famous CSS Concepts

07 Graded Self Learning Task

Prepared by Mian Muhammad Talha 2

 01.

Recap of
Week
02-03
Prepared by Mian Muhammad Talha 3
 Previous Week

• HTML is the skeleton of a web page – it provides the basic structure

and framework for everything you see online

• Basic Structure of HTML contains Tags, Elements and their Attributes

• <h1> - <h6> , <p> , <a> , <img> , <table> , <form> , <list> ………

• Styling Attributes

• Self Learning Exercise

Prepared by Mian Muhammad Talha 4

 What is
CSS ?

Prepared by Mian Muhammad Talha 5

 What is CSS?
• Cascading Style Sheets, fondly referred to as CSS, is a simple design
language intended to simplify the process of making web pages
presentable.

• CSS is a MUST for students and working professionals to become a

great Software Engineer specially when they are working in Web
Development Domain.

Prepared by Mian Muhammad Talha 6

 What is CSS?

• Visual Styling: CSS is a language for visually styling web pages,

controlling colors, fonts, spacing, and layout.

• Separation of Design: It separates the design (CSS) from the content

(HTML), making maintenance and updates easier.

• Responsive Design: CSS enables responsive layouts, adapting web

content to different devices and screen sizes.

• Modern Features: CSS3 introduces advanced features like flexbox, grid

layout, and animations for enhanced design possibilities.

Prepared by Mian Muhammad Talha 7

 HTML

CSS
Prepared by Mian Muhammad Talha 8
 Advantages of CSS
• Reusable Styling: Write CSS once, apply it across multiple HTML pages,
saving time and effort.

• Faster Page Loads: Use concise CSS rules instead of repetitive HTML
attributes for quicker download times.

• Effortless Updates: Modify a style globally, and all elements across web pages
automatically update.

• Enhanced Design: CSS offers a wider range of attributes, elevating the visual
appeal of HTML pages.

• Cross-Device Compatibility and Standards: CSS optimizes content for

diverse devices, ensuring consistency and future-proof compatibility with global
web standards.
Prepared by Mian Muhammad Talha 9
 Basic
Structure of
CSS

Prepared by Mian Muhammad Talha 10

 CSS Structure

A CSS comprises of style rules that are interpreted by the browser and then
applied to the corresponding elements in your document. A style rule is
made of three parts −

• Selector − A selector is an HTML tag at which a style will be applied.

This could be any tag like <h1> or <table> etc.

• Property − A property is a type of attribute of HTML tag. Put simply, all

the HTML attributes are converted into CSS properties. They could be
color, border etc.

• Value − Values are assigned to properties. For example, color property

can have value either red or #F1F1F1 etc.
Prepared by Mian Muhammad Talha 11
 CSS Selectors

selector { property: value }

How many tags are there?

Prepared by Mian Muhammad Talha 12
 CSS Selectors

Type Selector
This is the same selector we have h1 {
seen above. Again, one more example
to give a color to all level 1 headings color: #36CFFF;
− }

The Universal
*{ Selectors
Rather than selecting elements of a
specific type, the universal selector
color: #000000; quite simply matches the name of any
} element type −
Prepared by Mian Muhammad Talha 13
 CSS Selectors

Type Selector
This is the same selector we have h1 {
seen above. Again, one more example
to give a color to all level 1 headings color: #36CFFF;
− }

The Universal
*{ Selectors
Rather than selecting elements of a
specific type, the universal selector
color: #000000; quite simply matches the name of any
} element type −
Prepared by Mian Muhammad Talha 14
 HTML without CSS

Prepared by Mian Muhammad Talha 15

 Type & Universal Selector

Type Selector will set Blue

color to only <h2> element

Universal Selector will set

every element content italic

Prepared by Mian Muhammad Talha 16

 CSS Selectors

ID Selector #intro {
The ID selector in CSS is used to
select and style a single unique font-size: 18px;
element on a web page. Each HTML color: blue;
element can have a unique ID font-weight: bold;
attribute, and the ID selector targets
that specific element to apply styling. }

h1#intro {
font-size: 18px; This rule renders the content for only
color: blue; <h1> elements with id attribute set to
intro.
}
Prepared by Mian Muhammad Talha 17
 ID Selector

id = “practice” has been set to

<p> thus its content style will be
updated

Prepared by Mian Muhammad Talha 18

 CSS Selectors

Class Selector
You can define style rules based on
the class attribute of the elements. All
the elements having that class will be .black {
formatted according to the defined color: #000000;
rule. }

h1.black { This rule renders the content in black

color: #000000; for only <h1> elements with class
} attribute set to black.

Prepared by Mian Muhammad Talha 19

 Single Class Selector

Class = “practice” has been set to

<h1> and <p> elements but this
selector will only apply text-
alignment to <h1> element.

Prepared by Mian Muhammad Talha 20

 Multiple Class Selector

This <p> element will be styled

by Multiple-Classes (.practice and
.try)

Prepared by Mian Muhammad Talha 21

 CSS Selectors

Grouping
Selector
A grouping selector in CSS allows you to h1, h2, h3 {
apply the same styles to multiple color: #36C;
selectors at once, reducing redundancy font-weight: normal;
and making your CSS code more concise. letter-spacing: .4em;
This is particularly useful when you want margin-bottom: 1em;
several elements to share the same text-transform: lowercase;
styling rules.
}

Prepared by Mian Muhammad Talha 22

 Grouping Selector

These styles will be shown on

every <h1> and <p> elements
present in the code.

Prepared by Mian Muhammad Talha 23

 Self
Learning
Task
Prepared by Mian Muhammad Talha 24
 Self Learning Task

Explore Selectors
There are some selectors such as
Descendent Selector, Child Selector,
Attribute Selector.
Explore these selectors, apply them in
your code and see how they can change
the appearance of your code.

Prepared by Mian Muhammad Talha 25

How to Add
CSS ?

Prepared by Mian Muhammad Talha 26

 How to add CSS ?

There are three ways of inserting a style sheet:

• Inline CSS
• Internal CSS
• External CSS

Prepared by Mian Muhammad Talha 27

 Inline CSS

• Inline CSS: You can use style attribute of any HTML element to
define style rules. These rules will be applied to that element only.

• It overrides any external or internal styles. While it offers immediate

styling control, it can lead to less maintainable and harder-to-manage
code, especially for larger projects.

<p style="color: blue;">This is a blue paragraph.</p>

Prepared by Mian Muhammad Talha 28

 Inline CSS

Prepared by Mian Muhammad Talha 29

 Internal CSS

• Internal CSS is defined within the <style> element in the HTML

<head> section. It affects the styles of the elements on that specific
web page.

• This approach offers a balance between inline CSS and external CSS,
allowing you to apply styles to specific pages.
<style>
h1 ,h2, h3 {
color: #36C;
font-weight: normal;
text-transform: lowercase;
}
</style>
Prepared by Mian Muhammad Talha 30
 External CSS

• External CSS refers to a method of styling web content by using a

separate, linked stylesheet file to apply design and layout rules to
HTML documents.

• You define all the Style rules within this text file and then you can
include this file in any HTML document using <link> element.

<head>
<link rel="stylesheet" href="Stylesheet.css" media=" all"
/>
</head>

Prepared by Mian Muhammad Talha 31

 External CSS File

• An External CSS file must have a .css file extension

• External CSS can be created with text editors:

• NotePad, NotePad ++, PSPad

• Or IDEs like
• Visual Studio Code
• Sublime Text
• Atom
• Adobe Dreamweaver

Prepared by Mian Muhammad Talha 32

 External CSS

Stylesheet.css

Prepared by Mian Muhammad Talha 33

 CSS Rules Overriding

Inline
Internal
External
Prepared by Mian Muhammad Talha 34
 Famous CSS Concepts

Prepared by Mian Muhammad Talha 35

 CSS Comments

• Many times, you may need to put additional comments in your style
sheet blocks. So, it is very easy to comment any part in style sheet.

• You can use comments in similar way you do in C and C++

programming languages.
<style>
p{
color: red;
/* This is a single-line comment
*/
text-align: center;
}
/* This is a multi-line
comment */
Prepared by Mian Muhammad Talha </style> 36
 CSS <div> Tag

• The <div> tag defines a division or a section in an HTML document.

• The <div> tag is used as a container for HTML elements - which is

then styled with CSS or manipulated with JavaScript.

• The <div> tag is easily styled by using the class or id attribute.

• Any sort of content can be put inside the <div> tag!

Prepared by Mian Muhammad Talha 37

 CSS <div> Tag

Prepared by Mian Muhammad Talha 38

 CSS <div> Tag

We can arrange
our page in
different ways
using <div>

Prepared by Mian Muhammad Talha 39

 CSS Pseudo-classes

• Pseudo-classes let you style elements when users interact with them,
like hovering over a link or clicking a button.

• Common examples include :hover, :active, and :focus:

• :hover styles an element when the mouse is over it.

• :active styles an element when it's clicked or activated.
• :focus styles an element when it gains focus, like when tabbing
through form fields.
div:hover {
background-color : blue
}
Prepared by Mian Muhammad Talha 40
 CSS Flexbox
• Flexible Box Layout is a way in CSS to arrange and align items
within a container in a flexible and easy-to-control manner.

• Since flexbox is a whole module and not a single property, it involves

a lot of things including its whole set of properties.

• Parent element, known as “flex container” and children as “flex

items”

Prepared by Mian Muhammad Talha 41

 <body>
CSS Flexbox
<head> -> <style>
<div class="container"> .container {
Without applying
<div class="item"> border: 5px solid rgb(0, 0, 0);
Flexbox properties
<p>1</p> this code will have background-color: rgb(245 197
</div> the following 221);
<div class="item"> unpleasant output
}
<p>2</p> .item {
</div> border: 5px solid rgb(0, 0, 0);
<div class="item"> background-color: rgb(141, 178,
<p>3</p> 226);
</div> margin: 10px;
<div class="item"> padding: 20px;
<p>4</p> height: 100px;
</div> width: 100px;
</div> font-weight: bold;
Prepared by Mian Muhammad Talha
font-size: 45px; 42
 CSS Flexbox Properties
Flexbox elements can have many properties some of which are
set on the flex container and the others are set on the flex items.

Flex Container Flex Item

align-content align-self
align-items order
display flex-basis
flex-direction flex-grow
flex-flow flex-shrink
flex-wrap flex
justify-content

Prepared by Mian Muhammad Talha 43

 Flex Container Property
Flex
Container Syntax Effect
Property
display display: flex;
flex-direction: row;
flex-direction: column;
flex-direction: reverse
flex-direction
row;
flex-direction: reverse
column;

flex-wrap: nowrap;
flex-wrap flex-wrap: wrap;
flex-wrap: wrap-reverse;
Prepared by Mian Muhammad Talha 44
 Flex Container Property
Flex
Container Syntax Effect
Property
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify- justify-content: space
content between;
justify-content: space-
around;
justify-content: space-
evenly;

Prepared by Mian Muhammad Talha 45

 Flex Items Property
Flex Item
Syntax Effect
Property
align-self: auto;
align-self: stretch;
align-self: flex-start;
Align-self
align-self: flex-end;
align-self: center;
align-self: baseline;
.item1 { order: 4; }
.item2 { order: 3; }
.item3 { order: 1; }
Order
.item4 { order: 5; }
.item5 { order: 2; }

Prepared by Mian Muhammad Talha 46

 CSS Grid

• The CSS grid layout module is used to create a grid-based layout

system, with the help of rows and columns it makes it easier to design
any webpage without using floats and positioning.

Prepared by Mian Muhammad Talha 47

Graded
Self Learning
Task

Prepared by Mian Muhammad Talha 48

 Graded Self Learning Task

Watch & Note Apply & Present

Create web pages dedicated to the
Each group should view
movie you watched, incorporating
the movie, anime, or
various HTML and CSS tags.
drama they initially
Present your completed work during
selected this week over the
the class or lab session. Each group,
upcoming weekend. All
consisting of two members, will
members within a group
design and link two web pages
must watch the same
together. The web pages should
movie, anime, or drama.
include the movie's theme, cast and
Take notes on the main
director details, IMDb rating,
events and key points
storyline, plot summary, images,
and short video clips.
Prepared by Mian Muhammad Talha 49
 CSS ki chamak sy hota ha Web Page ka roop
suhana
selectors ko smjhty jao or kro practise rozana

<style> k attirbutes sy ho jyein sab familiar

HTML CSS seekh lo, kabhi ho ga na Web me
failure

Prepared by Mian Muhammad Talha 50