Other

Other#

Оn this page I describe some things that cannot be attributed to any other topic. But I haven’t decided to make a separate page for them yet.

from IPython.display import HTML

Colours#

Here I will show some functions that allow to deal with colours in CSS.

Full list of colours can be found in this site https://147colors.com/.

Properties#

`color` - text color#

%%HTML
<text style="color:aqua">aqua</text><br>
<text style="color:black">black</text><br>
<text style="color:blue">blue</text><br>
<text style="color:fuchsia">fuchsia</text><br>
<text style="color:gray">gray</text><br>
<text style="color:green">green</text><br>
<text style="color:lime">lime</text><br>
<text style="color:maroon">maroon</text><br>
<text style="color:navy">navy</text><br>
<text style="color:olive">olive</text><br>
<text style="color:purple">purple</text><br>
<text style="color:red">red</text><br>
<text style="color:silver">silver</text><br>
<text style="color:teal">teal</text><br>
<text style="color:white">white</text><br>
<text style="color:yellow">yellow</text><br>

aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow

`background` - background color #

Note background-color make the same.

%%HTML
<text style="background:aqua">aqua</text><br>
<text style="background:black">black</text><br>
<text style="background:blue">blue</text><br>
<text style="background:fuchsia">fuchsia</text><br>
<text style="background:gray">gray</text><br>
<text style="background:green">green</text><br>
<text style="background:lime">lime</text><br>
<text style="background:maroon">maroon</text><br>
<text style="background:navy">navy</text><br>
<text style="background:olive">olive</text><br>
<text style="background:purple">purple</text><br>
<text style="background:red">red</text><br>
<text style="background:silver">silver</text><br>
<text style="background:teal">teal</text><br>
<text style="background:white">white</text><br>
<text style="background:yellow">yellow</text><br>

aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow

Ways of determining#

Color name#

%%HTML
<text style="color:red">red text</text>

red text

RGB#

Use the following syntax rgb(R, G, B). $$R,G,B \in (0,1,2,...,255)$$

%%HTML
<text style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</text>

rgb(60, 179, 113)

RGBA#

Use the following syntax rgba(R, G, B, A). $$R,G,B \in (0,1,2,...,255);$$A \in [0,1].$$

%%HTML
<text style="background-color:rgba(60, 179, 113, 0.0);">rgba(60, 179, 113, 0.0)</text><br>
<text style="background-color:rgba(60, 179, 113, 0.1);">rgba(60, 179, 113, 0.1)</text><br>
<text style="background-color:rgba(60, 179, 113, 0.2);">rgba(60, 179, 113, 0.2)</text><br>
<text style="background-color:rgba(60, 179, 113, 0.3);">rgba(60, 179, 113, 0.3)</text><br>
<text style="background-color:rgba(60, 179, 113, 0.4);">rgba(60, 179, 113, 0.4)</text><br>
<text style="background-color:rgba(60, 179, 113, 0.5);">rgba(60, 179, 113, 0.5)</text><br>
<text style="background-color:rgba(60, 179, 113, 0.6);">rgba(60, 179, 113, 0.6)</text><br>
<text style="background-color:rgba(60, 179, 113, 0.7);">rgba(60, 179, 113, 0.7)</text><br>
<text style="background-color:rgba(60, 179, 113, 0.8);">rgba(60, 179, 113, 0.8)</text><br>
<text style="background-color:rgba(60, 179, 113, 0.9);">rgba(60, 179, 113, 0.9)</text><br>
<text style="background-color:rgba(60, 179, 113, 1.0);">rgba(60, 179, 113, 1.0)</text><br>

rgba(60, 179, 113, 0.0)
rgba(60, 179, 113, 0.1)
rgba(60, 179, 113, 0.2)
rgba(60, 179, 113, 0.3)
rgba(60, 179, 113, 0.4)
rgba(60, 179, 113, 0.5)
rgba(60, 179, 113, 0.6)
rgba(60, 179, 113, 0.7)
rgba(60, 179, 113, 0.8)
rgba(60, 179, 113, 0.9)
rgba(60, 179, 113, 1.0)

