Scribd
Upload
2 views

CHP4_CSS

Uploaded by

yinmazatin21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

CHP4_CSS

Uploaded by

yinmazatin21
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

CSS

Objective
1. CSS Introduction
2. Basic CSS Syntax
3. CSS Color
4. CSS Background
5. CSS Margin & Padding
6. CSS Animation & Transition
7. CSS Grid
8. Styling CSS in HTML, Class and ID
CSS Introduction

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document
written in a markup language such as HTML or XML.

 Developed by : World Wide Web Consortium (W3C)


 CSS describes how HTML elements are to be displayed on screen, paper, or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 File Extension : .css (Example: style.css)
2. Basic CSS Syntax
3. CSS Color
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
1. RGB (Red, Green, Blue) , Example : <h1 style="background-color:Tomato;">Tomato</h1>
2. Hex (Hexadecimal), Example: <h1 style="background-color:#ff0000;">Red</h1>
3. HSL(hue, saturation, and lightness) ,
Example: <h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
4. RGBA (Red-green-blue-alpha),
Example: <h2 style="background-color:rgba(255,0,0,0.3);">rgba(255,0,0,0.3)</h2>

5. HSLA (Hue-saturation-lightness-alpha)
Example: <h2 style="background-color:hsla(120,100%,50%,0.3);">hsla(120,100%,50%,0.3);</
h2>
4. CSS Background
5. CSS Margin & Padding
Margin-Padding Exercise
1px

10px
30px 5px
6. CSS Animation & Transition
CSS Animation & Transition
Exercise
1 2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 17 18 19 20
21 22 23 24 25 26 27 28 29 30
31 32 33 34 35 36 37 38 39 40
41 42 43 44 45 46 47 48 49 50
51 52 53 54 55 56 57 58 59 60

Exercise :
From 1 – 20 , Transition when hover the cell box, the number should be larger than before
From 21 – 40, the number should be automate change the color from Black -> Red -> Blue every 1 second and loop
From 41 – 60, the number should be automate change the font size from small-> big every 1 second and loop
7. CSS Grid
8. Styling CSS in HTML, Class
and ID
By default of Web browser.
CSS styling in HTML element has 3 main concepts:
1. CSS styling HTML for overall element of the html structure which share the same property
(Color, Font Style, Background).

2. CSS styling on class, For apart or group by group of the html structure which share the same
properties.

3. CSS styling on class, For specific style of the html element.

You might also like