CSS3

Cascading Styling Sheets

1
• CSS stands for cascading styling sheets, it’s allows us to describe the styling of HTML
document.
• For example, we can control the coloring and layouts of HTML elements.

• With CSS you can describe the presentation of a web page via things like color, layout,
and font. Adjusting to different types of devices and screen sizes is also handled by CSS.

• By separating CSS from HTML, it makes it easier to maintain a website. This way you
can share a style sheet across pages, or adjust it to different environments.

2
CSS HTML

3
 ?
?

?
?
Why is CSS
important?

?
?

?
4
Freedom to position HTML
elements anywhere
. .
on a web page, while allowing
you to keep your markup
(HTML) clean and organized.
Ability to use media
queries and relative units
. of the HTML into its own
(ems and %s) to create web
pages which adapt to the user’s
screen size—ideal for
creating mobile responsive web
pages.
Endless customization
options
to a web page including fonts,
colors, borders, hover and
transition effects, etc.
CSS extracts the style out
.CSS file. With an external style
sheet, you can change the look of
an entire website with just one
file. CSS saves a lot of work this
way, by making the style more
reusable.
CSS preprocessors
Using a CSS preprocessor, a
developer is able to write out
more complex style and layout.
The source code can be shorter
and more readable. use tools
such variables.
Pages Load Faster
CSS enables multiple pages to
share the formatting
information
5
Change Your life
learn Code

6
CSS for
Mobile apps

7
MAKING MOBILE APPS WITH HTML
AND CSS
Yes, there are many mobile apps development frameworks that use HTML and CSS
to make mobile applications.
Technically speaking, mobile apps in Android, iOS

React Native Ionic Framework Lungo jQueryMobile

React Native uses robust mobile

used to develop amazing is a lightweight mobile
JavaScript objects development framework
cross-platform mobile, framework based on
(similar to CSS) in a to build cross-mobile-
web and desktop apps HTML5 and CSS3.
stylesheet component platform app.

8
WHAT WE WILL
LEARN
we will cover the essential / basic CSS concepts you need to understand to
build beautiful web pages.

9
How to use CSS Testing our CSS web CSS selectors
pages

Gradients Colors Layouts

Flex box Grids system Responsive design

Typography Images Using Modern

images

UI, UX Animations Variables in CSS

10
PROJECTS
WE WILL USE OUR ALL CSS TO MAKE PROJECT

11
 </ > </>
</ >
{}

?
How to add CSS to your
<>
HTML file.
<> <>

{} {}

12
The three different ways to providing CSS, there are three methods of including CSS in an HTML
document.
1. Embedded styles — We can use Embedded stylesheets - so we include our styles in our HTML documents, Using
the <style> element in the head section of a document.

2. External style sheets — we can also use external CSS file - External stylesheets which means make our styles in
separate files. this has couple benefits. Using the <link> element, pointing to an external CSS file.
3. Inline styles — we can apply our styles directly to our particular HTML elements Using the style attribute in the
HTML start tag. inline style used to apply a style for a single element.

we use <style> </style> element

<style>
p {
color: orange;
}
</style>

13
Internal stylesheet has two problems
A First problems is that they not scalable, so if we have multiple pages, we want our
paragraph to be orange with this approach we have to copy all the styles that we have here
and put them in to every single web page.

And that is if tomorrow we decide to change the color of paragraphs, we have to go to

every single web page. And make modification, So this approach is not scalable.

The Second problems with this approach is that we have every import concept in computer
science called (Separation of Concerns), So we have different modules for different
concerns.

As we leaned (HTML & CSS) we use HTML to structure web pages and we use CSS to style
them. These are two different concerns, so we should separate them.

14
Thinking of supermarkets in supermarket we have
different section with different types of products,
we have section for food, another section for
cleaning products, and imagine if we have
supermarket with only single section all the
products in the single section, we could not find
anything in that supermarket.

So we want to organize our code like well organize

supermarket, this where we use external
stylesheets

15
External styles sheet
So create a new file called (styles.css), we can call anything the name doesn’t matter.
<link rel="stylesheet" href="" />

This element has two attribute

(rel) relation which determines the type of resource we are linking this document to in this case
(stylesheet).
(href) here we type relative or absolute URL. here we can type (style.css)