HEX#

Use the following syntax #rrggbb.

%%HTML
<text style="background-color:#afc445;">#afc445</text>

#afc445

HSL#

Hue Saturation Lightness.

Use the following syntax HSL(H,S,L).

Where: $$H \in [0,360);$$S, L \in [0,100].$$

%%HTML
<text style="background-color:HSL(150, 60%, 50%);">HSL(150, 60%, 50%)</text>

HSL(150, 60%, 50%)

HSLA#

Hue Saturation Lightness Alpha.

Use the following syntax HSL(H,S,L).

Where: $$H \in [0,360);$$S, L \in [0,100];$$A \in [0,1].$$

%%HTML
<text style="background-color:HSL(150, 60%, 50%, 0.3);">HSL(150, 60%, 50%, 0.3)</text>

HSL(150, 60%, 50%, 0.3)

Background#

There are several ways to set background for html element here I’ll focus on them.

background-color#

This is the property when you can use any color as page background. I have describet it here.

background-image#

Provide way to fullfill any html element with picture. Use the following syntax:

background-image: url(<path to image>)

Note: Whether it’s a link or an image on a computer, you have to wrap it in url() in any case.

As an example look the following code:

display(HTML(
    '''
    <hr><text style=\"font-size:16px\">HTML</text>
    '''
))
with open("css_files/background_image.html") as file:
    print(file.read())
display(HTML('''<hr>'''))

HTML

<div style="background-image: url('fractal_css.gif')">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<div style="background-image: url('https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg')">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

You can check the result here.

background-repeat#

Describes the way in which the image represented by the background-image will fill the area (repeat).

Can take values:

no-repeat - without repeats;
repeat - the image repeats horizontally and vertically;
repeat-x - the image repeats only horizontally;
repeat-y - the image repeats only vertically;
space - an integer number of repeats will be used, but if it’s not possible to fullfill area with an integer number of images then spaces will be added;
round - the whole area must be filled with an integer number of images, the size of the image will be adjusted.

In the following example, I try all the diggerent options. You can see the result here.

types = [
    "no-repeat", 
    "repate", 
    "repeat-x", 
    "repeat-y", 
    "space", 
    "round"
]

pattern_line = '''
<h2>{type}</h2>
<div style="background-image: url('mkpic.webp'); background-repeat: {type};">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
'''
html_res = ""

for type in types:
    html_res += pattern_line.format(type = type)



with open("css_files/background-repeate.html", "w") as file:
    file.write(html_res)
    
display(HTML('''<hr>'''))
print(html_res)
display(HTML('''<hr>'''))

<h2>no-repeat</h2>
<div style="background-image: url('mkpic.webp'); background-repeat: no-repeat;">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<h2>repate</h2>
<div style="background-image: url('mkpic.webp'); background-repeat: repate;">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<h2>repeat-x</h2>
<div style="background-image: url('mkpic.webp'); background-repeat: repeat-x;">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<h2>repeat-y</h2>
<div style="background-image: url('mkpic.webp'); background-repeat: repeat-y;">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<h2>space</h2>
<div style="background-image: url('mkpic.webp'); background-repeat: space;">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

<h2>round</h2>
<div style="background-image: url('mkpic.webp'); background-repeat: round;">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

Borders#

Basic#

Allows you to set borders for the hmlt element. Use the following syntax:

style="border: <width> <style> <color>"

Or separetely:

border-width: <width>;
border-style: <style>;
border-color: <color>;

%%HTML
<p style="border:red solid 5px">red solid 5px</text><br>
<p style="border:red solid 10px">red solid 10px</text><br>
<p style="border:red dotted 5px">red dotted 5px</text><br>
<p style="border:red dotted 10px">red dotted 10px</text><br>
<p style="border:yellow solid 5px">yellow solid 5px</text><br>
<p style="border:yellow solid 10px">yellow solid 10px</text><br>
<p style="border:yellow dotted 5px">yellow dotted 5px</text><br>
<p style="border:yellow dotted 10px">yellow dotted 10px</text><br>
<p style="border:green solid 5px">green solid 5px</text><br>
<p style="border:green solid 10px">green solid 10px</text><br>
<p style="border:green dotted 5px">green dotted 5px</text><br>
<p style="border:green dotted 10px">green dotted 10px</text><br>

