Web Design

Exercise
- Make a div and apply the appropriate CSS styles to create similar
output:

2
CSS Links Properties
- Also, links can be styled with any CSS property (e.g., color, font
family, background, etc.).
- Moreover, links can be styled differently depending on their
state.

3
CSS Links Properties
- The four links states are:
• a:link - a normal, unvisited link
• a:visited - a visited link
• a:hover - a link when the user moves over it
• a:active - a link the moment it is clicked
- The order of the four state is case sensitive

a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}

4
CSS Lists Properties
- List style position: specifies the position of bullets.
- Property Name: list-style-position
- Values: outside | inside

{
list-style-position:inside;
}

5
CSS Lists Properties
- List style type: Specifies the type of list-item marker.
- Property Name: list-style-type
- Values: disc | circle | square | decimal | none |
decimal-leading-zero | lower-roman |
lower-alpha | upper-alpha | upper-roman

{
list-style-position:inside;
}

6
CSS Lists Properties
- List style image: Specifies an image as the list-item marker.
- Property Name: list-style-image
- Values: image path | none

{
list-style-image:url('img1.gif');
}

7
CSS Lists Properties
- List style - Shorthand Property: Sets all the list properties in one
declaration.
- Property Name: list-style: list-style-type list-style-position list-
style-image;

{
list-style: square inside url("img1.gif");
}

8
CSS Tables Properties
- Caption side: Specifies the position of a table caption.
- Property Name: caption-side
- Values: top | bottom

caption{
caption-side:bottom;
}

9
CSS Tables Properties
- Border collapse: Sets whether the table borders are collapsed
into a single border or detached as in standard HTML.
- Property Name: border-collapse
- Values: collapse | separate

{
border-collapse:collapse;
}

10
CSS Tables Properties
- Border spacing: sets the distance between the borders of
adjacent cells. (border-collapse: separate must be set first).
- Property Name: border-spacing: h-space v-space;
- Values:
h-space: horizontal spacing in pixels.
v-space: vertical spacing in pixels.
Single value: for both in pixel default: 2px
{
border-spacing:5px 8px;
}

11
CSS Tables Properties
- Table layout: Specify that the column width should increase or
not to fit the content size.
- Property Name: table-layout
- Values:
auto: Column width fits with the content size.
Fixed: Column width will not change (fixed).

{
table-layout:fixed;
}

12
CSS Tables Properties
- Empty cells: hides the borders and background of empty cells in
a table. (border-collapse:separate must be set first).
- Property Name: empty-cells
- Values: Show | hide

{
empty-cells:hide;
}

13
CSS Dimensions
- Width: Sets the width of an element.
- Property Name: width
- Values: pixels | percentage | auto

{
width:500px;
}

14
CSS Dimensions
- Height: Sets the height of an element.
- Property Name: height
- Values: pixels | percentage | auto

{
height:500px;
}

15
CSS Dimensions
- Max height: used to set the maximum height of an element.
- Property Name: max-height
- Values: pixels | percentage | none

{
max-height:500px;
}

16
CSS Dimensions
- Min height: used to set the minimum height of an element.
- Property Name: min-height
- Values: pixels | percentage | 0

{
min-height: 500px;
}

17
CSS Dimensions
- Max width: used to set the maximum width of an element.
- Property Name: max-width
- Values: pixels | percentage | none

{
max-width:500px;
}

18
CSS Dimensions
- Min width: used to set the minimum width of an element.
- Property Name: min-width
- Values: pixels | percentage | 0

{
min- width: 500px;
}

19
CSS Overflow
- CSS Overflow: specifies what happens if content overflows an
element's box.
- Property Name: overflow
- Values: visible | hidden | scroll | auto

{
overflow:hidden;
}

20
CSS Opacity
- CSS Opacity: The opacity property sets the transparency level for
an element, it accepts values from 0.0 to 1.0. The lower value
makes the element more transparent.
- Property Name: opacity
- Values: Number between 0.1 and 1.0

img {opacity:0.4;}
img:hover {opacity:1.0;}

