Web

1. Chapter 6 –
More CSS Basics
Web Technologies

3. You Will Learn
• Describe and apply the CSS box model
• Configure width and height with CSS
• Configure margin, border, and padding with CSS
• Center web page content with CSS
• Apply shadows with CSS
• Configure rounded corners with CSS
• CSS Opacity
• Gradient Colors

4. You Will Learn
• Display property
• CSS box drop shadow property
• Floating
• Positioning
• Stacking Order

5. WEB
TECHNOLOGIES

6. Width and
Height with
CSS

7. The width Property
• There are many ways to configure width and height with CSS. This section introduces you to the
width, min-width, max-width, and height properties. Table lists commonly used width and height
units and their purpose

8. The width Property
• The width property configures the width of an element’s content in the browser viewport with
either a numeric value unit (such as 100px or 20em), percentage (such as 80%, as shown in
Figure ) of the parent element, or viewport width value (such as 50vw, which is 50% of the
viewport width). It is applied to block level elements not inline.

9. The min-width Property
• The min-width property sets the minimum width of an element’s content in the browser
viewport.
• This minimum width value can prevent content from jumping around when a browser is resized.
• Scrollbars appear if the browser viewport is resized below the minimum width.

10. The max-width Property
• The max-width property sets the maximum width of an element’s content in the browser
viewport. This maximum width value can reduce the possibility of text stretching across large
expanses of the screen by a high-resolution monitor.

11. The height Property
• The height property configures the height of an element’s content in the browser viewport with
either a numeric value unit (such as 900px), percentage (such as 60%) of the parent element,
or viewport height value (such as 50vw), which is 50% of the viewport height.
• Figure shows a web page with an h1 area without a height or line-height property configured.
• In Figure , the h1 area is configured with the height property. Notice the improved display of the
background image.

12. CSS
Box Model

13. The Box Model
• Each element in a document is considered to be a rectangular box.
• As shown in Figure this box consists of a content area surrounded by padding, a
border, and margins. This is known as the box model

14. The Box Model

15. The Box Model

16. Content
• The content area can consist of a combination of text and web page elements such as
images, paragraphs, headings, lists, and so on.
• The visible width of the element on a web page is the total of the content width, the
padding width, and the border width.
• However, the width property only configures the actual width of the content—not
including any padding, border, or margin.

17. Padding
• The padding area is between the content and the border.
• The default padding value is zero.
• When the background of an element is configured, the background is applied to both
the padding and the content areas.

18. Border
• The border area is between the padding and the margin.
• The default border has a value of 0 and does not display.

19. Margin
• The margin determines the empty space between the element and any adjacent
elements.
• The margin is always transparent—the background color of the web page or
container element (such as a div) shows in this area.
• Browsers often have default margin values set for the web page document and for
certain elements such as paragraphs, headings, forms, and so on. Use the margin
property to override the default browser values.

20. Specifying Box
Dimensions

21. width
• Values: length | percentage | auto
• Default: auto
• Applies to: block-level elements and replaced inline elements (such as images)
By default, the width and height of a block element are calculated
automatically by the browser (thus the default auto value).

22. height
• Values: length | percentage | auto
• Default: auto
• Applies to: block-level elements and replaced inline elements (such as images)

23. box-sizing
• Values: content-box | border-box
• Default: content-box
• Applies to: all elements

24. box-sizing: content-box
• There are two ways to specify the size of an element.
• The default method— introduced way back in CSS1—applies the width and height values to the
content box.
• That means that the resulting size of the element will be the dimensions you specify plus the
amount of padding and borders that have been added to the element.
• Means, if you set the width 200px the resulting size will be 200+padding(10)+border(10) = 220px

25. box-sizing: border-box
• The other method—introduced as part of the box-sizing property in CSS3—applies the width and
height values to the border box, which includes the content, padding, and border.
• With this method, the resulting visible element box, including padding and borders, will be
exactly the dimensions you specify.
• Means the size you will specify will include everything. If you set 200px width, the total size will
be 200px including the content, border, and padding.

26. Handling
Overflow

27. Overflow
• When an element is sized too small for its contents, you can specify what to do with the content
that doesn’t fit by using the overflow property

28. Overflow
Values: visible | hidden | scroll | auto
Default: visible
Applies to: block-level elements and replaced inline elements (such as images)

29. Overflow

30. Margin and
Padding with
CSS

31. The margin Property
• Use the margin property to configure margins on all sides of an element.
• The margin is always transparent—the background color of the web page or
parent element shows in this area.
• To configure the size of the margin, use a numeric value (px or em).
• To eliminate the margin, configure it to 0 (with no unit).
• Use the value auto to indicate that the browser should calculate the margin .
• You can also configure individual settings for margin-top, margin-right, margin-
bottom, and margin-left.

32. CSS properties that configure margin

33. The padding Property
• The padding property configures empty space between the content of the HTML
element (such as text) and the border.
• By default, the padding is set to 0.
• If you configure a background color or background image for an element, it is
applied to both the padding and the content areas.

34. CSS properties that configure padding

35. Example

36. Center
Page Content
with CSS

