css-1. defining css

Cascading Style Sheet (CSS) describes how to display HTML elements. Different CSS for the same HTML file can result in very different layout of the webpage.

Try the demo One HTML Page - Multiple styles at https://www.w3schools.com/css/css_intro.asp

The CSS definition may be:
(1) external CSS, using an external style sheet for many web pages, e.g., in a web site ;
(2) internal CSS, using <style> element in the <head> section for a single web page;
(3) inline, using <style> attribute in the HTML element and is for that element only.

Reference: CSS How To at https://www.w3schools.com/css/css_howto.asp

css-1.1 Syntax

Syntax with single property:
property:value;>
Examples:
<body style="background-color:yellow;">

Syntax with multiple properties:
<property1:value1; property2:value2;
Example:
<h1 style="color: yellow; justify-content: center;">

Syntax for property to take multiple values:
property:value1 value2 value3;
Example:
<div style="border:solid green 5px;">

Syntax for property to choose one value from multiple choices in order of preferences:
property:value1,value2,value3;
Example:
<p style="font-family: verdana, geneva, sans-serif;">

Syntax with function values:
property:function(value1,value2,value3);
color:rgb(0,255,255);

css-1.2 Inline css

Syntax:
<tag_name style="declaration_1;...; "> html element content</tag_name>

Inline example:
<p style="color:green;font-size:160%;font-family:verdana;">Green and enlarged heading</p> <h4 style="color:green;font-size:160%;font-family:verdana;">Green and enlarged paragraph</h4> <div style="color:green;font-family:courier;">Green text</div>
displaying (without the red box):

Green and enlarged heading

Green and enlarged paragraph

Green text

css-1.3 Internal css

Syntax:
<head> ... <style> selector {declaration_1;declaration_2;...;} </style> ... </head>

selector is a tag_name to point to the HTML element to style.

Each declaration is property:value

Syntax to define style for multiple elements in head section:
<style> selector_01,selector_02,... {declaration_01;declaration_02;...;} selector_11 {declaration_11;declaration_12;...;} selector_21,selector_02,selector_11... {declaration_21;...;} </style>

Internal CSS example:
<style> p, h4, div { color:green; } p, h4 { font-size:160%; font-family:verdana; } div { font-family:courier; } </style>

Reference: CSS syntax at https://www.w3schools.com/css/css_syntax.asp

1.4 External css

Syntax: The head section of the html file contains
<link rel="stylesheet" href="filename.css">
The css file contains
selector {property_1:value_1;property_2:value_2;...;}

Syntax to define style for multiple elements in css file:
selector_01,selector_02,... {property_01:value_01;property_02:_02;...;} selector_11 {property_11:value_11;property_12:value_12;...;} selector_21,selector_02,selector_11... {property_21:value_21;...;}

External CSS example:
A file called: mystyle.css contains
p, h4, div { color:green; } p, h4 { font-size:160%; font-family:verdana; } div { font-family:courier; } The link element in the head of the html file points to the css file.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h4>Green and enlarged heading</h4> <p>Green and enlarged paragraph</p> <div>Green text</div> </body> </html>

Reference: CSS syntax at https://www.w3schools.com/css/css_syntax.asp

1.5 validation

CSS validation service is available at https://jigsaw.w3.org/css-validator/

1.6 exercise

Create a webpage with customized styles for headings, paragraphs, div, etc. using in-line css.
Create a webpage but using internal css, such that the webpage is identical to above webpage uisng in-line css
Create a webpage but using external css, such that the webpage is identical to above webpage uisng in-line css

css-2. Selector

HTML element

Use element name to select an HTML element

Example to select all the paragraph elements in the HTML file:

p { color:blue }

Multiple HTML elements

Use element names separated by , to select mulitple HTML elements

Example to select all the h1, h2 elements in the HTML file:

h1, h2 { text-align:center }

All HTML elements

Use * to select all HTML elements

Example to select all the elements in the HTML file:

* { color:blue }

HTML element with class-name

Use .class-name to select the HTML elements with class=class-name

