Scribd
Upload
66 views

Chapter 3 Cascaded Style Sheets (CSS)

The document summarizes Cascading Style Sheets (CSS) in 3 paragraphs. CSS is used to style HTML documents by defining styles like design, layout, and display variations. CSS styles are defined separately from HTML markup either internally, inlined, or externally in CSS files. CSS rules contain selectors that point to HTML elements to style along with declaration blocks containing property-value pairs to define styles.

Uploaded by

zeki.mama21.21
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
66 views

Chapter 3 Cascaded Style Sheets (CSS)

The document summarizes Cascading Style Sheets (CSS) in 3 paragraphs. CSS is used to style HTML documents by defining styles like design, layout, and display variations. CSS styles are defined separately from HTML markup either internally, inlined, or externally in CSS files. CSS rules contain selectors that point to HTML elements to style along with declaration blocks containing property-value pairs to define styles.

Uploaded by

zeki.mama21.21
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 21

CHAPTER 3: CASCADED STYLE SHEETS (CSS)

3.1. Introduction
CSS stands for Cascading Style Sheets. CSS is the language we use to style an HTML document. CSS is used
to define styles for your web pages, including the design, layout and variations in display for different
devices and screen sizes.

It describes how HTML elements should be displayed. CSS saves a lot of work. It can control the layout of
multiple web pages all at once. External stylesheets are stored in CSS files.

HTML was NEVER intended to contain tags for formatting a web page! HTML was created to describe the
content of a web page, like:

<h1>This is a heading</h1>
<p>This is a paragraph. </p>
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a
nightmare for web developers. Development of large websites, where fonts and color information were
added to every single page, became a long and expensive process. To solve this problem, the World Wide
Web Consortium (W3C) created CSS. CSS removed the style formatting from the HTML page!

The style definitions are normally saved in external .css files. With an external stylesheet file, you can
change the look of an entire website by changing just one file!

A CSS rule consists of a selector and a declaration block.

The selector points to the HTML element you want to style. The declaration block contains one or more
declarations separated by semicolons. Each declaration includes a CSS property name and a value,
separated by a colon. Multiple CSS declarations are separated with semicolons, and declaration blocks are
surrounded by curly braces.

3.2. Adding CSS


When a browser reads a style sheet, it will format the HTML document according to the information in
the style sheet. There are three ways of inserting a style sheet:

o External CSS
With an external style sheet, you can change the look of an entire website by changing just
one file! Each HTML page must include a reference to the external style sheet file inside
the <link> element, inside the head section. External styles are defined within the <link>
element, inside the <head> section of an HTML page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

"mystyle.css"
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}
o Internal CSS
An internal style sheet may be used if one single HTML page has a unique style. The
internal style is defined inside the <style> element, inside the head section.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
o Inline CSS
An inline style may be used to apply a unique style for a single element. To use inline
styles, add the style attribute to the relevant element. The style attribute can contain any
CSS property.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

o Multiple Style Sheets


If some properties have been defined for the same selector (element) in different style
sheets, the value from the last read style sheet will be used.
o Cascading Order
What style will be used when there is more than one style specified for an HTML element?
It will be according to the following priority order:
o Inline style (inside an HTML element)
o External and internal style sheets (in the head section)
o Browser default
So, an inline style has the highest priority, and will override external and internal styles and
browser defaults.
3.3. CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

3.3.1. Simple selectors (select elements based on name, id, class)