red solid 5px

red solid 10px

red dotted 5px

red dotted 10px

yellow solid 5px

yellow solid 10px

yellow dotted 5px

yellow dotted 10px

green solid 5px

green solid 10px

green dotted 5px

green dotted 10px

By using syntax border:... you can use any sequence of properties - browser should recogise them.

%%HTML
<p style="border:red 3px solid">red 3px solid</p>
<p style="border:3px solid red">3px solid red</p>

red 3px solid

3px solid red

Styles#

In following example I mentioned all possible border styles:

%%HTML
<p style="border-style:solid">solid</p>
<p style="border-style:dotted">dotted</p>
<p style="border-style:dashed">dashed</p>
<p style="border-style:double">double</p>
<p style="border-style:groove">groove</p>
<p style="border-style:ridge">ridge</p>
<p style="border-style:outset">outset</p>
<p style="border-style:inset">inset</p>

solid

dotted

dashed

double

groove

ridge

outset

inset

Width#

You can set border widht:

In some measures: px, pt, cm, em etc.;
Using keywords: thin, medium, thick.

%%HTML
<p style="border-width: top_bottom left_right;">fsdf</p>

fsdf

%%HTML
<p style="border:3px solid">3px solid</p>
<p style="border:3pt solid">3pt solid</p>
<p style="border:3cm solid">3cm solid</p>
<p style="border:3em solid">3em solid</p>
<p style="border:thin solid">thin solid</p>
<p style="border:medium solid">medium solid</p>
<p style="border:thick solid">thick solid</p>

3px solid

3pt solid

3cm solid

3em solid

thin solid

medium solid

thick solid

Different borders#

Syntax 1#

You can specify different settings for different borders using syntax:

border-<width/color/style>: <top and bottom> <left and right>;
border-<width/color/style>: <top> <left and right> <bottom>;
border-<width/color/style>: <top> <right> <bottom> <left>.

You can check it by following example:

%%HTML
<p style="border-width:3px ; border-style:solid ; border-color:red ">widthes:3px |colors:red |styles:solid </p>
<p style="border-width:3px 9px ; border-style:solid dotted ; border-color:red yellow ">widthes:3px 9px |colors:red yellow |styles:solid dotted </p>
<p style="border-width:3px 9px 15px ; border-style:solid dotted dashed ; border-color:red yellow green ">widthes:3px 9px 15px |colors:red yellow green |styles:solid dotted dashed </p>
<p style="border-width:3px 9px 15px 21px ; border-style:solid dotted dashed double ; border-color:red yellow green purple ">widthes:3px 9px 15px 21px |colors:red yellow green purple |styles:solid dotted dashed double </p>

widthes:3px |colors:red |styles:solid

widthes:3px 9px |colors:red yellow |styles:solid dotted

widthes:3px 9px 15px |colors:red yellow green |styles:solid dotted dashed

widthes:3px 9px 15px 21px |colors:red yellow green purple |styles:solid dotted dashed double

Syntax 2#

You can specify different settings for different borders using syntax border-<""/top/bottom/left/right>-<""/color/style/width>.

%%HTML
<p style="border-top-style:dotted">border-top-style:dotted</p>
<p style="border-bottom:dashed 10px blue">border-bottom:dashed 10px blue</p>

border-top-style:dotted

border-bottom:dashed 10px blue

Corner rounding#

You can set borders rounding by using the following syntax:

border-<top/bottom>-<left/right>-radius: <value>;
border-radius: <all egtes value>;
border-radius: <top-left and bottom-right> <bottom-left and top-right>;
border-radius: <top-left> <bottom-left and top-right> <bottom-right>;
border-radius: <top-left> <top-right> <bottom-right> <bottom-left>;

You can check all these options in the following example:

