Cascading Style Sheets CSS

CSS Cascading Style Sheets By: Asif Shahzad

Introduction to CSS • CSS stands of Cascading Style Sheets, used to describe presentation or styles of web pages e.g.: – Layout, color, font, borders, paddings, etc. – Responsiveness – Mobile friendly user interfaces • World Wide Web Consortium W3C develop and publish CSS Specifications. The specification is used by web browsers, publishers and developers etc. • CSS can be embedded in HTML page or attached as an external CSS file. • How much CSS one should know: depends on objective e.g. front end developer, backend developer, full stack developer. 2

Selectors • Rules/syntax to select page element/s to apply CSS properties. • Code structure to declare style or CSS properties: – selector {property1: value1; property2:value2;…} • There are three basic types of selectors: Tag Name, Tag ID, Tag Class • Examples: 1. p {color: red;} 2. #name {font-size:20px;} 3. .alpha {font-family: arial;} • Some other selectors: nested/child, immediate child, universal, attribute, etc. 3

How to add CSS in HTML page • CSS can be added to HTML page using following ways: – Inline Using style attribute of the element – Internal Using <style> element, usually in <head> section – External Using external CSS file. Link tag to used to attach external file. 4

Properties for Color, Size, Font Color • Background-color • Color Size • Height • Width Font • Font-family • Font-size • Font-weight • Font-style https://www.chromestatus.com/metrics/css/popularity 5

Properties for Text text-align text-indent line-height (normal, number, unit length, %, initial, inherit) word-spacing letter-spacing 6

CSS Box Model • Elements are renders as rectangular box. Box size is calculated using following sizes: 1. Content 2. Padding 3. Border 4. Margin* • By default, specified width and height belong to content area. We can set to border-to-border (inclusive) using: box-sizing: border-box; 7

Padding, Border and Margin Padding:20px Padding-left Padding-top Padding-right Padding-bottom Margin Margin-left Margin-top Margin-right Margin-bottom Border Border-width:20px; Border-style Border-color OR Border-left-width Border-left-style Border-left-color . . 8

Background Image Properties 1. background-image 2. background-repeat 3. background-position 4. background-attachment 9

Styling Hyperlinks • Link States Link Visited Hover Active • Link state properties A:Link A:Visited A:Hover A:Active 10

Positioning • Static – Its default. Elements aren’t positioned • Relative • Elements are placed relative to its default position i.e. from where it would normally occur. It still occupies the original space in document, so incorrect use may cause subsequent elements be hidden. • Absolute • Remove the element from document flow and places as per positions specified w.r.t. page. It do not occupy the original space. • If you want to position an element w.r.t. container, the container itself must be relatively positioned (used to place contents over components). • Fixed - Fixed with reference to page 11

Website Layout • Template or structure of a website. All pages generally follow common layout for quality user experience. • Table and div tags can be used to implement layouts • Tables objective is not layout creation – Tables are mostly used for tabular data – Creates code smell for complex templates (refactor) – Consumes more bytes of markup • We prefer div over table for layout • Float and position are important properties to make div based layouts 12

Styling Lists • How to style ordered and unordered lists? • list-style-* type (none, disc, circle, square, etc.) image (url(‘image-name.ext’)) position (outside, inside, initial, inherit) List-style-* properties using single line: list-style: circle url("texture.jpg") inside; 13

Creating Navigation Bar using List • We can create navigation bars and drop down menus using list tag (i.e. ul, ol), by applying CSS properties • Remember following points from inline and block elements topic: – We can’t apply top and bottom margins, width and height properties to inline elements – Default ‘display’ of li tag is list-item. We must override to bring list items in single row. – Use inline-block to apply sizing properties on inline elements 14

Floats – 1 of 4 • Block elements take 100% width of container (when width is not specified). They do not allow elements on right or left [1]. • Float property changes the way a block element is laid out by the browser. These are taken out of the normal flow and then placed back following some rules. • Float property can be applied to block elements e.g. div, p, etc. Float applies with respect to container. Usage: float:right; float:left [2_0 to 2_1] 15