o The element selector selects HTML elements based on the element name.
Example:
p {
text-align: center;
color: red;
}
o The id selector uses the id attribute of an HTML element to select a specific element. The id of an
element is unique within a page, so the id selector is used to select one unique element! To select
an element with a specific id, write a hash (#) character, followed by the id of the element. An id
name cannot start with a number!
Example:
#para1 {
text-align: center;
color: red;
}
<html>
<head>
<style>
#para1 {
text-align: center;
color: red; }
p {
text-align: left;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
o 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. A class name cannot start
with a number!
Example:
.center {
text-align: center;
color: red;
}
You can also specify that only specific HTML elements should be affected by a class.
In this example only <p> elements with class="center" will be red and center-aligned
p.center {
text-align: center;
color: red;
}
HTML elements can also refer to more than one class.
In this example the <p> element will be styled according to class="center" and to
class="large"
<p class="center large">This paragraph refers to two classes.</p>

o The universal selector (*) selects all HTML elements on the page.
Example
The CSS rule below will affect every HTML element on the page.

* {
text-align: center;
color: blue;
}
o The grouping selector selects all the HTML elements with the same style definitions. Look at the
following CSS code (the h1, h2, and p elements have the same style definitions)
h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p {
text-align: center;
color: red;
}
It will be better to group the selectors, to minimize the code. To group selectors,
separate each selector with a comma like the following.
h1, h2, p {
text-align: center;
color: red;
}
3.3.2. Combinator selectors
Combinator selectors select elements based on a specific relationship between them. A Combinator is
something that explains the relationship between the selectors. A CSS selector can contain more than one
simple selector. Between the simple selectors, we can include a Combinator. There are four different
Combinator in CSS:
1. descendant selector (space)
The descendant selector matches all elements that are descendants of a specified element.
Example:
div p {
background-color: yellow;
}
2. child selector (>)
The child selector selects all elements that are the children of a specified element. Note
that all descendants my not be children.
Example:
div > p {
background-color: yellow;
}
3. adjacent sibling selector (+)
The adjacent sibling selector is used to select an element that is directly after another
specific element. Sibling elements must have the same parent element, and "adjacent"
means "immediately following".
Example:
div + p {
background-color: yellow;
}
4. general sibling selector (~)
The general sibling selector selects all elements that are next siblings of a specified
element.
Example
div ~ p {
background-color: yellow;
}
3.3.3. Pseudo-class selectors
Pseudo-class selectors select elements based on a certain state. A pseudo-class is used to define a special
state of an element. For example, it can be used to: Style an element when a user mouses over it or Style
visited and unvisited links differently or Style an element when it gets focus.

Syntax
selector:pseudo-class {
property: value;
}
Example 1: anchor
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}

Example 2: Simple Tooltip Hover over a <div> element to show a <p> element (like a tooltip):

p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
3.3.4. Pseudo-elements selectors
Pseudo-elements selectors select and style a part of an element. A CSS pseudo-element is used to style
specified parts of an element. For example, it can be used to: Style the first letter, or line, of an element,
Insert content before, or after, the content of an element.
Example
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
Note: The ::first-line pseudo-element can only be applied to block-level elements. The following
properties apply to the ::first-line pseudo-element:
o font properties
o color properties
o background properties
o word-spacing
o letter-spacing
o text-decoration
o vertical-align
o text-transform
o line-height
o clear
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: 200%;
}
</style>
</head>
<body>
<p>You can use the ::first-letter pseudo-element to add a special effect to the first
character of a text!</p>
</body>
</html>
Several pseudo-elements can also be combined.
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
The ::before pseudo-element can be used to insert some content before the content of an element.
The ::after pseudo-element can be used to insert some content after the content of an element.
Example:
h1::before {
content: url(smiley.gif);
}
h2::after {
content: url(smiley.gif);
}
The ::marker pseudo-element selects the markers of list items.
::marker {
color: red;
font-size: 23px;
}
The ::selection pseudo-element matches the portion of an element that is selected by a user. The
following CSS properties can be applied to ::selection: color, background, cursor, and outline.
::selection {
color: red;
background: yellow;
}

3.3.5. Attribute selectors (select elements based on an attribute or attribute value)


It is possible to style HTML elements that have specific attributes or attribute values. The [attribute]
selector is used to select elements with a specified attribute.