%%HTML
<p style="border-top-left-radius:10px; border: solid">border-top-left-radius:10px</p>
<p style="border-radius: 10px; border: solid">border-radius: 10px</p>
<p style="border-radius: 10px 30px; border: solid">border-radius: 10px 30px</p>
<p style="border-radius: 10px 0px 20px; border: solid">border-radius: 10px 0px 20px</p>
<p style="border-radius: 10px 0px 20px 30px; border: solid">border-radius: 10px 0px 20px 30px</p>

border-top-left-radius:10px

border-radius: 10px

border-radius: 10px 30px

border-radius: 10px 0px 20px

border-radius: 10px 0px 20px 30px

Content sizing#

Here I will describe properties which allow to set elements sizing.

`width`#

Not to be confused with the width attribute

You can set width using:

px, cm, em;
percentage relative to parent size;
inherit - using same values as parent;
auto.

%%HTML
<strong>No width option</strong>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Etiam semper diam at erat pulvinar, at pulvinar felis blandit. 
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit
sit amet. Pellentesque interdum, nisl nec interdum maximus, augue
diam porttitor lorem, et sollicitudin felis neque sit amet erat.
</p>

<strong>Width 200px</strong>
<p style="width:200px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Etiam semper diam at erat pulvinar, at pulvinar felis blandit. 
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit
sit amet. Pellentesque interdum, nisl nec interdum maximus, augue
diam porttitor lorem, et sollicitudin felis neque sit amet erat.
</p>

<strong>Width 50%</strong>
<p style="width:50%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Etiam semper diam at erat pulvinar, at pulvinar felis blandit. 
Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit
sit amet. Pellentesque interdum, nisl nec interdum maximus, augue
diam porttitor lorem, et sollicitudin felis neque sit amet erat.
</p>

No width option

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

Width 200px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

Width 50%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

`max-width`#

The width of the element cannot be exceeded. In the following example, I have created some paris of parent/child divs, each child has max-width:200px property, but the parent is gradually expanding. The feature here is that the child width follows the parent width only before 200px.

%%HTML
<div style="width:170px;border:solid green">
    <div style="max-width:200px; border:solid red"> parent width 170</div>
</div>

<div style="width:180px;border:solid green">
    <div style="max-width:200px; border:solid red"> parent width 180</div>
</div>

<div style="width:190px;border:solid green">
    <div style="max-width:200px; border:solid red"> parent width 190</div>
</div>

<div style="width:200px;border:solid green">
    <div style="max-width:200px; border:solid red"> parent width 200</div>
</div>

<div style="width:210px;border:solid green">
    <div style="max-width:200px; border:solid red"> parent width 210</div>
</div>

<div style="width:220px;border:solid green">
    <div style="max-width:200px; border:solid red"> parent width 220</div>
</div>

<div style="width:230px;border:solid green">
    <div style="max-width:200px; border:solid red"> parent width 230</div>
</div>

parent width 170

parent width 180

parent width 190

parent width 200

parent width 210

parent width 220

parent width 230

`min-width`#

An item cannot take a value shorter than this length. In the following example, I have created some paris of parent/child divs, each child has min-width:200px property, but the parent is gradually expanding. The feature here is that the child width follows the parent width only after 200px.

%%HTML
<div style="width:170px;border:solid green">
    <div style="min-width:200px; border:solid red"> parent width 170</div>
</div>

<div style="width:180px;border:solid green">
    <div style="min-width:200px; border:solid red"> parent width 180</div>
</div>

<div style="width:190px;border:solid green">
    <div style="min-width:200px; border:solid red"> parent width 190</div>
</div>

<div style="width:200px;border:solid green">
    <div style="min-width:200px; border:solid red"> parent width 200</div>
</div>

<div style="width:210px;border:solid green">
    <div style="min-width:200px; border:solid red"> parent width 210</div>
</div>

<div style="width:220px;border:solid green">
    <div style="min-width:200px; border:solid red"> parent width 220</div>
</div>

<div style="width:230px;border:solid green">
    <div style="min-width:200px; border:solid red"> parent width 230</div>