Example to select the paragraph elements with class="right" in HTML file:

p.right { text-algin:right }

Example to select all elements with class="center" in HTML file:

.right { text-algin:center }

SELECTOR				PROPERTY
element				property
`element_name`			`{`	`property`	:	`value`	`;`	`}`
`p`			`{`	`color`	:	`blue`	`;`	`}`
multiple elements				property
`element_name_1`	,	`element_name_2`	`{`	`property`	:	`value`	`;`	`}`
`h1`	,	`h2`	`{`	`text-algin`	:	`center`	`;`	`}`
all elements				property
`*`			`{`	`color`	:	`blue`	`;`	`}`
element with class				property
`element_name`	.	`class`	`{`	`property`	:	`value`	`;`	`}`
`p`	.	`right`	`{`	`text-algin`	:	`right`	`;`	`}`
all elements with class				property
	.	`class`	`{`	`property`	:	`value`	`;`	`}`
	.	`right`	`{`	`text-algin`	:	`center`	`;`	`}`

Reference: CSS Selectors at hhttps://www.w3schools.com/css/css_selectors.asp

css-2.1 class vs id

SELECTOR				PROPERTY
all elements with class				property
	.	`class_name`	`{`	`property`	:	`value`	`;`	`}`
	.	`right`	`{`	`text-algin`	:	`center`	`;`	`}`
the element with unique id				property
	`#`	`id_name`	`{`	`property`	:	`value`	`;`	`}`
	`#`	`right-007`	`{`	`font-size`	:	`0.8em`	`;`	`}`

Class name in HTML

Syntax of class attribute in html file:
<tag_name class="class_name">

Multiple lass names in HTML

Syntax of multiple class attributes in html file:
<tag_name class="class_name1 class_name2 ...">

Example of class
<html> <head> <style> p.right { text-align:right; font-size:0.8em; } </style> </head> <body> <p class="right">This paragraph is aligned to right</p> <p>This is a regular paragraph </p> </body> </html>
displaying (without the red box):

This paragraph is aligned to right

This is a regular paragraph

Example of class
<html> <head> <style> .right { text-align:right; font-size:0.8em; } </style> </head> <body> <h3 class="right">This heading is aligned to right</h3> <p>This is a regular paragraph </p> </body> </html>
displaying (without the red box):

This heading is aligned to right

This is a regular paragraph

id must be unique within the same html file, and is therefore more often used to bookmark an element to enable linking to the element. Still CSS may be defined for the bookmarked element.

Example of defining CSS for an id-bookmarked element
<html> <head> <style> #right-007 { text-align:right; font-size:0.8em; } </style> </head> <body> <h3 id="right-007">This is the only heading in this web page with the id "right-007"</h3> <p>This is a regular paragraph </p> </body> </html>

css-2.2 Combinators

SELECTOR:				PROPERTY
descendant(s)				property
`element`		`descendant_element`	`{`	`property`	:	`value`	`;`	`}`
`div.right`		`p`	`{`	`color`	:	`blue`	`;`	`}`

child/children				property
`element`	`>`	`child_element`	`{`	`property`	:	`value`	`;`	`}`
`section`	`>`	`p`	`{`	`color`	:	`blue`	`;`	`}`

subsequent sibling elements				property
`1st element`	`~`	`sibling element after 1st`	`{`	`property`	:	`value`	`;`	`}`
`h1`	`~`	`p`	`{`	`color`	:	`blue`	`;`	`}`

Use space to select descendant HTML elements

Example to select all the paragraph elements (including child of child, etc.) in the div container in the HTML file:

div p { color:blue }

which applies to every p element in the div element.

div.class_name p { color:blue }

which applies to every p element in those div element of class class_name.

Use > to select child HTML elements

Example to select only the paragraph elements directly in the section container (paragraph in a div container which is in turn under a section container is excluded) in HTML file:

section > p { color:blue }

Reference: Many more possible CSS Combinators are at https://www.w3schools.com/css/css_combinators.asp

css-2.3 pseudo-class