Example:
a[target] {
background-color: yellow;
}
3.4. Basic CSS styles
CSS Comments
CSS comments are not displayed in the browser, but they can help document your source code.
Comments are used to explain the code, and may help when you edit the source code at a later date. A
CSS comment is placed inside the <style> element, and starts with /* and ends with */ for multi-line
comment and // for single line comment.

CSS Colors
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

o CSS Background Color - <h1 style="background-color:DodgerBlue;">Hello World</h1>


o CSS Text Color - <h1 style="color:Tomato;">Hello World</h1>
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
o The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0
- 1.0. The lower value, the more transparent.
o opacity: 0.3;
o An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a
number between 0.0 (fully transparent) and 1.0 (fully opaque).
o background: rgba(0, 128, 0, 0.3)
CSS Background images
o The background-image property specifies an image to use as the background of an element.
body {
background-image: url("paper.gif");
}
o Note: When using a background image, use an image that does not disturb the text. The
background image can also be set for specific elements, like the <p> element:
p {
background-image: url("paper.gif");
}
o By default, the background-image property repeats an image both horizontally and vertically.
Some images should be repeated only horizontally or vertically. To repeat an image vertically, set
background-repeat: repeat-x;
o To repeat an image vertically, set
background-repeat: repeat-y;
o Showing the background image only once is also specified by:
background-repeat: no-repeat;
o The background-position property is used to specify the position of the background image.
background-position Sets the starting position of a background image. The first value is the
horizontal position and the second value is the vertical. Example:
o background-position: right top;
o The background-attachment property specifies whether the background image should scroll or be
fixed (will not scroll with the rest of the page).
o background-attachment: fixed;
o background-attachment: scroll;
o To shorten the code, it is also possible to specify all the background properties in one single
property. This is called a shorthand property. When using the shorthand property the order of the
property values is: background-color background-image background-repeat background-
attachment background-position. It does not matter if one of the property values is missing, as
long as the other ones are in this order. Example:
o background: #ffffff url("img_tree.png") no-repeat right top;

CSS Borders

The CSS border properties allow you to specify the style, width, and color of an element's border.

o The border-style property specifies what kind of border to display. The allowed values are: dotted,
dashed, solid, double, groove, ridge, inset, outset, none, hidden. The border-style property can
have from one to four values (for the top border, right border, bottom border, and the left
border). None of the OTHER CSS border will have ANY effect unless the border-style property is
set. Example:
border-style: dotted;
o The border-width property specifies the width of the four borders. The width can be set as a
specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium,
or thick. Example:
border-width: 5px;
border-width: medium;
o The border-color property is used to set the color of the four borders. The color can be set by:
name - specify a color name, like "red"
HEX - specify a HEX value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
HSL - specify a HSL value, like "hsl(0, 100%, 50%)" transparent
Note: If border-color is not set, it inherits the color of the element.
Example:
border-color: red;
o There are also properties for specifying each of the borders (top, right, bottom, and left).
Example:
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;

If the border-style property has four values:

 border-style: dotted solid double dashed;


o top border is dotted
o right border is solid
o bottom border is double
o left border is dashed

If the border-style property has three values:

 border-style: dotted solid double;


o top border is dotted
o right and left borders are solid
o bottom border is double
If the border-style property has two values:
 border-style: dotted solid;
o top and bottom borders are dotted
o right and left borders are solid
If the border-style property has one value:
o border-style: dotted;
o all four borders are dotted
o To shorten the code, it is also possible to specify all the individual border properties in one
property. The border property is a shorthand property for the following individual border
properties:
border-width
border-style (required)
border-color
Example
p{
border: 5px solid red;
}

o You can also specify all the individual border properties for just one side:
p {
border-left: 6px solid red;
}
o The border-radius property is used to add rounded borders to an element.
Example
p{
border: 2px solid red;
border-radius: 5px;
}
CSS Margins
Margins are used to create space around elements, outside of any defined borders.
o CSS has properties for specifying the margin for each side of an element; margin-top, margin-right,
margin-bottom and margin-left.
All the margin properties can have the following values:
o auto - the browser calculates the margin
o length - specifies a margin in px, pt, cm, etc.
o % - specifies a margin in % of the width of the containing element
o inherit - specifies that the margin should be inherited from the parent element
o NB: Negative values are allowed.