21
CSS Cursor
- CSS cursor: Specifies the type of cursor to be displayed.
- Property Name: cursor
- Values: Crosshair | default | pointer | move | e-resize |
ne-resize | nw-resize | n-resize | se-resize |
sw-resize | s-resize | w-resize | text | wait |
help | auto

{
cursor:ne-resize;
}

22
Box Model
- The term "box model" is used when designing the layout. It
considers all the HTML elements as boxes consisting of margins,
borders, padding, and content.
• Content: The area where the text and images appear.
• Padding: The area between the content and the border. The
padding is affected by the background color of the box
• Border: A border that goes around the padding and the content.
• Margin: The area between an element's border and the adjacent
or parent element’s border. It is completely transparent.

23
Box Model

24
CSS Borders
- Border Style: used to set the style of the four borders.
- Property Name: border-style
- Values: none| dotted | dashed | solid | double | hidden

{
border-style:solid;
}

25
CSS Borders
- Border Color: used to set the color of the four borders.
- Property Name: border-color
- Values: #ff0000 | rgb(255,0,0) | red

{
border-color:#ff0000;
}

26
CSS Borders
- border-width: used to set the width of the four borders.
- Property Name: border-width
- Values: medium | thin | thick | pixels

{
border-width:5px;
}

27
CSS Borders
- Border – Shorthand Property: used to Set all the border
properties in one declaration.
- Property Name: Border: border-width border-style border-color

{
border:5px solid red;
}

28
CSS Borders

29
CSS Borders
- CSS Individual Border: used to set Individual Border of an
element.

{ border-left:6px solid red; }

30
Exercise
- Make a table and apply the appropriate CSS styles to create
similar output:

31
Exercise
- Make a table and apply the appropriate css styles to create
similar output:

32
CSS Borders
- CSS Rounded Corners: used to add rounded borders to an
element.
- Property Name: border-radius
- Values: 0 | pixels

{
border-radius:5px;
}

33
CSS Borders
- CSS Individual Border Corners: used to add rounded border to
one corner of an element.

{ border-bottom-left-radius:6px; }
{ border-bottom-right-radius:6px; }
{ border-top-left-radius:6px; }
{ border-top-right-radius:6px; }

34
CSS Margins
- Top Margin: Sets the top margin of an element.
- Property Name: margin-top
- Values: 0 | pixels

{
margin-top:5px;
}

35
CSS Margins
- Bottom Margin: Sets the bottom margin of an element.
- Property Name: margin-bottom
- Values: 0 | pixels

{
margin- bottom:5px;
}

36
CSS Margins
- Left Margin: Sets the left margin of an element.
- Property Name: margin-left
- Values: 0 | pixels

{
margin-left:5px;
}

37
CSS Margins
- Right Margin: Sets the right margin of an element.
- Property Name: margin-right
- Values: 0 | pixels

{
margin-right:5px;
}

38
CSS Margins
- Margin – Shorthand Property: Sets the 4 margins in one
declaration.
- Property Name: margin
- Values: 0 | pixels

margin:10px 5px 15px 20px; ➔(T,R,B,L)

39
CSS Margins
- Margin – Vertical Margin Collapse: When having two boxes with
vertical margins sitting above each other, they will collapse
instead of adding the margins together, and only the biggest one
will be displayed.

p { margin-top: 25px; margin-bottom: 50px; }

40
CSS Margins
- Margin – Vertical Margin Collapse: When having two boxes with
vertical margins sitting above each other, they will collapse
instead of adding the margins together, and only the biggest one
will be displayed.

41
CSS Padding
- Top Padding: Sets the top padding of an element.
- Property Name: padding-top
- Values: 0 | pixels

{
padding-top:5px;
}

42
CSS Padding
- Bottom Padding: Sets the bottom padding of an element.
- Property Name: padding- bottom
- Values: 0 | pixels

{
padding- bottom:5px;
}

43
CSS Padding
- Left Padding: Sets the left padding of an element.
- Property Name: padding- left
- Values: 0 | pixels