</div>

parent width 170

parent width 180

parent width 190

parent width 200

parent width 210

parent width 220

parent width 230

Box model#

By default, the size of the element is added from:

content size;
padding;
border;
margin.

Or with more details:

<element width>=<content width>+<left padding>+<right padding>+<left border<right border>+<left margin>+<right margin>;
<element height>=<content height>+<top padding>+<bottom padding>+<top padding>+<bottom padding>+<top margin>+<bottom margin>.

This idea is called Content-box displayed on the left side of the following picture:

Alternative way is to use Border-box model. Where properties width and height will set size of whole element including:

content size;
padding;
border.

Check the following html file:

display(HTML('<hr>'))
with open("css_files/box_model_types.html") as file:
    print(file.read())
display(HTML('<hr>'))

<style>
    div {
        border: solid 5px
    }
    .child_sizing {
        padding: 10px;
        margin: 10px;
        width: 200px;
        height: 200px;
    }
</style>

<h1>Box type "Content-Box"</h1>
<div>
    <div class=child_sizing>
        Content text
    </div>
</div>

<h1>Box type "Border-Box"</h1>
<div>
    <div class=child_sizing style="box-sizing:border-box">
        Content text
    </div>
</div>

Check the result here. Pay special attention to section box-model in browzer inspector:

Content-box:

Content size 200x200 as widht/height property;

Border-box:

Content size is adapted to meet the condition <padding>+<border>+<content width/height>=200.

Font properties#

`font-size` - font size#

measures

%%HTML
<p style="font-size:20px">20px font size</p>
<p style="font-size:10px">10px font size</p>
<p style="font-size:100%">100% font size</p>
<p style="font-size:120%">120% font size</p>

20px font size

10px font size

100% font size

120% font size

`font-weight` - bold/thin text#

Shapes the weight (saturation) of the font.

normal - Sets normal font saturation (default value).
bold - Sets the font to bold.
bolder Increases font saturation by one level relative to the parent element.
lighter - Decreases the boldness of the font by one level relative to the parent element.
Setting values between 100 and 900: These values define the specific font style, where 400 is equal to normal bold and 700 is equal to bold. Some browsers may not support all values in this range.

%%HTML
<text style="font-weight:normal">normal</text>
<text style="font-weight:bold">bold</text>
<text style="font-weight:bolder">bolder</text>
<text style="font-weight:lighter">lighter</text>
<text style="font-weight:200">200</text>
<text style="font-weight:250">250</text>
<text style="font-weight:300">300</text>
<text style="font-weight:350">350</text>
<text style="font-weight:400">400</text>
<text style="font-weight:450">450</text>
<text style="font-weight:500">500</text>
<text style="font-weight:550">550</text>
<text style="font-weight:600">600</text>
<text style="font-weight:650">650</text>
<text style="font-weight:700">700</text>
<text style="font-weight:750">750</text>
<text style="font-weight:800">800</text>

normal bold bolder lighter 200 250 300 350 400 450 500 550 600 650 700 750 800

Other properties#

`text-align` - position of the text#

%%HTML
<p style="text-align:center">Centered text</p>
<p style="text-align:right">Rigth side text</p>
<p style="text-align:left">Left side text</p>

Centered text

Rigth side text

Left side text

`float` - float position#

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.

Other

Contents

Other#

Colours#

Properties#

color - text color#

background - background color #

Ways of determining#

Color name#

RGB#

RGBA#

HEX#

HSL#

HSLA#

Background#

background-color#

background-image#

background-repeat#

Borders#

Basic#

Styles#

Width#

Different borders#

Syntax 1#

Syntax 2#

Corner rounding#

Content sizing#

width#

max-width#

min-width#

Box model#

Font properties#

font-size - font size#

font-weight - bold/thin text#

Other properties#

text-align - position of the text#

float - float position#

`color` - text color#

`background` - background color #

`width`#

`max-width`#

`min-width`#

`font-size` - font size#

`font-weight` - bold/thin text#

`text-align` - position of the text#

`float` - float position#