So these are two different ways provide styles, but they is third way we can use (Inline styles)
to apply styles to particular HTML elements.

16
Inline styles Example
inline style used to apply a style for a single element.

So let’s say I added these two paragraph here.

<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>

I want make first paragraph (blue) but only the first paragraph, every HTML element has style attribute
and this where we can write one or more styles. So we can set the color to blue and add (;) semicolon
so we can type second CSS property, so we can say font-weight to bold. Don’t worry about this we
will talk it.
<p style="color: blue; font-weight: bold">Lorem ipsum dolor sit amet.</p>

17
 CSS Syntax
A CSS rule have two main parts, a selector and
declarations.

• The Selector specifies which elements in the HTML page

the CSS rule applies to.
• color is a property, and red is the property value.
• A value separated by a colon : and ending with a
semicolon ; .
• The declaration block contains one or more declarations
separated by semicolons.

18
Basic Selectors

19
Selectors are one of the most important aspects of CSS as they allow you to target
specific elements on your web page in various ways that we want to style them.

In CSS we have few different ways to select elements or styling proposes. We can select by
(Type, ID, Class, Attributes).

 Universal Selector ( * )
The universal selector, select every single element on the page.
/* Selects all elements */
* {
color: green;
}
20
 A type selector matches a HTML element directly. selects HTML elements based on the
element name.

/* All <p> elements. */

p {
color: red;
}

But we can also select an element by its ID.

21
 ID selector