{
padding- left:5px;
}

44
CSS Padding
- Right Padding: Sets the right padding of an element.
- Property Name: padding- right
- Values: 0 | pixels

{
padding- right:5px;
}

45
CSS Padding
- Padding – Shorthand Property: Sets the 4 paddings in one
declaration.
- Property Name: padding
- Values: 0 | pixels

padding:10px 5px 15px 20px; ➔(T,R,B,L)

46
CSS Padding

47
CSS Padding

48
CSS Outline
- An outline is a line that is drawn around the element, outside the
borders, it may overlap other content, it is NOT a part of the
element’s dimensions.

49
CSS Outline

50
Outline Properties
- outline-style: specifies the style of the outline.
- outline-color: used to set the color of the outline
- outline-width: specifies the width of the outline
- outline-offset: adds space between the outline and the border of
an element
- Outline: is a shorthand property for outline-width, outline-style
and outline-color.

51
Outline Properties

{ outline: 10px dashed blue;

{ outline-width: 10px;
outline-style: dashed;
outline-color: blue;
outline-offset: 15px; }

52
“initial” and “inherit” CSS keywords
- Initial: Applies the default value of a property to an element
ignoring any inherited or dedicated values. It can be applied to
any CSS property.
<p><span>Red Text.</span>
<em>Normal Text.</em>
<span>Red Text Again.</span>
</p>
<style>
p {
color: red; }
em {
color: initial; }
</style>

53
“initial” and “inherit” CSS keywords
- inherit: Enforce the element to take the value of the property
from its parent element. It can be applied to any CSS property.

<h1>header 1</h1>
<div>
<h1 style="color:inherit;">
header 2</h1></div>

div { color: blue;

54
Grouping Selectors
- In style sheets there are often elements with the same style.
- To minimize the code, you can group selectors and separate
each selector with a comma.

h1 {color:green;}
h2 {color:green;}
p {color:green;}

h1,h2,p {color:green;}

55
CSS Combinators
- Among the CSS selectors, we can include a combinator.
- A combinator is something that explains the relationship
between the selectors.
- There are four different combinators in CSS: descendant
selector, child selector, adjacent sibling selector, general sibling
selector.

56
Descendant Selector (Space)
- Selects all elements that are descendants of a specified element.

<style>
div p
{
color: red;
}
</style>

<div>
<p>Para1</p>
<p>Para2</p>
<span><p>Para3</p></span>
</div>
<p>Para4</p>
<p>Para5</p>
57
Child Selector (>)
- Selects all elements that are the immediate (Direct) children of a
specified element.

<style>
div > p
{
color: red;
}
</style>

<div>
<p>Para1</p>
<p>Para2</p>
<span><p>Para3</p></span>
</div>
<p>Para4</p>
<p>Para5</p>
58
Adjacent Sibling Selector (+)
- Selects an element that immediately follows a specified element.

<style>
div + p
{
color: red;
}
</style>

<div>
<p>Para1</p>
<p>Para2</p>
<span><p>Para3</p></span>
</div>
<p>Para4</p>
<p>Para5</p>
59
CSS Cascading Order
- What style will be used when there is more than one style
specified for the same HTML element?
1. Inline style (inside an HTML tag).
2. Internal style sheets (inside the head).
3. External style sheets (CSS separate file).
4. HTML Attribute.
5. Browser default.

60
CSS Block and Inline Elements
- Block element is an element that takes up the full width
available, and has a line break before and after.
- Examples of block elements:
• <h1>
• <p>
• <div>
• <li>

61
CSS Block and Inline Elements
- Inline Element Is an element that only takes up as much width as
necessary, and does not force line breaks.
- Does not allow to set a width and height on the element.
- Top and Bottom margins/paddings are not respected.
- Examples of inline elements:
• <span> and <a>

62
Changing How an Element is Displayed
- Changing an inline element to a block element, or vice versa, is
useful for creating new layouts.

li {display:inline;}

span {display:block;}

63