Working-With-The-Box-Model-Lesson-5.pptx

WORKING WITH
THE BOX MODEL
Lesson 5

GROUPING SELECTOR
• The CSS grouping selector is used to select
multiple elements and style them together.
This reduces the code and extra effort to
declare common styles for each element. To
group selectors, each selector is separated
by a space.

EXAMPLE:
<!DOCTYPE
html>
<html>
<head>
<style>
article, p, img {
display: block;
margin: auto;
text-align: center;
border-bottom: double orange;
}
</style>
</head><body>
<article>Demo Text</article>
<p>This is demo text.</p>
<br/>
<img
src="https://www.tutorialspoint.com/swi
ng/images/swing.jpg">
</body>
</html>

CLASIFYING SECTOR
• The class selector selects HTML elements
with a specific class attribute. To select
elements with a specific class, write a
period (.) character, followed by the class
name

LAYOUT TABLE:
• A layout table is a table used to provide some
sort of visual structure to a page, sometimes
people want to design columns on a page, some
people find using layout tables easier for Forms,
etc. When you use a table for anything but
providing data, you are using a table for layout.

CSS POSITIONING
The position CSS property sets
how an element is positioned
in a document.
The top, right, bottom,
and left properties determine
the final location of positioned
elements.

STATIC:
The default position.
The element would be
in this position if you
did not specify any
value.

• Static is the default position for
HTML elements. Elements
with position: static are positioned
based on the normal flow of the page,
as you would expect them to be
without any CSS styling. They are not
affected by the top, right, bottom, or
left properties.

RELATIVE:
•This position depends on the
other element. Even if you
resize the browser window, it
will not overlap into other
element (unlike the absolute
value).

•you set values for
the top, right, bottom,
and/or left properties.
Surrounding elements won’t be
affected, but there will be space
where the repositioned element
would have been (in static
positioning).

ABSOLUTE:
The element stays in one place if
you resize the browser window, it
will remain in the part of the page
you assigned.
an element ignores the normal
document flow

div 2 is placed inside a container div (in gray) and
positioned relative to the container, since the
container is the nearest ancestor element of div 2.

FIXED:
•The elements stays in place
even if you scroll up or down,
left or right . Its positions
depends on the browser
window not on the page itself.

FLOAT:
The float CSS property places an
element on the left or right side of its
container, allowing text and inline
elements to wrap around it.

CLEAR:
Ensures that there is no content
around the element.

SPAN
•The span element is a generic
inline element, typically used to
apply styling to a portion of inline
content. An inline element does
not start a new line and only takes
up as much space on the page as
its content.

•Span used to change the
color of the text
•Span also use in
changing the aspects of a
text.

DIV
•The div (division) element is a
generic block-level element, most
often used to divide page content
into blocks. A block element is a
page element that starts a new
line and has a width equal to the
entire page or the parent
container.

div element use to
separate contents
of a page into
chunks.

DIFFERENCE BETWEEN SPAN
AND DIV
•A div element is used for block-
level organization and styling
of page elements, whereas a
span element is used for inline
organization and styling.

•To summarize, a div tag
creates a block-level
element while a <span>
tag wraps around an inline
element.

THE BOX MODEL
The term "box model" is used when
talking about design and layout.

Explanation of the different parts:
• Content / element- The content of the box, where
text and images appear
• Padding - Clears an area around the content. The
padding is transparent
• Border - A border that goes around the padding
and content
• Margin - Clears an area outside the border. The
margin is transparent

MARGIN and PADDING
The margin property sets the margins
for an element, and is a shorthand
property for the following properties:
•margin-top
•margin-right
•margin-bottom
•margin-left

•a margin is the
area between the
main content of a
page and the
page edges

PADDING PROPERTY
The padding property in CSS defines the innermost
portion of the box model, creating space around an
element’s content, inside of any defined margins
and/or borders.
Padding values are set using lengths or
percentages, and cannot accept negative values.
The initial, or default, value for all padding properties
is 0.
three values are declared, it is padding: [top] [left-
and-right] [bottom];.

•Padding represents the amount
of inner space an element has,
while the margin is whitespace
available surrounding an
element.

Working-With-The-Box-Model-Lesson-5.pptx

More Related Content

Similar to Working-With-The-Box-Model-Lesson-5.pptx

Recently uploaded

Working-With-The-Box-Model-Lesson-5.pptx