Example
Set different margins for all four sides of a <p> element:
p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
o To shorten the code, it is possible to specify all the margin properties in one property.
o If the margin property has four values:
margin: 25px 50px 75px 100px;
 top margin is 25px, right margin is 50px, bottom margin is 75px, left margin is 100px
o If the margin property has three values:
margin: 25px 50px 75px;
 top margin is 25px, right and left margins are 50px, bottom margin is 75px
o If the margin property has two values:
margin: 25px 50px;
 top and bottom margins are 25px, right and left margins are 50px
o If the margin property has one value:
margin: 25px;
 all four margins are 25px
o You can set the margin property to auto to horizontally center the element within its
container.
CSS Padding
Padding is used to create space around an element's content, inside of any defined borders.
o CSS has properties for specifying the padding for each side of an element: padding-top, padding-
right, padding-bottom, padding-left.
o All the padding properties can have the following values:
o length - specifies a padding in px, pt, cm, etc.
o % - specifies a padding in % of the width of the containing element
o inherit - specifies that the padding should be inherited from the parent element
Note: Negative values are not allowed.
Example:
Set different padding for all four sides of a <div> element:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
o To shorten the code, it is possible to specify all the padding properties in one property.
o If the padding property has four values:
padding: 25px 50px 75px 100px;
o top is 25px, right is 50px, bottom is 75px, left is 100px
o If the padding property has three values:
padding: 25px 50px 75px;
o top is 25px, right and left are 50px, bottom is 75px
o If the padding property has two values:
padding: 25px 50px;
o top and bottom are 25px, right and left are 50px
o If the padding property has one value:
padding: 25px;
o all four paddings are 25px
o The CSS width property specifies the width of the element's content area. The content area is the
portion inside the padding, border, and margin of an element. So, if an element has a specified
width, the padding added to that element will be added to the total width of the element. This is
often an undesirable result.
o Example: Compare the outputs of the following div elements.
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 300px;
background-color: yellow;
}
div.ex2 {
width: 300px;
padding: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Padding and element width</h2>
<div class="ex1">This div is 300px wide.</div>
<br>
<div class="ex2">The width of this div is 350px, even though it is defined as 300px in the CSS.</div>
</body>
</html>

Here, the <div> element is given a width of 300px. However, the actual width of the <div> element will be
350px (300px + 25px of left padding + 25px of right padding). To keep the width at 300px, no matter the
amount of padding, you can use the box-sizing property. This causes the element to maintain its actual
width; if you increase the padding, the available content space will decrease.

div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
CSS Box Model
In CSS, the term "box model" is used when talking about design and layout. All HTML elements can be
considered as boxes. The CSS box model is essentially a box that wraps around every HTML element. It
consists of: margins, borders, padding, and the actual content. When you set the width and height
properties of an element with CSS, you just set the width and height of the content area. To calculate the
full size of an element, you must also add padding, borders and margins.
o The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border +
left margin + right margin
o The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom
border + top margin + bottom margin

CSS Outline

An outline is a line drawn outside the element's border.


CSS has the following outline properties:
outline-style
outline-color
outline-width
outline-offset
outline
Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may
overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total
width and height is not affected by the width of the outline. Please refer the values from border style.

Example: outline-style: dotted;

CSS Text

o The color property is used to set the color of the text. The color is specified by:
a color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
o The text-align property is used to set the horizontal alignment of a text. A text can be left or right
aligned, centered, or justified.

text-align: center;
text-align: left;
text-align: right;
text-align: justify;
o The vertical-align property sets the vertical alignment of an element.
o Example: vertical-align: text-top;
o The text-decoration-line property is used to add a decoration line to text.
o Example:
otext-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: underline;
text-decoration-line: overline underline;
o The text-decoration-color property is used to set the color of the decoration line.
text-decoration-color: red;
o The text-transform property is used to specify uppercase and lowercase letters in a text. It can
be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each
word:
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
o The text-indent property is used to specify the indentation of the first line of a text:
text-indent: 50px;
o The letter-spacing property is used to specify the space between the characters in a text.
Example:
letter-spacing: 5px;
o The line-height property is used to specify the space between lines:
line-height: 0.8;
o The word-spacing property is used to specify the space between the words in a text.
word-spacing: 10px;
o The text-shadow property adds shadow to text.
Horizontal shadow, vertical shadow, shadow color, and a blur effect respectively are specified as
text-shadow: 2px 2px 5px red;

o In CSS, we use the font-family property to specify the font of a text. If the font name is more
than one word, it must be in quotation marks, like: "Times New Roman". The font-family property
should hold several font names as a "fallback" system, to ensure maximum compatibility between
browsers/operating systems. Start with the font you want, and end with a generic family (to let
the browser pick a similar font in the generic family, if no other fonts are available). The font
names should be separated with comma.
o The following list are the best web safe fonts for HTML and CSS:
 Arial (sans-serif)
 Verdana (sans-serif)
 Tahoma (sans-serif)
 Trebuchet MS (sans-serif)
 Times New Roman (serif)
 Georgia (serif)
 Garamond (serif)
 Courier New (monospace)
 Brush Script MT (cursive)
o Example:
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
o The font-size property sets the size of the text. If you do not specify a font size, the
default size for normal text, like paragraphs, is 16px (16px=1em)
 font-size: 40px;
o The text size can be set with a vw unit, which means the "viewport width". That way the
text size will follow the size of the browser window. Viewport is the browser window size.
1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.
 <h1 style="font-size:10vw">Hello World</h1>
o The font property is a shorthand property for: font-style, font-variant, font-weight, font-
size/line-height, and font-family. Example:
 font: italic small-caps bold 12px/30px Georgia, serif;

CSS Links

o Links can be styled differently depending on what state they are in. The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
o When setting the style for several link states, there are some order rules. a:hover MUST come
after a:link and a:visited. a:active MUST come after a:hover
o Example:
o /* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
CSS Lists

o The list-style-type property specifies the type of list item marker. Example:
o ul.a {
list-style-type: circle; }
ul.b {
list-style-type: square; }
ol.c {
list-style-type: upper-roman; }
ol.d { list-style-type: lower-alpha; }
o The list-style-image property specifies an image as the list item marker. Example:
o list-style-image: url('sqpurple.gif');
o The list-style-position property specifies the position of the list-item markers (bullet points). Example:
list-style-position: outside;
list-style-position: inside;
o When using the shorthand property, the order of the property values are: list-style-type, list-style-
position, list-style-image.
o Example:
 list-style: square inside url("sqpurple.gif");
CSS Tables

o To specify table borders in CSS, use the border property.


Example
table, th, td {
border: 1px solid;
}
o The width and height of a table are defined by the width and height properties.
table {
width: 100%;
}
o The text-align property sets the horizontal alignment (like left, right, or center) of the content in
<th> or <td>.
td {
text-align: center;
}
o The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content
in <th> or <td>.
td {
height: 50px;
vertical-align: bottom;
}
CSS Layout

o The display property specifies if/how an element is displayed. Every HTML element has a default
display value depending on what type of element it is. The default display value for most elements
is block or inline. However, you can override this. Changing an inline element to a block element,
or vice versa, can be useful for making the page look a specific way, and still follow the web
standards. Example: li {
display: inline;
}
o Hiding an element can be done by setting the display property to none.
h1 {
display: none;
}

o visibility:hidden; also hides an element. However, the element will still take up the same
space as before.
h1.hidden {
visibility: hidden;
}
o Setting the width of a block-level element will prevent it from stretching out to the edges
of its container. Then, you can set the margins to auto, to horizontally center the element
within its container. The element will take up the specified width, and the remaining space
will be split equally between the two margins. Problem occurs when the browser window
is smaller than the width of the element. The browser then adds a horizontal scrollbar to
the page. Using max-width instead, in this situation, will improve the browser's handling of
small windows. This is important when making a site usable on small devices. Example:
o max-width: 500px;
o Drag the browser window to smaller than 500px wide, to see the difference
between the two divs!
o The position property specifies the type of positioning method used for an element (static, relative,
fixed, absolute or sticky). Elements are then positioned using the top, bottom, left, and right
properties. However, these properties will not work unless the position property is set first. They also
work differently depending on the position value.
o HTML elements are positioned static by default. Static positioned elements are not affected by
the top, bottom, left, and right properties. An element with position: static; is not positioned in
any special way; it is always positioned according to the normal flow of the page.
Example
div.static {
position: static;
border: 3px solid #73AD21;
}
o An element with position: relative; is positioned relative to its normal position. Setting the
top, right, bottom, and left properties of a relatively-positioned element will cause it to be
adjusted away from its normal position. Other content will not be adjusted to fit into any gap
left by the element.

Example
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}

o An element with position: fixed; is positioned relative to the viewport, which means it always
stays in the same place even if the page is scrolled. The top, right, bottom, and left properties
are used to position the element. A fixed element does not leave a gap in the page where it
would normally have been located.

Example
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
o An element with position: absolute; is positioned relative to the nearest positioned
ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute
positioned element has no positioned ancestors, it uses the document body, and moves
along with page scrolling. Note: Absolute positioned elements are removed from the
normal flow, and can overlap elements.
o An element with position: sticky; is positioned based on the user's scroll position. A sticky
element toggles between relative and fixed, depending on the scroll position. It is
positioned relative until a given offset position is met in the viewport - then it "sticks" in
place (like position:fixed).
Example
div.sticky {
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
o When elements are positioned, they can overlap other elements. The z-index property
specifies the stack order of an element (which element should be placed in front of, or behind,
the others). An element can have a positive or negative stack order. z-index only works on
positioned elements (position: absolute, position: relative, position: fixed, or position: sticky)
and flex items (elements that are direct children of display: flex elements).
Example
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
o The CSS overflow property controls what happens to content that is too big to fit into an area.
The overflow property specifies whether to clip the content or to add scrollbars when the
content of an element is too big to fit in the specified area. The overflow property has the
following values:
o visible - Default. The overflow is not clipped. The content renders outside the
element's box
o hidden - The overflow is clipped, and the rest of the content will be invisible
o scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
o auto - Similar to scroll, but it adds scrollbars only when necessary
Note: The overflow property only works for block elements with a specified height.
By default, the overflow is visible, meaning that it is not clipped and it renders outside the
element's box.
Example
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: visible;
}
o The overflow-x and overflow-y properties specifies whether to change the overflow of
content just horizontally or vertically (or both):
o overflow-x specifies what to do with the left/right edges of the content.
o overflow-y specifies what to do with the top/bottom edges of the content.
Example
div {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
o The float property is used for positioning and formatting content e.g. let an image float left to
the text in a container.
The float property can have one of the following values:
 left - The element floats to the left of its container
 right - The element floats to the right of its container
 none - The element does not float (will be displayed just where it occurs in the
text). This is default
 inherit - The element inherits the float value of its parent
In its simplest use, the float property can be used to wrap text around images.
Example:
img {
float: right;
}
<!DOCTYPE html>
<html>
<head>
<style>
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}

.div2 {
background: yellow;
}
.div3 {
background: green;
}
</style>
</head>
<body>
<h2>Float Next To Each Other</h2>
<p>In this example, the three divs will float next to each other.</p>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
</body>
</html>

You might also like