37. Center a div
• A popular page layout design that is easy to accomplish with just a few lines of
CSS is to center the entire content of a web page within a browser viewport.
• The key is to configure a div element that contains or “wraps” the entire page
content.

38. Center a div
<body>
<div id="wrapper">
... page content goes
here ...
</div>
</body>
#wrapper {
Background-color:aqua;
width: 750px;
margin-left: auto;
margin-right: auto;
}

39. Borders with
CSS

40. The border property
• The border property configures the border, or boundary, around an element.
• By default, the border has a width set to 0 and does not display.

41. CSS properties that configure border

42. Examples

43. Examples

44. Shorthand notation
• A shorthand notation allows you to configure all the border properties in one
style rule by listing the values of border-width, border-style, and border-color.
For example:
.dashedborder { border: 3px dashed #000033; }

45. CSS Rounded
Corners

46. Rounded Corners
• The CSS border-radius property is used to create rounded corners and soften
up those rectangles.
• Valid values for the border-radius property include one to four numeric values
(using pixel or em units) or percentages that configure the radius of the corner.
• If a single value is provided, it configures all four corners.
• If four values are provided, the corners are configured in order of top left, top
right, bottom right, and bottom left.

47. Rounded Corners
• You can configure corners individually with the
• border-bottom-left-radius
• border-bottom-right-radius
• border-top-left-radius,
• border-top-right-radius

48. Rounded Corners
#box { background-color: #74C0FF;
margin-left: 60px;
border: 1px solid #000000;
border-radius: 15px;
}

49. Rounded Corners
#box { background-color: #74C0FF;
margin-left: 60px;
padding: 5px 20px;
border-top-left-radius: 90px;
border-bottom-left-radius: 90px;
}

50. Shorthand Method
#box {
border:1px solid red;
border-radius: 30px;
}
One value is for all the corners

51. Shorthand Method
#box {
border:1px solid red;
border-radius: 30px 10px;
}
First value is for top-left and bottom-right corner
Second value is for top-right and bottom–left corner

52. Assigning
Display Types

53. Display property
• You should already be familiar with the display behavior of block and inline elements.
• The display property was created to allow authors to specify how elements should behave in
layouts

54. Display property
• For example, it is common practice to make li elements (which usually display with the
characteristics of block elements) display as inline elements to turn a list into a horizontal
navigation bar.
• You may also make an otherwise inline a (anchor) element display as a block in order to give it
a specific width and height:
ul li { display: inline; }
ul li a { display: block; }

55. Display property
• Another useful value for the display property is none, which removes the content from the
normal flow entirely.
• Unlike visibility: hidden, which just makes the element invisible but keeps the space it would
have occupied blank, display: none removes the content, and the space it would have
occupied is closed up.

56. CSS Opacity

57. Opacity
• The CSS opacity property configures the transparency of an element.
• Opacity values range from 0 (which is completely transparent) to 1 (which is
completely opaque and has no transparency)

58. CSS Gradients

59. Gradients
• CSS provides a method to configure color as a gradient, which is a smooth
blending of shades from one color to another color.
• A CSS gradient background color is defined purely with CSS—no image file is
needed!

60. Linear Gradient Syntax
• A linear gradient is a smooth blending of color in a single direction such as from
top to bottom or from left to right.
• To configure a basic linear gradient, code the linear-gradient function as the
value of the background-image property.
• Indicate the direction of the gradient by coding the keyword phrase “to bottom”,
“to top”, “to left”, or “to right”.
• Next, list the starting color and the ending color.

61. Radial Gradient Syntax
• A radial gradient is a smooth blending of color emanating outward from a single point.
• Code the radial gradient function as the value of the background-image property to
configure a radial gradient.
• List two colors as the values of the function.
• The first color will be displayed by default in the center of the element and gradually
blend outward until the second color is displayed.
• The basic format for a two-color radial gradient that blends from white to blue follows:

62. Box Drop
Shadow

63. Box Shadow
• The box-shadow property applies a drop shadow around the entire visible element box
(excluding the margin)

64. Box Shadow
• The box-shadow property applies a drop shadow around the entire visible element box
(excluding the margin)

65. Box Shadow
• You can make the shadow render inside the edges of the visible element box by adding the
inset keyword to the rule. This makes it look like the element is pressed into the screen.

66. Floating

67. Normal Flow
• In the CSS layout model, text elements are laid out from top to bottom in the order in which
they appear in the source, and from left to right in left-to-right reading languages.
• Block elements stack up on top of one another and fill the available width of the browser
window or other containing element.
• Inline elements and text characters line up next to one another to fill the block elements

68. Normal Flow

69. Floating
• Simply stated, the float property moves an element as far as possible to the left or right,
allowing the following content to wrap around it.
• It is a unique feature built into CSS with some interesting behaviors.

70. Example

71. Floating an inline text element
• In the previous example, we floated an inline image element.
• This time, let’s look at what happens when you float an inline text (non-replaced) element— in
this case, a span of text(Figure)

72. Floating block elements
• In this example, the whole second paragraph element is floated to the left