The id selector is used to define style rules for a single or unique element.
The id selector is defined with a hash sign (#)

<body>
<section id="product</section>
</body>

In our stylesheet (style.css) type (#products) when it’s start by # hash

mark so that means we are selecting by ID.

#products{
}

22
 Class selector (.)
The class selectors can be used to select any HTML element that has a class attribute. All the
elements having that class will be formatted according to the defined rule .
<body>
<section id="products">
<article class="product"></article>
<article class="product"></article>
<article class="product"></article>
</section>
</body>

Now to style each article element we can go to our stylesheet (.product)

.product{

}
23
Example
Any styling information that needs to be applied to multiple objects on a page
should be done with a class. Take for example a page with multiple “button”:

<body>
<div class=“button"></div>
<div class="button"></div>
<div class="button"></div>
</body>

24
 ?
?

?
?
What is different between ID
and CLASS?

?
?

?
25
 ID selectors are the most specific selector, because we can’t have multiple
elements with the same ID.

your code will not pass validation if you use the same ID on more than
one element. Validation should be important to all of us, so that alone is a
big one.

 Class selectors are less specific because we can have many elements with
the same class.

 Element selectors are the least specific selectors.

26
 ID’s and Classes
Information that is reusable should be kept in a class
and information that is totally unique should be kept
in an ID.

27
CSS Colors

28
In CSS we have different ways to present colors, We can use (Color Names,
RGB Value, HEX codes)

1. RGB Let’s look up the (RGB) first (Red Green Blue) these three value present the
degree of Red Green and Blue colors
• Each value can be number between 0-255
• So we use rgb() function to set the background color
.box{
width: 200px;
height: 200px;
background-color: grb(230,205,15);
}

29
RGBA We have another function which is called rgba() which is stand for alpha (Red-green-
blue-alpha)

Defines the opacity as a number between 0.0 (fully transparent) and

1.0 (fully opaque)
0 mean completely transparent and 1 mean completely transparent

.box{
width: 200px;
height: 200px;
background-color: grba(230,205,15,0.5);
}

30
HEX we can also use hexadecimal to represent colors, Hexadecimal is one of
the numerical systems, we have
Binary systems (0,1)
We have binary system that contain the digit 0 and 1
Decimal (0-9)
We have Decimal system that contain the digit 0 to 9
Hexadecimal (0-9, a-f)
Hexadecimal is another system that contain (0-9) and letters (a-f)

.box{
width: 200px;
height: 200px;
background-color: #e6cd10;
}

31
Color Name We can also use by name our colors

.box{
width: 200px;
height: 200px;
background-color: orange;
}

Most of the time we use Hexadecimal systems

32
Comments are used to explain your code, and may help you when you edit the
source code at a later date. Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with "*/", like this:

/*This is a comment*/

33
Comments are used to explain your code, and may help you when you edit the
source code at a later date. Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with "*/", like this:

/*This is a comment*/

Font Color
The color property defines the text color of an element.
color: #ff5722;

Font Size
The font-size property is used to set the size of font for the text content of an element.
font-size: 24px;

34
Width and Height
The width and height property defines the width and height of the content
area of an element.
div{
width: 600px;
background-color: dodgerblue;
}

div{

width: 600px;
height: 458px;
background-color: dodgerblue;
}

35
Day in the Life of a Software Engineer in Australi
a
Gradients

37
Gradients
We have learned about Colors, now let’s talk about Gradients,
With Gradients we can create beautiful transitions between two or more
colors.

To set the gradients we use linear-gradient() function, here We use two colors
(dodgerblue, yellow).

div{
width: 600px;
height: 458px;
background: linear-gradient(tomato, deeppink);
}

38
Direction
We can also change the direction of gradient

Direction - to Right
shows a linear gradient that starts from the left. It starts red, transitioning to
yellow.

div{
width: 600px;
height: 458px;
background: linear-gradient(tomato, deeppink);
}

Direction - to left

39
 Direction – to top to left to bottom

background: linear-gradient(to bottom right,tomato, blue);

now the transitions start from top left and goes to bottom right.
Using degree

background: linear-gradient(19deg,tomato, blue);

position we can also specify the position of color

background: linear-gradient(19deg, tomato, blue 90%);

Using Multiple Color

background: linear-gradient(tomato, blue, green);

40
 In CSS we have another type gradient called (radial-gradient), let’ add it.
Here we call (radial-gradient) function, we give to colors we can say
(white, orange).

background: radial-gradient(white, orange)

using online tools

We also have online tools to create Gradient, they help us easily create Gradient, and generate the CSS code, here
in google search for (gradient generator), there is many tools out there, the one that I personally like is
(cssgradient.io). it’s very easily tool use it.

41
Styling list

42
CSS provides the several properties for styling and formatting the most commonly
used unordered and ordered lists.

By default, items in an ordered list are numbered with Arabic numerals

(1, 2, 3, 5, and so on), whereas in an unordered list, items are marked
with round bullets (•).
using the list-style-type property to change the type of items list

<ul> ul{
<li>item one</li>
<li>two</li> list-style-type:square;
<li>three</li> }
</ul>

<ol> ol{
<li>item one</li> list-style-type:upper-alpha;
<li>two</li>
<li>three</li> }
</ol>

43
Changing the Position of List Markers
By default, markers of each list items are positioned outside of their display boxes.
ul{
list-style-type:square;
list-style-position: inside;
}

Setting All List Properties At Once

ul{
list-style: square inside url(tick.svg);
}

44
Border

45
Now let’s talk about Borders, this property takes three values, the first value border size (10px) and the second value is the
style of the border (solid), the third value is to set the border color (dodblue)

div{
width: 300px;
height: 208px;
border: 5px solid dodgerblue;
}

We can also change the (border styles) to dotted

div{
width: 300px;
height: 208px;
border: 5px dotted dodgerblue;
}

46
Border radius (border-radius) is use to make border rounded styles.
div{
width: 300px;
height: 208px;
border: 5px solid dodgerblue;
border-radius: 20px;
}

47
If we want to make circle, so we set value (100% or 50%)

div{
width: 200px;
height: 200px;
border: 5px solid dodgerblue;
border-radius: 100%;
}

CSS Border Width The border-width property specifies the width of the four borders.
border-width: 12px 3px ; trbl

To use more shapes, we can search it Online in google (CSS shapes)

48
CSS Table

49
Tables are typically used to display tabular data, such as financial reposts.
When you create an HTML TABLE without any styles or attributes, browsers display them without any
border.
With CSS we can control the layout of the table elements.

Adding Border to Tables

border The CSS border property is the best way to define the border for the tables.

table,th, td{
border: 1px solid black;
}

Width Table

table{
width: 50%;
}

50
Collapsing Table Borders
separate border model, which is the default, You can set the border model for an HTML table by using
the CSS border-collapse property.

table{
width: 50%;
border-collapse: collapse;
}

Table Width and Height

The width and height of a table are defined by the width and height properties.

th{
height: 30px;
}

51
Aligning the Text Inside Table Cells
You can align text content inside the table cells either horizontally or vertically.
For horizontal alignment of text inside the table cells you can use the text-align property

th{
height: 30px;
text-align: center;
}

Vertical Alignment of Cell Contents

Similarly, you can vertically align the content inside the <th> and <td> elements to top, bottom, or middle using the
CSS vertical-align property.
th{
height: 30px;
vertical-align: top;
}

table,th, td{
border: 1px solid black;
height: 30px;
vertical-align: bottom;
}
52
 CSS Styling Table
Horizontal Dividers
Add the border-bottom property to <th> and <td> for horizontal dividers:

table {
border-collapse: collapse;
width:70%;
}

th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}

