Internet Development

04 Introduction to CSS

Dr. Fatma Sakr

 CSS Sheet

 Style sheet contain one or more CSS Rules

Selector

body {

font-family: Tahoma, Arial, sans-serif;

color: black;
background: white;
margin: 8px; }

Property Value
CSS Sheet
 CSS Pseudo Selectors

 : hover selector is used to select elements when you mouse over them.
 hover - Apply rule when mouse is over element (e.g. tooltip)
p:hover, a:hover {
background-color: yellow;
}
a:link , a: visited - Apply rule when link has been visited or not visited (link)

a:visited { a:link {
color: green; color: blue;
} }
 CSS Properties

 Control many style properties of an element:

● Coloring
● Size
● Position
● Visibility
● Many more: e.g.

p: { text-decoration: line-through;

}
● Also used in animation
CSS Properties: Coloring

 Must ultimately turn into red, green, and blue intensities between 0 and 255:
● Predefined names: red, blue, green, white, etc. (140 standard names)
● 8-bit hexadecimal numbers for red, green, blue: #ff0000

 ● 0-255 decimal intensities: rgb(255,255,0)

R G B
● Percentage intensities: rgb(80%,80%,100%)
R G B

 Example: h1: { color: red; }

Color - Properties: color &
background_color
 8
CSS Box Sizing

 The CSS box-sizing property allows us to include

the padding and border in an element's total width
and height.

 If you set box-sizing: border-box; on an element,

padding and border are included in the width and
height:

SET 372 – Internet Development 12-Mar-

24
 9
CSS Box Sizing

.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}

.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}

SET 372 – Internet Development 12-Mar-

24
 Without the CSS box- 10
sizing Property
 By default, the width and height of an element is calculated like this:

 width + padding + border = actual width of an element

height + padding + border = actual height of an element

 This means: When you set the width/height of an element, the element
often appears bigger than you have set (because the element's border and
padding are added to the element's specified width/height).

 The following illustration shows two <div> elements with the same
specified width and height:

SET 372 – Internet Development 12-Mar-

24
 Without the CSS box- 11
sizing Property
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}

.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}

SET 372 – Internet Development 12-Mar-

24
 CSS Box Model

The CSS box model is essentially a box that wraps around every
HTML element. It consists of: content, padding, borders and
margins.
CSS distance units
 Size Properties : Element, pad,
margin, border
 Width
Override element defaults border-bottom-color
 height
border-bottom-style
 padding-top border-bottom-width
padding-right border-left-color
border-left-style
padding-bottom border-left-width
padding-left border-right-color
border-right-style
border-right-width etc.
 margin-top
i.e.
margin-right
margin-bottom p {
border: 5px solid red;
margin-left }
position property

 position: static; (default) - Position in document flow

 position: relative; Position relative to default position via

top, right, bottom, and left properties

 position: fixed; Position to a fixed location on the screen via top,

right, bottom, and left properties

 position: absolute; Position relative to ancestor absolute element

via top, right, bottom, and left properties

 Fixed position (0,0) is top left corner

Element visibility control
properties

 display: none; - Element is not displayed and takes no space in

layout.

 display: inline; - Element is treated as an inline element.

 display: block; - Element is treated as a block element.

 display: flex; - Element is treated as a flex container.

 display: grid; - Element is treated as a grid container.

 visibility: hidden; - Element is hidden but space still

allocated.

 visibility: visible; - Element is normally displayed

 17
layout modes

 There are multiple layout modes:

o Block, for sections in a webpage
o Inline, for text
o Table, for two-dimensional table data
o Positioned, for explicit position of an element
o Flexbox Layout
o Grid Layout

SET 372 – Internet Development 12-Mar-

24
 18

 To start using the Flexbox model, you need to first define a flex
container.

 The element above represents a flex container (the blue area) with
three flex items.
 The flex container becomes flexible by setting the display
property to flex:
Example
.flex-container {
display: flex;
}
SET 372 – Internet Development 12-Mar-
24
 Flexbox and Grid layout

display: flex; (Flexbox)

display: grid; (Grid) newer layout method
○ Items flex to fill additional space and shrink to fit into
smaller spaces.
○ Useful for web app layout:

■ Divide up the available space equally among a

bunch of elements
■ Align of different sizes easily
■ Key to handling different window and display sizes

● Flexbox - Layout one dimension (row or column) of elements

● Grid - Layout in two dimensions (rows and columns) of elements

 20
The flex-direction Property

 The flex-direction property defines in which direction

the container wants to stack the flex items.

SET 372 – Internet Development 12-Mar-

24
 The column-reverse 21
Property
 The column-reverse value stacks the flex items vertically (but from bottom
to top)

SET 372 – Internet Development 12-Mar-

24
 Some other CSS issues - span 22

 A <span> element which is used to color a part of a text

 The <span> tag is an inline container used to mark up a part

of a text, or a part of a document.

 The <span> tag is easily styled by CSS or manipulated with

JavaScript using the class or id attribute.

 The <span> tag is much like the <div> element, but <div> is
a block-level element and <span> is an inline element.

SET 372 – Internet Development 12-Mar-

24
 Some other CSS issues

 Inheritance
○ Some properties (e.g. font-size) are inherited from parent elements
○ Others (border, background) are not inherited.

 Multiple rule matches

○ General idea: most specific rule wins

<span>Text1</span>
span.test { color: green }
<span class="test"> Text2 </span>
span { color: red }
 Adding Styles to HTML

Separate style sheet (best

 <head> way)
<link rel="stylesheet" type="text/css" href="myStyles.css"
/>

 <style type="text/css">
body {
font-family: Tahoma, Arial, sans-serif;
}
</style>
Page-specific styles
 </head>
<body>
<div style="padding:2px; ... ">
</body>
Element-specific styles
 CSS: HTML
 CSS HTML
Example Output
 27
CSS Media Queries

 Media queries are a popular technique for delivering a tailored style sheet to
different devices. To demonstrate a simple example, we can change the
background color for different devices:

SET 372 – Internet Development 12-Mar-

24
 CSS Media Queries 28
- Example
/* Set the background color of body to tan */
body {
background-color: tan;
}

/* On screens that are 992px or less, set the background color to blue
*/
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}

/* On screens that are 600px or less, set the background color to olive
*/
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
SET 372 – Internet Development 12-Mar-
24
 Output 1: Media Screen 29
blue

SET 372 – Internet Development 12-Mar-

24
 30
Output 2: Media Screen tan

SET 372 – Internet Development 12-Mar-

24
 Output 3: Media Screen 31
Olive

SET 372 – Internet Development 12-Mar-

24
CSS in the real world

 CSS preprocessors (e.g. less) are commonly used

○ Add variable and functions to help in maintaining large
collections of style sheets
○ Apply scoping using the naming conventions

 Composition is a problem
○ It can be really hard to figure out what rule from which
style sheet is messing things up