Floats – 2 of 4 • Floated block elements shift to above row, when space is available. If there is not enough space, elements are shifted down automatically [2_2]. One element properties, may effect the others in layout. • Container fails to calculate height when it contains floated elements only. We apply some CSS to force container draw itself correctly. [2_3 and 2_4] 16

Floats – 3 of 4 • Block elements before a floated element do not effect [3_0]. But when upper element is applied float property, bottom non-floated elements would wrap around [3_1] i.e. float my effect, non-floated elements. • If bottom elements are also floated, they would shift below when content is large [3_2]. Use width with floated elements [3_3] for predictable behavior. • If you want to stop non-floated elements to wrap around the floated elements, you need to clear the float. [3_4] 17

Floats – 4 of 4 • ‘Clear’ forces the element to shift down, even when it can adjust. clear:left allows no element be placed on left. clear:right allows no element be placed at right. To make both sides clear, use clear:both [3_4, 3_5]. Remember box model, see [3_5] again • While content will wrap - border, background image and background color will extend underneath [4_1]. 18

Flex Container Props • flex-direction – 4 options – row | column | row-reverse | column-reverse – E.g. flex-direction: row; Prepared By: Asif Shahzad, Assistant Professor, CUI Lahore 19

flex-direction: row Prepared By: Asif Shahzad, Assistant Professor, CUI Lahore 20

flex-direction: column Prepared By: Asif Shahzad, Assistant Professor, CUI Lahore 21

start and end - not left and right Prepared By: Asif Shahzad, Assistant Professor, CUI Lahore 22

Flex Container • Direct children of flex container are called, flex items. If we do not specify flex-direction, items display in a row, as its default value. 1x.html • The items start from the start edge of the main axis. See 1x.html • The items do not stretch on the main dimension, but can shrink. See 1x.html • The items will stretch to fill the size of the cross axis. 1x2.html Prepared By: Asif Shahzad, Assistant Professor, CUI Lahore 23

Positive and Negative Free Space Prepared By: Asif Shahzad, Assistant Professor, CUI Lahore 24

Flex Container Basis Props • justify-content – Its for main-axis – Divide available space b/w items. See 2x.html – How to divide positive free space inside the item, we would shortly see. Prepared By: Asif Shahzad, Assistant Professor, CUI Lahore 25

Flex Container Basis Props • align-items – align-items property work in cross axis. – Think of it, justify-content version for the cross- axis. – There must be some free pace in cross axis. In other words, there must be height or width specified for container. See 3x.html – If there is space in cross axis, and you do not specify the align-items, the items would stretch. Prepared By: Asif Shahzad, Assistant Professor, CUI Lahore 26

Flex Container Basis Props • flex-wrap – By default, items do not wrap in cross axis with container is resized, or screen size is small. Default value is nowrap. See 4x.html – Container cross-axis size auto change, depending on space required by items. Prepared By: Asif Shahzad, Assistant Professor, CUI Lahore 27

flex-grow • It defines, how the free positive space should be distributed among items. • See 9x.html Prepared By: Asif Shahzad, Assistant Professor, CUI Lahore 28

flex-shrink • It defines, how the free negative space should be extracted from items to fit them in container. • See 10x.html Prepared By: Asif Shahzad, Assistant Professor, CUI Lahore 29

Flex-basis impact on item-size • Is flex-basis set to auto, and does the item have a width set? If so, the size will be based on that width. • Is flex-basis set to auto or content? If so, the size is based on the item size. • Is flex-basis a length unit, but not zero? If so this is the size of the item. • Is flex-basis set to 0? if so then the item size is not taken into consideration for the space-sharing calculation. Prepared By: Asif Shahzad, Assistant Professor, CUI Lahore 30

Media Queries • Media Queries help in making responsive design. • We can apply conditional CSS on elements e.g. apply certain CSS properties if screen width is greater than certain pixels. 31

Cascading Style Sheets CSS

More Related Content

Similar to Cascading Style Sheets CSS

More from Asif Shahzad

Recently uploaded

Cascading Style Sheets CSS

Editor's Notes