pseudo-class				property
`selector`	`:`	`pseudo-class`	`{`	`property`	:	`value`	`;`	`}`
every link				property
`a`	`:`	`link`	`{`	`color`	:	`blue`	`;`	`}`
visited link				property
`a`	`:`	`visited`	`{`	`color`	:	`purple`	`;`	`}`
mouse over link				property
`a`	`:`	`hover`	`{`	`color`	:	`red`	`;`	`}`
selected link				property
`a`	`:`	`active`	`{`	`font-size`	:	`150%`	`;`	`}`

Example
In CSS:

	/* every link */
h6 > a:link    {color:blue; background-color:yellow; text-decoration:none;}
	/* visited link */
h6 > a:visited {color:green;}
	/* mouse over the link */
h6 > a:hover {font-size:larger; color:red;}
	/* selected link */
h6 > a:active {font-size:larger; color:red;}

In HTML:
<h6><a href="#css-00">Return to css menu</a></h6>

Resulting link is inside the following red box:

Return to css menu

a:hover MUST come after a:link and a:visited .
a:active MUST come after a:hover in the CSS definition.

Reference: Many more possible CSS pseudo-classes are at https://www.w3schools.com/css/css_pseudo_classes.asp

css-2.4 pseudo-element

::after /* after element
::before /* before element
::first-letter /* first letter of element
::first-line /* first line of element
::selection /* the part of element selected by user

`pseudo-element`			`{`	`property`	:	`value`	`;`	`}`
first letter				property
`p`	`::`	`first-letter`	`{`	`font-size`	:	`xx-large`	`;`	`}`
first line				property
`p`	`::`	`first-line`	`{`	`font-variant`	:	`small-caps`	`;`	`}`
insert before element				property
`p`	`::`	`before`	`{`	`content`	:	`../images/myball.gif`	`;`	`}`
insert after element				property
`h2`	`::`	`after`	`{`	`content`	:	`../images/logo-cihe.png`	`;`	`}`
selection				property
`p`	`::`	`selection`	`{`	`background-color`	:	`yellow`	`;`	`}`

css-2.4.1 ::first-letter, ::first-line

::first-letter ::first-line

/* first letter applicable only to block element */
p::first-letter {font-size:200%}
/* select first line*/
div::first-line {color:purple}

Applicable properties for first-line are:

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

Applicable properties for first-letter are:

font properties
color properties 
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear

Example
In CSS: div.css-020401::first-letter {font-size:xx-large; } div.css-020401::first-line {color:green; }
In HTML: <div class="css-020401">The first letter of these text and the first line are standing out compared with the remaining text. The text after the first line does not stand out any more.</div>
will display (without the red box):

The first letter of these text and the first line are standing out compared with the remaining text. The text after the first line does not stand out any more.

css-2.4.2 ::before, ::after

::before ::after

/* insert an icon before h1 */
h1::before {content:url(picture.jpg);}
/* append to a paragraph */
p::after {content:url(picture.jpg);}

Example
(You may click following images/myball.gif to open the image, then save the image to a folder ../images to try the following yourself)
In CSS: h3.css-020402::before {content:url(../images/myball.gif);} p.css-020402::after {content:url(../images/myball.gif);} img.css-020402 {float:left;} div.css-020402-clear::after {content:"";clear:both;display:table;}

In HTML <h3 class="css-020402">Section One</h3> <img class="css-020402" src="../images/logo-caritas.jpg" style="height:180px;"> <p class="css-020402">First paragraph</p> <p class="css-020402">Second paragraph</p> <h3 class="css-020402">Section Two</h3> <h3 class="css-020402">Section Three</h3>
will display (without the red box):

Section One

First paragraph

Second paragraph

Section Two

Section Three

In HTML: Contents of Section One nested in element to clear <h3 class="css-020402">Section One</h3> <div class="css-020402-clear"> <img class="css-020402" src="../images/logo-caritas.jpg" style="height:180px;"> <p class="css-020402">First paragraph</p> <p class="css-020402">Second paragraph</p> </div> <h3 class="css-020402">Section Two</h3> <h3 class="css-020402">Section Three</h3>
will display (without the red box):

