Web Systems & Technologies CS-3548 Prepared By: Junaid Hassan Lecturer at UOS M.B.Din Campus junaidte14@gmail.com

Introduction to CSS & CSS3 Topics: Introduction to CSS & CSS3

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

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

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

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

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

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

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;

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

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)

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

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

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; }

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;}

References: http://w3schools.com/css