Hover able Table

We Use the :hover selector on <tr> to highlight table rows on mouse over.
tr:hover{

background-color: rgb(231, 238, 240);

}

53
Creating Zebra-striped Tables
Setting different background colors for alternate rows is a popular technique to improve the
readability of tables that has large amount of data.
For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd)
table rows:

tr:nth-child(even){
background-color: #dddddd;
}

54
Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too small to display the full content:

<div style="overflow-x: auto">

<table>

<tr>

<th>First Name</th>

<th>Last Name</th>

table {
border-collapse: collapse;
width: 100%;
}

th,
td {
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #f2f2f2;
} 55
Shadows

56
In CSS we can easily add shadows around elements by using the (box-shadow)
property .

- the first value is horizontal destines of the shadow to the element, if we use
positive value (10px) this will move shadow to the right, and if we use negative
value (-10x) this will move the shadow to the left .
- the second value is vertical destines of the shadow to the element, if we use
positive value (10px) this will move the shadow to the bottom, and if we use the
negative value (-10px) this will move the shadow to the top.

.box{
width:200px;
height: 200px;
background-color: rgb(48, 92, 137);
box-shadow: 15px 10px;
}

57
We can change the color

.box{
width:200px;
height: 200px;
background-color: #305c89;
box-shadow: 15px 10px wheat;
}

Now what if we want to make this shadow a little bit softer, so here we can add a third value.

.box{ .box{
width:200px; width:200px;
height: 200px; height: 200px;
background-color: #305c89; background-color: #305c89;
box-shadow: 15px 10px 20px wheat; box-shadow: 0px 0px 20px wheat;
} }

Online tools

https://getcssscan.com/css-box-shadow-examples
https://box-shadow.dev/
https://box-shadow.art/inspiration/
58
Text Shadows
For text show we use the same property that we used in box-shadow

h1{
color: white;
text-shadow: 3px 3px 5px gray;
}

More clear

h1{
color: white;
text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}

59
Assignments

60
61
62
63
64
65
66
67
68
69
70
Inheritance

71
Inheritance
One of the importance concepts in CSS is Inheritance, we need to understand. Some CSS properties by default inherit
values from their Parents,

For example (we make a paragraph with some text, now add some text in <Storge> elements)

CSS properties such as height , width , border , margin , padding , etc. are not inherited

<p>
Lorem ipsum dolor, sit amet <strong>consectetur</strong>
adipisicing elit.
Distinctio, quibusdam.
</p>

p{
color: dodgerblue;
border: 1px solid black;
}

Now if we look the our <strong> is all so blue even though our, we didn’t apply the color to <strong> element,
this is inheritance in action. The <strong> element is the child of <p> element
72
- If we want to stop the inheritance so we use, we set the value to initial. This set the color property to it’s
default value

strong{
color: initial;
}

- Now let’s look the property that does not inherit, If we add the border to our paragraph,

p{
color: dodgerblue;
border: 1px solid black;
}

- But if we want to inherit this so we use

strong {
color: initial;
border: inherit;
}

73
Advance CSS
selector

74
Inheritance
One of the importance concepts in CSS is Inheritance, we need to understand.

Some CSS properties by default inherit values from their Parents,

For example (we make a paragraph with some text, now add some text in <Storge> elements)

<p>
Lorem ipsum dolor, sit amet <strong>consectetur</strong>
adipisicing elit.
Distinctio, quibusdam.
</p>

p{
color: dodgerblue;
border: 1px solid black;
}

Now if we look the our <strong> is all so blue even though our, we didn’t apply the color to <strong> element,
this is inheritance in action. The <strong> element is the child of <p> element

75