Section One: contents nested in element to clear

First paragraph

Second paragraph

Section Two

Section Three

Reference Clear Floats at
https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix2

css-2.4.3 ::selection

::selection

/* highlight the portion of an element selected by a user */
::selection {background:yellow;}

Applicable properties for first-letter are:

color
background
cursor
outline

Example
In CSS: p.css-020403::selection {color:red; background:yellow;}
In HTML: <p class="css-020403">The appearance of text in this paragraph will change when the text is selected by user.</p>
will display (without the red box):

The appearance of text in this paragraph will change when the text is selected by user.

Reference: Many more possible CSS pseudo-elements are at https://www.w3schools.com/css/css_pseudo_elements.asp

css-2.5 attribute selector

	attribute selector			`{`	`property`	:	`value`	`;`	`}`
	`[`	`attribute`	`]`	`{`	`property`	:	`value`	`;`	`}`
`a`	`[`	`target`	`]`	`{`	`background-color`	:	`yellow`	`;`	`}`

	attribute value selector					`{`	`property`	:	`value`	`;`	`}`
	`[`	`attribute`	`=`	`"value"`	`]`	`{`	`property`	:	`value`	`;`	`}`
`a`	`[`	`target`	`=`	`"_blank"`	`]`	`{`	`background-color`	:	`yellow`	`;`	`}`
		contains
	`[`	`attribute`	`~=`	`"whole word"`	`]`	`{`	`property`	:	`value`	`;`	`}`
`a`	`[`	`title`	`~=`	`"peace"`	`]`	`{`	`border`	:	`5px solid yellow`	`;`	`}`
		contains
	`[`	`attribute`	`*=`	`"value"`	`]`	`{`	`property`	:	`value`	`;`	`}`
`a`	`[`	`title`	`*=`	`"pe"`	`]`	`{`	`background`	:	`yellow`	`;`	`}`
		starts with
	`[`	`attribute`	`\|=`	`"whole word"`	`]`	`{`	`property`	:	`value`	`;`	`}`
`a`	`[`	`class`	`\|=`	`"css"`	`]`	`{`	`background`	:	`yellow`	`;`	`}`
		begins with
	`[`	`attribute`	`^=`	`"value"`	`]`	`{`	`property`	:	`value`	`;`	`}`
`a`	`[`	`class`	`^=`	`"css"`	`]`	`{`	`background`	:	`yellow`	`;`	`}`
		ends with
	`[`	`attribute`	`$=`	`"value"`	`]`	`{`	`property`	:	`value`	`;`	`}`
`a`	`[`	`class`	`$=`	`"test"`	`]`	`{`	`background`	:	`yellow`	`;`	`}`

Reference: Read CSS attribute selector at https://www.w3schools.com/css/css_attribute_selectors.asp

2.6 exercise

Using internal css with "class" attribute in html, create a webpage with multiple paragraph elements such that certain paragraphs are aligned to the right, but the remaining paragraphes remain aligned to the left.

Using external css with "class" attribute in html, create a webpage with multiple paragraph elements such that certain paragraphs are aligned to the right, but the remaining paragraphes remain aligned to the left.

css-3. css box model

border surrounds the element plus the padding
padding is space surrounding the element inside the border
margin is space outside the border.
element has size expressed in width and height

Example, in the css file or within style element in head section:
div { background-color:yellow; border:5px solid green; padding:10px; margin:50px; }

Modern Society will find no solution to the ecological problem unless it takes a serious look at its lifestyles. (Pope John Paul II)

Read and practice CSS box model at
https://www.w3schools.com/css/css_boxmodel.asp

css-3.1 border

The border property is a shorthand for
border-style(required)
border-width
border-color properties

