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
20

flex-direction: column
21

start and end - not left and right
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
23

Positive and Negative Free Space
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.
25

• 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.
26

• 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.
27

flex-grow
• It defines, how the free positive space should
be distributed among items.
• See 9x.html
28

flex-shrink
• It defines, how the free negative space should
be extracted from items to fit them in
container.
• See 10x.html
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.
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

Recommended

More Related Content

Similar to Cascading Style Sheets CSS (20)

More from Asif Shahzad (10)

Recently uploaded (15)

Cascading Style Sheets CSS

Editor's Notes