73. Clearing Floated Elements
• Applying the clear property to an element prevents it from appearing next to a floated element
and forces it to start against the next available “clear” space below the float.
• Keep in mind that you apply the clear property to the element you want to start below the
floated element, not the floated element itself.

74. Example (Without clear)

75. Example (With clear)

76. Positioning

77. Position
• CSS provides several methods for positioning elements on the page.
• They can be positioned relative to where they would normally appear in the flow, or removed
from the flow altogether and placed at a particular spot on the page.
• You can also position an element relative to the viewport, and it will stay put while the rest of
the page scrolls

78. Positions
Static
• This is the normal positioning scheme in which elements are positioned as they occur in the
normal document flow.
Relative
• Relative positioning moves the element box relative to its original position in the flow.
• The distinctive behavior of relative positioning is that the space the element would have
occupied in the normal flow is preserved as empty space.

79. Positions
Absolute
• Absolutely positioned elements are removed from the document flow entirely and positioned
with respect to the viewport or a containing element .
• Unlike relatively positioned elements, the space they would have occupied is closed up.
• In fact, they have no influence at all on the layout of surrounding elements.

80. Positions
Fixed
• The distinguishing characteristic of fixed positioning is that the element stays in one position
in the viewport even when the document scrolls.
• Fixed elements are removed from the document flow and positioned relative to the viewport
rather than another element in the document.

81. Positions
Sticky
• Sticky positioning is a combination of relative and fixed in that it behaves as though it is
relatively positioned, until it is scrolled into a specified position relative to the viewport, at
which point it remains fixed.

82. Specifying Positions
• Once you’ve established the positioning method, the actual position is specified with some
combination of up to four offset properties.

83. Specifying Positions
• The value provided for each offset property defines the distance the element should be
moved away from that respective edge.
• For example, the value of top defines the distance the top outer edge of the positioned
element should be offset from the top edge of the browser or other containing element.
• A positive value for top results in the element box moving down by that amount.
• Similarly, a positive value for left would move the positioned element to the right by that
amount.

84. Apply Position

85. Relative Positioning
• Relative positioning moves an element relative to its original spot in the flow. The space it
would have occupied is preserved and continues to influence the layout of surrounding
content. See Example:

86. Absolute Positioning
• Absolute positioning works a bit differently and is a more flexible method for accurately
placing items on the page than relative positioning.

87. Absolute Positioning
• The element is positioned relative to its nearest containing block.
• It just so happens that the nearest containing block in previous example is the root (html
element, also known as the initial containing block, so the offset values position the em
element relative to the whole document.
• If the positioned element is not contained within another positioned element, then it will be
placed relative to the initial containing block (created by the html element).
• But if the element has an ancestor (i.e., is contained within an element) that has its position
set to relative, absolute, or fixed, the element will be positioned relative to the edges of that
element instead

88. Absolute Positioning
• Absolutely positioned elements always behave as block-level elements.
• For example, the margins on all sides are maintained, even though this is an inline element.
• It also permits a width to be set for the element.

89. Absolute Positioning
• See this example in which p element has position: relative and margin-top of 30px.
• Now the absolute position of em element will position itself according to its parent element
which is p.

90. Absolute Positioning
• But if the p element which is parent of em element doesn’t have any position, then the em
element will be positioned according to the root element.

91. Example

92. Vertical
Navigation with
Unordered List

93. Vertical Navigation Bar

94. Horizontal
Navigation with
Unordered List

95. Horizontal Navigation Bar

96. Stacking Order

97. Absolute Positioning
• As we’ve seen, absolutely positioned elements overlap other elements, so it follows that
multiple positioned elements have the potential to stack up on one another.
• By default, elements stack up in the order in which they appear in the document, but you can
change the stacking order with the z-index property (see Note).
• Picture the z-axis as a line that runs perpendicular to the page, as though from the tip of your
nose, through this page, and out the other side

98. Absolute Positioning
• The value of the z-index property is a number (positive or negative).
• The higher the number, the higher the element will appear in the stack.
• Lower numbers and negative values move the element lower in the stack.

99. Fixed Positioning
• For the most part, fixed positioning works just like absolute positioning.
• The significant difference is that the offset values for fixed elements are always relative to the
viewport, which means the positioned element stays put even when the rest of the page
scrolls.
• Fixed elements are often used for menus that stay in the same place at the top, bottom, or
side of a screen so they are always available, even when the content scrolls.

100. CSS
Interactivity
with Pseudo-
Classes

101. Pseudo Classes
• Have you ever visited a website and found that the text hyperlinks changed color when you
moved the mouse pointer over them? Often, this is accomplished using a CSS pseudo-class,
which can be used to apply a special effect to a selector.
• The five pseudo-classes that can be applied to the anchor element are shown in Table.

102. Pseudo Classes
• Notice the order in which the pseudo-classes are listed in Table. Anchor element pseudo-
classes must be coded in this order (although it’s OK to omit one or more of those listed).
• If you code the pseudo-classes in a different order, the styles will not be reliably applied.
• It’s common practice to configure the :focus and :active pseudo-classes with the same styles.

103. Thank you
Fraz Sarwar
Faraz.sarwar@uskt.edu.pk