Example:
The border may be <span style="border-style:dotted;border-color:#00ee90;">dotted</span>, <span style="border-style:dashed;border-color:purple;">dashed</span>, <span style="border-style:solid;border-width:10px;">solid</span>, <span style="border-style:double;border-width:10px;">double</span>, <span style="border-style:hidden;border-width:10px;">hidden</span>, <span style="border:solid yellow 5px;">solid yellow 5px</span>, <span style="border:inset green 5px;">inset green 5px</span>, <span style="border:outset 5px brown;">outset 5px brown</span>, <span style="border-style:none;">none</span>, ..., etc.

The border may be dotted, dashed, solid, double, hidden, solid yellow 5px, inset green 5px, outset 5px brown, none, ..., etc.

Read and practice CSS Borders at
https://www.w3schools.com/css/css_border.asp

css-3.1.1 border-radius

border-radius rounds the corner.

Example:
The borders are rounded by <span style="border:double green 5px;border-radius:3px">3px</span>, <span style="border:solid green 5px;border-radius:5px;">solid green 5px</span>, <span style="border:solid green 5px;border-radius:10px;">10px</span>, respectively.

The borders are rounded by 3px, solid green 5px, 10px, respectively.

Read and practice CSS Borders at
https://www.w3schools.com/css/css_border.asp

css-3.2 padding

The padding property is a shorthand for
padding-top
padding-right
padding-bottom
padding-left
properties

Syntax (4 values):
tag { padding:top right bottom left; }

Syntax (3 values):
tag { padding:top right=left bottom; }

Syntax (2 values):
tag { padding:top=bottom right=left; }

Syntax (single value):
tag { padding:top=bottom=right=left; }

Example

border:dotted green 5px;
padding:10px;

Read and practice CSS Padding at
https://www.w3schools.com/css/css_padding.asp

css-3.3 box-sizing

Syntax:
box-sizing:content-box|border-box|initial|inherit;

box-sizing:content-box (default) width/length = content

box-sizing:border-box width/length = content + padding + border-width

Example

width:300px;
border:solid yellow 20px;background-color:pink; box-sizing:content-box;

width:300px;
border:solid pink 10px; box-sizing:border-box;

width:300px;
border:inset brown 10px;padding:20px;

width:300px;
border:dashed purple 2px;
box-sizing:content-box;

width:300px;
border:dashed purple 2px;
box-sizing:border-box;

width:300px;
border:solid green 10px;
padding:20px;
box-sizing:border-box;

width:300px;
border:solid yellow 30px;
padding:10px;
box-sizing:border-box;
border-radius:60px;

Reference: box-sizing at hhttps://www.w3schools.com/cssref/css3_pr_box-sizing.asp

css-3.4 margin

The margin property is a shorthand for
margin-top
margin-right
margin-bottom
margin-left
properties

Syntax (4 values):
tag { margin:top right bottom left; }

Syntax (3 values):
tag { margin:top right=left bottom; }

Syntax (2 values):
tag { margin:top=bottom right=left; }

Syntax (single value):
tag { margin:top=bottom=right=left; }

The margin:auto property horizontally centers the element within its container.

Example

width:300px;
border:double orange 10px;
margin:20px;

width:300px;
border:inset brown 10px;
padding:20px;
margin:20px;

width:300px;
border:dashed purple 2px;
margin:20px;

width:300px;
border:groove green 10px;
padding:20px;
box-sizing:border-box;
margin:20px;

width:300px;
border:ridge green 10px;
padding:20px;
box-sizing:border-box;
margin:auto;

Refer to: display at https://www.w3schools.com/css/css_float.asp

Read and practice CSS Margins at
https://www.w3schools.com/css/css_margin.asp

css-3.5 outline

The outline property is a shorthand for
outline-width
outline-style(required)
outline-color properties

Example

width:300px;
border:solid yellow 20px;background-color:pink; box-sizing:content-box;

width:300px;
border:solid yellow 20px;outline:dashed green 5px;background-color:pink; box-sizing:content-box;

width:300px;
border:solid yellow 20px;margin:20px;background-color:pink; box-sizing:content-box;

width:300px;
border:solid yellow 20px;outline:dashed green 5px;margin:20px;background-color:pink; box-sizing:content-box;

width:300px;
border:solid pink 10px; box-sizing:border-box;

