1. Web Systems & Technologies
CS Prepared By: Junaid Hassan Lecturer at UOS M.B.Din Campus

2. Introduction to CSS & CSS3
Topics:
Introduction to CSS & CSS3

3. Intro to CSS: CSS means cascading style sheets
CSS is a language that describes the style of an HTML document
CSS is used to design the web page
CSS properties are used to design the visual appearance of the web page
CSS describes how HTML elements are to be displayed
CSS saves a lot of work by defining styles of multiple web pages at once

4. CSS Syntax: p { background-color: blue; } Where ‘p’ is called selector
‘background-color’ is called as CSS property
‘blue’ is called the value of property

5. CSS Selectors: Element selector ID selector Class selector
Grouping selectors
CSS comments

6. Ways to Insert CSS: External stylesheet Internal stylesheet
Inline style
Multiple stylesheets

7. Cascading Order:
What style will be used when there is more than one style specified for an HTML element?
Inline style (defined inside HTML element)
External and internal stylesheets
Browser defined styles

8. CSS properties:
Colors (name, rgb, hex), backgrounds (color, image, repeat, attachment, position), borders (width, style, color), margins (top, right, bottom, left), padding (top, right, bottom, left), width/height (min, max)
CSS box model (content, padding, border, margin)
Text (color, align, decoration, transform, indent, letter-spacing, line-height, direction, word-spacing, shadow), fonts (family, size, weight), links (link, visited, hover, active), lists (list-style), tables

9. CSS properties:
Display (block, inline, none), max-width, overflow (visible, hidden, scroll, auto), position (static, relative, fixed, absolute), float, inline-block, align
Combinator (div p, div > p, div + p, div ~ p), pseudo-class (a:hover, div li:nth-child(3)), pseudo-element (p::first-line, ::first-letter, ::before, ::after), opacity (0-1 for transparancy)
background: #ffffff url("img_tree.png") no-repeat right top;

10. CSS3? CSS3 is the latest standard for CSS
Completely compatible with CSS
CSS3 has been split into modules
Some important CSS3 modules are selectors, box model, backgrounds and border, 2D/3D transformations, animations, text effects etc.
CSS3 properties are implemented in modern browsers
Some older browsers still doesn’t support CSS3 properties

11. CSS3 properties:
Rounded corners (border-radius), backgrounds(size, origin, clip), colors (RGBA, HSL, HSLA), gradients (smooth transition between 2 or more colors), shadow (text, box)
2D/3D tranformation (translate, rotate etc), transitions, animations
Media Queries
border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius
background-origin: content-box; background-origin: padding-box; background-origin: border-box; (specify where background image is positioned)
background-clip: content-box; background-clip: padding-box; background-clip: border-box; (defines the painting area for background)
background: linear-gradient(red, yellow); radial-gradient(red, yellow, green)

12. 2D/3D transformation: transform: translate(50px, 100px);
transform: rotate(20deg);
transform: scale(2, 3);

13. CSS3 Transitions: Allows to change property values smoothly div {
width: 100px;     height: 100px;     background: red;     transition: width 2s; }
div:hover {     width: 300px; }

14. CSS3 Animations:
@keyframes example {     from {background-color: red;}     to {background-color: yellow;} } div {     width: 100px;     height: 100px;     background-color: red;     animation-name: example;     animation-duration: 4s; }

15. Media Queries: Used to make a web page responsive
Using media queries we can define css rules for different screen sizes and mobile devices
@media (max-width: 992px){
body{background-color: red;} }
@media (max-width: 767px){
body{background-color: blue;}
@media (max-width: 400px){
body{background-color: orange;}

16. References: