Web Design

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>

2
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 setting a width and height on the element.
- Top and Bottom margins/paddings are not respected.
- Examples of inline elements:
• <span> and <a>

3
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;}

4
The inline-block Elements
- Inline-block allows to set a width and height.
- Inline-block respects Top/Bottom margins and paddings.
- Inline-block does not add line-break after the element, so one
element can sit next to another.
- The element can be converted to “inline-block” element by
changing the value of the “display” property of the element to
“inline-block”

div {
display: inline-block;
width: 70px;
height: 70px;
padding: 15px;
border: 1px solid blue;
background-color: yellow;
}
5
Hiding an element
- Hiding an element using CSS can be done by setting its“display”
property to "none" or its “visibility” property to "hidden”.
- However, these two methods produce different results.
- If the“visibility” property of an element is set to “hidden”; The
element will be hidden, but it will still take up the same space as
before affecting the layout.

h1 {
visibility:hidden;
}

6
CSS display Property
- If the “display” property of an element is set to “none”; The
element will be hidden, and it will not take up any space with no
effect on the layout.

h1 {
display:none;
}

7
Example
- Write the required CSS style to create a similar output

8
CSS Float
- “Floats” allows block-level elements to be placed side-by-side
instead of on top of each other.
- The element can fly to the left or right corner of the parent, and
the other elements will wrap around it.
- Float is used especially with images and layouts.
- Elements are floated horizontally (only)
- The elements before the floating element will not affected.
- Values: none | left | right
.img1 {
float:left; }
.img2 {
float:right; }

9
CSS Clear
- Elements after the floating element will flow around it.
- To avoid this, the “clear” property is used.
- The clear property specifies which sides of an element not to
flow.
- Property Name: Clear
- Values: none: Allows floating elements on both sides.
left: No floating elements allowed on left side.
right: No floating elements allowed on right side.
both: No floating elements allowed on any side

div1 {
clear:both;
}

10
CSS Positioning
- The position property specifies the type of positioning method
used for an element.
- There are five different position values: Static, Fixed, Relative,
Absolute, and sticky.

11
CSS Positioning
- The CSS Positioning depends on other four properties:
- Top: increases/decreases the space between the top edge of the
element and the top edge of its parent.
- Bottom: increases/decreases the space between the Bottom
edge of the element and the Bottom edge of its parent.
- Left: increases/decreases the space between the left edge of the
element and the left edge of its parent.
- Right: increases/decreases the space between the right edge of
the element and the right edge of its parent.
- These four properties will not work with the static
positioning.
- Static positioned elements are not affected by the top,
bottom, left, and right properties.
12
Static Positioning
- An element with static positioning is always positioned
according to the normal flow of the page.
- Property: { position: static; }

{ position: static;top:10px; left:10px; }

13
Fixed Positioning
- An element with fixed positioning is positioned relative to the
window, which means it always stays in the same place even if
the page is scrolled.
- Property: { position: fixed; }

{ position: fixed;
top:0;
left:0; }

14
Relative Positioning
- An element with relative positioning is positioned relative to its
normal position.
- Property: { position: relative; }

{ position: relative;
top:10px;
left:10px; }

15
Absolute Positioning
- An element with absolute positioning is positioned relative to the
nearest parent that has “relative position”. If this parent is not
found it will use the body.
- { position: absolute; }

.child {
position: absolute;
left:0;
top:0;
}
.parent {
position: static;
}

16
Sticky Positioning
- Sticky positioning allows elements to stick when the scroll
reaches a certain point. An element with a sticky position will
behave like a relatively-positioned element until it reaches a
specified point and then starts behaving like a Fixed-positioned
element.
{
position: sticky;
top:0;
}

17
CSS Z-index
- Sets the stack order of an element. Element with greater order is
always in front, z-index will not work with static positioning.
- Property Name: z-index
- Values:auto | number (+/-)

{ z-index:5; }

18
CSS Z-index

19
Example
- Add the required CSS style to make a similar output

20
Example

<h2>Image Text</h2>

<p>Add some text to the image in bottom right:</p>

<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre"
width="1000" height="300">
<div class="center">bottom right</div>
</div>

21
Example
- Add the required CSS style to make a similar output

22
Example

<h2>Image Text</h2>

<p>Center text in image:</p>

<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre"
width="1000" height="300">
<div class="center">Centered</div>
</div>

23
Aligning Block Elements
- Block elements can be center-aligned by setting the left and right
margins to "auto". Setting the left and right margins to auto
specifies that they should split the available margin equally.

.center {
background-color:#b0e0e6;
width:70%;
margin-left:auto;
margin-right:auto; }

24
Left and Right Aligning
- Block elements can be left and right-aligned by setting the
absolute positioning or by setting the float properties.

.right {
width:300px;
background-color:#000;
position:absolute;
right:0px; }

.right {
width:300px;
background-color:#000;
float:right;
}

25
CSS Vendor Prefixes
- The process of introducing new CSS properties and HTML
elements can be long and convoluted.
- A new property doesn’t work until browser vendors implement
them in new versions of their browsers.
- Sometimes, there are disagreements about how a standard
should be implemented.
- Sometimes, a browser vendor creates a new transition property,
You had to do this with vendor prefixes
- Other times a browser vendor creates a new property which later
becomes a standard, but with a slightly different syntax.
- And even worse, if end-users never upgrade their browsers then
none of the new features will work at all.

26
CSS Vendor Prefixes
- Vendor prefixes are a way for browser makers to add support for
new CSS features before those features are fully supported in all
browsers.
- A vendor prefix is a special prefix that is added to a CSS property.
Each rendering engine has its own prefix which will only apply
the property to that particular browser.
- The CSS browser prefixes that you can use (each of which is
specific to a different browser) are:
• -webkit-: Used for: Chrome, Safari, iOS Safari / iOS WebView,
Android
• -moz-: Used for: Firefox
• -o-: Used for: Opera, Opera Mini
• -ms-: Used for: Edge, Internet Explorer
27
CSS Vendor Prefixes
- In most cases, to use a brand new CSS style property, you take
the standard CSS property and add the prefix for each browser.
- The prefixed versions would always come first (in any order you
prefer) while the normal CSS property will come last.

-webkit-border-radius:8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;

28
CSS3 Box Sizing
- Description: Used to alter the way sizing of an element occurs
with respect to its “box model”.
- Property Name: box-sizing: content-box | border-box
- Values:
- content-box: Width and height calculation represents “contents”
only while padding, border and margin is left out. (default value)
- border-box Width and height calculation includes “content,
padding and border”. Only the margin is left out.

29
CSS3 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;
}

30
CSS3 Scroll Behavior
- Description: Allows to define whether the scroll location of the
browser jumps to a new location or smoothly animates the
transition when a user clicks a link that targets an anchored
position within a scrolling box.
- Property Name: scroll-behavior: auto | smooth
- Values:
- auto: Jumps to a new location directly with no transition.
- smooth: Moves smoothly to the new location.

html {
scroll-behavior: smooth;
}

31
CSS3 background-size
- Description: used to specify the size of the background images.
- Property Name:
- background-size: auto | px | percent | cover | contain;
- Example:

background-size: 120px 100px;

➔background image width:120px, height:100px
background-size: 30% 10%;
➔ background image width: 30% of the element width,
height: 10% of the element width.
background-size: cover;
➔The bg image will be stretched to fill the element.
background-size: contain;
➔ The bg image will be scaled with the same aspect
ratio to fit the element width and

32
CSS3 background-origin
- Description: Specifies whether an element's background image
(only) extends into the border or not.
- Property:
- background-origin: border-box | padding-box | content-box;

.box {
width: 250px;
height: 150px;
padding: 10px;
border: 6px dashed #333;
background-size: contain;
background-origin: content-box;
background: url("images/sky.jpg") no-repeat;
}

33
CSS3 background-clip
- Description: Specifies whether an element's background color
extends into the border or not.
- Property:
- background-clip: border-box | padding-box | content-box;

.box {
width: 250px;
height: 150px;
padding: 10px;
border: 6px dashed #333;
background-clip: content-box;
background-color:#c0e2e7;
}

34