https://www.w3schools.com/css/css_outline_shorthand.asp

Reference: outline at https://www.w3schools.com/css/css_outline_shorthand.asp

css-3.6 exercise

Create a webpage using internal css with a block of text showing its border similar to that in Section 3 above.
Add more in-line text with a variety of borders: solid, dotted, dashed, double, hidden, groove, inset, outset.

Create a webpage using external css with a block of text showing its border similar to that in Section 3 above.
Add more in-line text with a variety of borders: solid, dotted, dashed, double, hidden, groove, inset, outset.

In a webpage, add a block of text with round radius border and defining box-sizing.
add another block of text, also with identical round radius border, but without defining box-sizing.
Choose your border parameters such that the difference between the border with and without box-sizing can be obviously seen. Explain the difference.

css-4. Layout

css-4.1 display and visibility

Syntax:
display:value;

Commonly used display property values:

display:inline; does not start new line

display:block; starts new line and takes full width of container

display:none; does not leave blanked gap

display:inline-block; respects padding, margin

There are many other values, such as display:table; to display like a table element, which are defined at:

Reference: display property at hhttps://www.w3schools.com/cssref/pr_class_display.asp

Syntax:
visibility: visible|hidden|collapse|initial|inherit;

visibility:hidden; blanks the contents leaving gap

visibility:visible; is default

visibility:collapse; only for table row, row groups, column, column groups

Reference: visibility property at hhttps://www.w3schools.com/cssref/pr_class_visibility.asp

Example of changing span display from the default of inline to block:

display:inline;
The fear of making permanent commitments can change the mutual love of husband and wife into two loves of self - two loves existing side by side, until they end in separation. (Pope John Paul II)

display:block;
The fear of making permanent commitments can change the mutual love of husband and wife into two loves of self - two loves existing side by side, until they end in separation. (Pope John Paul II)

display:none;
The fear of making permanent commitments can change the mutual love of husband and wife into two loves of self - two loves existing side by side, until they end in separation. (Pope John Paul II)

visibility:hidden;
The fear of making permanent commitments can change the mutual love of husband and wife into two loves of self - two loves existing side by side, until they end in separation. (Pope John Paul II)

Reference: display, visibility at https://www.w3schools.com/css/css_display_visibility.asp

Example of inline vs inline-block:

display:inline;
The fear of making permanent commitments can change the mutual love of husband and wife into two loves of self - two loves existing side by side, until they end in separation. (Pope John Paul II)

display:inline; padding:10px; margin:20px;
The fear of making permanent commitments can change the mutual love of husband and wife into two loves of self - two loves existing side by side, until they end in separation. (Pope John Paul II)

display:inline-block; padding:10px; margin:20px;
The fear of making permanent commitments can change the mutual love of husband and wife into two loves of self - two loves existing side by side, until they end in separation. (Pope John Paul II)

Reference: display:inline-block at https://www.w3schools.com/css/css_inline-block.asp

css-4.2 position

Syntax:
position:static|relative|fixed|absolute|sticky;

position:static; no change to normal position
position:relative; relative to normal position
position:fixed; relative to viewport (of the web browser); scrolling does not move it.
position:absolute; relative to the first relatively positioned parent element.
position:sticky; switches between relative and fixed depending on whether a given offset position is or is not met in the viewport.

Example


          position:absolute;

              width:200px;

              height:200px;

              right:20px;

            relative to nearest positioned ancestor
          position:static;

              width:300px;

              height:200px;

              color:blue;

              border:dotted yellow 30px;

            (no change to normal position)
          
            position:relative;

              width:300px;

              height:200px;

              color:red;

              border:solid black 30px;

              left:50px;top:100px;

            

            (relative to normal position)


          position:static;

              width:300px;

              height:200px;

              color:blue;

              border:dotted yellow 30px;

            (no change to normal position)
           position:relative;

              width:300px;

              height:200px;

              color:red;

              border:solid black 30px;

              left:50px;top:-100px;

              z-index:-1;

            (relative to normal position)

