Web Systems Technologies CS3548 Prepared By Junaid Hassan

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

Topics: Introduction to CSS & CSS 3

Intro to CSS: 1. CSS means cascading style sheets 2. CSS is a language that describes the style of an HTML document 3. CSS is used to design the web page 4. CSS properties are used to design the visual appearance of the web page 5. CSS describes how HTML elements are to be displayed 6. 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 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, letterspacing, 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)

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

CSS 3 properties: • Rounded corners (border-radius), backgrounds(size, origin, clip), colors (RGBA, HSLA), gradients (smooth transition between 2 or more colors), shadow (text, box) • 2 D/3 D tranformation (translate, rotate etc), transitions, animations • Media Queries

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

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

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

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: 992 px){ body{background-color: red; } } @media (max-width: 767 px){ body{background-color: blue; } } @media (max-width: 400 px){ body{background-color: orange; } }

References: http: //w 3 schools. com/css