Refer to: position at https://www.w3schools.com/css/css_positioning.asp

css-4.3 width, height

Syntax:
width:value
height:value
max-width:value
max-height:value
min-width:value
min-height:value

value may be:
auto to let browser calculate
length and unit with unit in px, em, cm, etc.
length and % of the containing block
initial to set to the default value
inherit from its parent value

Reference: width, height at https://www.w3schools.com/css/css_dimension.asp

Example with max-width

testing with max-width:500px; and margin:auto;

Reference: max-width at https://www.w3schools.com/css/css_max-width.asp

css-4.4 float, clear

float

Syntax:
float:left|right|none|inherit;

float:left|right; floats content to the left/right of its container
float:none; is default to display where it occurs
float:inherit; inherits the float value from its parent

Example

Both image and text are in div element with css float:none; border:dashed yellow 10px; color:green; width:300px;

This image has css float:left; Both image and text are in div element with css float:left; border:dashed pink 10px; width:300px;

These text are in div element with css border:solid brown 5px; color:green; width:400px;

clear

Syntax:
clear:left|right|both|none|inherit;

float:left|right|both; not allow floating elements on left/right/both sides
float:none; is default to allow floating elements
float:inherit; inherits the clear value from its parent

Example

This image has css float:left; Both image and text are in div element with css float:left; border:dashed yellow 10px; color:green; width:300px; height:150px;

These text are in div element with css border:solid brown 5px; clear:left; width:400px; height:220px;

Reference: float and clear at https://www.w3schools.com/css/css_float.asp

css-4.5 overflow

Syntax:
overflow:visible|hidden|scroll|auto;

overflow:hidden; clips the remaining content
overflow:visible; show the overflowed content outside the container
float:scroll; clips but provides scroll bar to view the overflowed content
overflow:auto; provides scroll only when needed

Example

This image has css float:left; Both image and text are in div element with css overflow:visible; border:dashed yellow 10px; color:green; width:300px; height:90px;

Next heading

This image has css float:left; Both image and text are in div element with css overflow:hidden; border:dashed pink 10px; width:300px; height:90px;

Next heading

This image has css float:left; Both image and text are in div element with css overflow:scroll; border:dashed yellow 10px; color:green; width:300px; height:90px;

This image has css float:left; Both image and text are in div element with css overflow:auto; border:dashed pink 10px; width:300px; height:90px;

This image has css float:left; Both image and text are in div element with css overflow:auto; border:dashed yellow 10px; color:green; width:300px; height:200px;

This image has css float:left; Both image and text are in div element with css overflow:auto; border:dashed pink 10px; width:300px;

Reference: overflow at https://www.w3schools.com/css/css_overflow.asp

css-4.6 align

css-4.6.1 Center horizontally:

text-align:center; centers text-only element horizontally

margin:auto; centers block element if its width < width of its container (need display:block; if element is not block by default)

display:block;margin:auto; centers an img element

text-align:center; border:dashed 5px yellow; color:green;

width:50%; margin:auto; border:dashed 5px pink;

css-4.6.2 Center vertically:

padding:top=bottom right=left; to set padding-top = padding-bottom

line-height to set equal vertical spacing between text lines

height to set height of container

set height = line-height to center a single-line text inside the height of the container

padding:50px 0; text-align:center; color:green; border:dashed 5px yellow;

line-height:100px; height:100px; text-align:center; color:red; border:dashed 5px pink;

height:100px; text-align:center; color:green; border:dashed 5px yellow;

line-height:100px; text-align:center; color:red; border:dashed 5px pink;

width:50%; text-align:center; margin:auto; color:green; border:dashed 5px yellow;

position:absolute; to move one corner inward
transform:translate to move to center

text element with css: position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background-color:pink; inside container with css: position:relative; height:300px; border:dashed 5px yellow;

text element with css: margin:50px auto; width:80%; border:dashed 5px pink;

Reference: align at https://www.w3schools.com/css/css_align.asp

Reference: Centering in CSS: A Complete Guide at https://css-tricks.com/centering-css-complete-guide/