Scribd
Upload
6 views42 pages

Scripting Languages_3

The document provides an overview of CSS fundamentals, focusing on the box model, including content area, padding, border, and margin. It explains the box-sizing property with its values: content-box, border-box, and inherit, and discusses how to add space to elements using margin, padding, and border properties. Additionally, it covers pseudo-classes for element selection and differentiates between inline, block, and inline-block elements.

Uploaded by

giorginikoladze2022
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views42 pages

Scripting Languages_3

The document provides an overview of CSS fundamentals, focusing on the box model, including content area, padding, border, and margin. It explains the box-sizing property with its values: content-box, border-box, and inherit, and discusses how to add space to elements using margin, padding, and border properties. Additionally, it covers pseudo-classes for element selection and differentiates between inline, block, and inline-block elements.

Uploaded by

giorginikoladze2022
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 42

Scripting Languages

3. CSS Fundametals (Part II)


2024, Spring Semester

Kutaisi International University


Box Model
HTML elements are rendered as rectangular boxes on a web page. Each element has its content area, padding,
border, and margin.

•The content area is the space where the actual content of the element resides. Its width depends on the element type (block-level or inline - we will consider the

difference between them and their specificity to work with further in the course). Its height depends on the content itself.
•The padding is the area between the content and the border, which can be used to add space between the content and the border.
•The border surrounds the element. By default, the border width is 0. Also, if we do not specify the border color, the border takes the color of the content.
•The margin is the space between the border and other elements on the page.
<!DOCTYPE html> .text {
<html lang="en"> border: 3px solid royalblue;
<head> padding: 20px;
<link rel="stylesheet" href="index.css" /> margin: 30px;
</head> }
<body>
<p class="text">
A wonderful serenity has taken possession of my entire
soul, like these sweet mornings of
spring which I enjoy with my whole heart. I am alone, and
feel the charm of existence in this
spot, which was created for the bliss of souls like mine. I am
so happy, my dear friend, so
absorbed in the exquisite sense of mere tranquil existence.
</p>
</body>
</html>
width and height properties

width and height properties are used to define the size of an element. The width and height of an element can vary depending on the type of bo x model.

<!DOCTYPE html> .box {


<html lang="en"> width: 360px;
<head> height: 280px;
<link rel="stylesheet" href="index.css" /> margin: 20px;
</head> border: 5px solid #ff8a00;
<body> padding: 20px;
<div class="box">I'm the content</div> background-color: #9bbaee;
</body>
</html> /* text styles */
color: #4f5e77;
font-size: 36px;
}
Box Sizing
The box-sizing property is used to control how the total size of an element is calculated, specifically concerning its width and height. There are three possible values for
the box-sizing property. Let's break down what each of these values means:

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


content-box
•This is the default value of the box-sizing.
•When an element is set to content-box, its size is calculated based on its content box.
•The content box includes only the actual content of the element, excluding any padding, border, or margin.
•If we set an element's width and height with box-sizing: content-box, the specified width and height only apply to the content area.

.box {
<!DOCTYPE html> box-sizing: content-box;
<html lang="en"> margin: 30px;
<head> border: 5px solid royalblue;
<link rel="stylesheet" href="index.css" /> padding: 20px;
</head> width: 200px;
<body> height: 40px;
<div class="box"></div> text-align: center;
</body> }
</html>

We observe that when we specify box-sizing: content-box;, the width property is 200px, and the height property is 40px, indicating that the content area will be exactly 200px
wide and 40px tall.
border-box
•When an element is set to border-box, its size calculation includes the padding and border in total size.
•This means that if we set an element's width and height properties with box-sizing: border-box, the specified width and height values include any padding and border.
•In this case, the content area will adjust to accommodate the specified width and height, including the padding and border.
•This is often used to ensure that an element's overall size remains consistent, regardless of the padding and border.

<!DOCTYPE html> .box {


<html lang="en"> box-sizing: border-box;
<head> margin: 30px;
<link rel="stylesheet" href="index.css" /> border: 5px solid royalblue;
</head> padding: 20px;
<body> width: 200px;
<div class="box"></div> height: 60px;
</body> }
</html>

in this example, the element's width and height will be 200px and 60px, respectively, and these dimensions include the padding and border. So, the content area will be
adjusted to fit the remaining space.
inherit
•The inherit value allows an element's box-sizing property to inherit its value from its parent element.
•This means that the box-sizing behavior of the current element is determined by the box-sizing property of its parent element.
•It can help ensure a consistent box-sizing behavior throughout a document by setting it on a parent container.
Add Space to Elements
The margin, padding, and border properties help us add more space to elements, improving the web resource's appearance, readability, and usability. Let's take a closer look
at each of them.
padding property

padding refers to the space between an element's content and its border.

padding: top right bottom left

We have multiple ways to give a value to padding.


Shorthand Each Padding Separately

margin property

margin refers to the space between an element and the adjacent elements. It is the area outside the element's border.

margin: top right bottom left

We can give margin in a couple of ways.


Shorthand Each Margin Separately
border property
border refers to the line that surrounds an element's padding and content. It is the area that separates the element's content from its margin.

Shorthand
border: 4px solid brown;

It means that the border of all sides will look the same. Their width is 4px, style is solid, and color is brown.
.box-one {
<!DOCTYPE html> border: 2px solid brown;
<html lang="en"> }
<head> .box-two {
<link rel="stylesheet" href="index.css" /> border: 2px dotted brown;
</head> }
<body> .box-three {
<div class="box-one">solid</div> border: 2px dashed brown;
<div class="box-two">dotted</div> }
<div class="box-three">dashed</div> .box-four {
<div class="box-four">double</div> border: 2px double brown;
</body> }
</html>
/* This part is not the focus of the current chapter. */
body {
display: flex;
justify-content: center;
}

div {
width: 120px;
height: 120px;
margin: 5px;
text-align: center;
}
Each Border Separately.

/* Instead of "top", can be used any side (right, left or bottom) */


border-top-color: aquamarine;
border-top-width: 12px;
border-top-style: groove;border-top-right-radius: 4px;
border-top-left-radius: 8px;
Structural and Functional Pseudo-Classes
These pseudo-classes pertain to the position of an element in the document's hierarchical structure.
first-child pseudo-class
/* Set the color for all <li> elements */
.item {
color: yellowgreen;
<!DOCTYPE html> }
<html lang="en">
<head> /* Set the color for the first element */
<link rel="stylesheet" href="index.css" /> .item:first-child {
</head> color: blue;
<body> }
<ul>
<li class="item">Lorem ipsum dolor sit amet.</li>
<li class="item">Lorem, ipsum.</li>
<li class="item">Lorem ipsum dolor sit.</li>
</ul>
<ul>
<li class="item">Lorem ipsum dolor sit amet.</li>
<li class="item">Lorem, ipsum.</li>
<li class="item">Lorem, ipsum dolor.</li>
</ul>
</body>
</html>
last-child pseudo-class
The :last-child pseudo-class targets the last child of its parent, allowing us to modify any of its properties. Let's consider an example to illustrate how we can use this
pseudo-class effectively.

<!DOCTYPE html> /* Set the the font size for all <li> elements */
<html lang="en"> .item {
<head> font-size: 12px;
<link rel="stylesheet" href="index.css" /> }
</head>
<body> /* Set the font size for the last element */
<ul> .item:last-child {
<li class="item">Lorem ipsum dolor sit amet.</li> font-size: 22px;
<li class="item">Lorem ipsum dolor sit.</li> }
<li class="item">Lorem, ipsum dolor.</li>
</ul>
<ul>
<li class="item">Lorem ipsum dolor sit amet.</li>
<li class="item">Lorem ipsum dolor sit.</li>
<li class="item">Lorem, ipsum dolor.</li>
</ul>
</body>
</html>
nth-child pseudo-class
The :nth-child pseudo-class targets an element based on its position in the hierarchy. It takes an argument in the form of an expression, usually in the form of an+b,
which helps determine the specific child elements to select. Let's break down the components of this expression:
•a represents the loop period.
•n is the loop counter, starting at 0 and increasing by 1 with each iteration.
•b is the offset, influencing the starting point of the selection.
/* Set the font weight for all <li> elements */
<!DOCTYPE html> .item {
<html lang="en"> font-weight: 400;
<head> }
<link rel="stylesheet" href="index.css" />
</head> /* Set the font weight for the third element */
<body> .item:nth-child(3) {
<ul> font-weight: 900;
<li class="item">Lorem ipsum dolor sit amet.</li> }
<li class="item">Lorem, ipsum.</li>
<li class="item">Lorem ipsum dolor sit.</li>
<li class="item">Lorem, ipsum dolor.</li>
</ul>
</body>
</html>
not() pseudo-class
The :not() pseudo-class targets elements that do not match a specified selector. For instance, :not(p) would select all elements except for <p> elements. Let's explore
some examples:
/* Set color for all elements except the last element */
<!DOCTYPE html>
li:not(:last-child) {
<html lang="en">
color: pink;
<head>
}
<link rel="stylesheet" href="index.css" />
</head>
/* Set background color for all elements except the first
<body>
element */
<ul>
li:not(:first-child) {
<li>Lorem, ipsum.</li>
background-color: purple;
<li>Lorem ipsum dolor sit.</li>
}
<li>Lorem, ipsum dolor.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem.</li>
</ul>
</body>
</html>
Element Types

•inline elements typically do not start on a new line and only take up as much width as necessary. They allow other
elements to sit beside them on the same line.
•Block elements, on the other hand, typically start on a new line and extend the full width of their container. They
create a new "block" or "box" for content.
Block elements
Block elements occupy the entire width of their parent container and typically begin on a new line. Examples of block elements encompass <div>, <h1> through
<h6>, <p>, <ul>, <ol>, <li>, and various others. These elements can have their width, height, margin, padding, and border properties customized using CSS.

<!DOCTYPE html> h4 {
<html lang="en">
<head>
padding: 12px;
<link rel="stylesheet" href="index.css" /> }
</head>
<body> p{
<ol>
<li><p>Lorem ipsum dolor sit amet.</p></li> border: 1px solid tan;
<li><p>Lorem ipsum</p></li> }
<li><p>Lorem ipsum dolor sit amet.</p></li>
</ol>
<ul>
<li><h4>Lorem, ipsum.</h4></li>
<li><h4>Lorem, ipsum dolor.</h4></li>
<li><h4>Lorem, ipsum dolor.</h4></li>
</ul>
</body>
</html>
Inline elements
Inline elements do not initiate a new line and only occupy the width essential for their content. Examples of inline elements encompass <a>, <span>, <img>, <input>, and
several others. Unlike block elements, inline elements cannot be assigned specific values for height, width, margin, or padding using CSS. However, it's worth noting that border
can be applied to inline elements.

<!DOCTYPE html> span {


<html lang="en"> border: 2px solid wheat;
<head> }
<link rel="stylesheet" href="index.css" />
</head>
<body>
<input type="number" />
<span>Lorem, ipsum dolor.</span>
<a href="#">Lorem, ipsum.</a>
<span>Lorem ipsum dolor sit amet consectetur.</span>
</body>
</html>
Inline-block elements
In addition to block and inline elements, there exists a third category known as inline-block elements. Similar to inline elements, inline-block elements do not initiate
a new line and occupy just enough width for their content. What sets them apart is their ability to have height, width, margin, padding, and border properties specified using
CSS. Examples of inline-block elements include <button>, <select>, and <textarea>.
/* Set common styles for all button elements */
<!DOCTYPE html> button {
<html lang="en"> cursor: pointer;
<head> }
<link rel="stylesheet" href="index.css" />
</head> .send-btn {
<body> padding: 10px 20px;
<button type="button" class="send-btn">Send background-color: yellowgreen;
request</button> color: slateblue;
<button type="submit" class="submit-btn">Submit font-size: 24px;
form</button> }
</body>
</html> .submit-btn {
padding: 5px 18px;
border: 1px solid brown;
border-radius: 8px;
background-color: lightblue;
color: darkblue;
font-weight: 600;
}
Work with Inline Elements
Inline elements are positioned on a single line until there is sufficient space. When the available space is exhausted,
the elements wrap to a new line. This behavior is achieved using the CSS property:
display: inline;
/* These properties work */
a{
border-left: 1px solid firebrick;
border-right: 3px dashed seagreen;
padding-left: 10px;
padding-right: 5px;
Main considerations when working with inline elements: margin-left: 5px;
•They are inherently set to display: inline by default. margin-right: 15px;
•The width and height are determined solely by the element's content; explicit values for these properties will not apply.
•Only horizontal (left and right) properties such as padding, margin, and border can be set. }
<!DOCTYPE html>
<html lang="en"> /* These properties don't work */
<head> a{
<link rel="stylesheet" href="index.css" /> width: 300px;
</head> height: 500px;
<body> margin-top: 50px;
<a href="https://www.google.com/" margin-bottom: 10px;
target="_blank">Google</a> }
</body>
</html>
What is the Flexbox?
Flexbox, short for Flexible Box Layout, is a powerful layout module in CSS designed to streamline the alignment,
distribution, and organization of elements within a container.

The flexbox layout model operates on a parent-child relationship. The parent, referred to as the flex container, is
responsible for dictating the layout of its child elements, known as flex items. By leveraging a range of flexbox
properties, we can precisely control the size, position, and order of flex items within the flex container.

•Working with flex differs from handling inline or block-level elements.


•Unlike block-level elements, flex elements do not obstruct other
elements, and they do not stack on top of each other.
•Margins applied at the edges of the parent element do not extend
beyond.
Flex Model
Since we're not dealing with inline or block elements, the document flow in the flex model is determined by the axes of the f lex container, along which all items align.
To initiate flexbox behavior, we apply the display: flex; property to the parent element containing all the items.
We can influence the direction in which flex items are arranged. By default, flex items are positioned in a row. However, we can alter this behavior using the flex-direction
property. Let's compare the document flow without flex and with flex:

<html lang="en"> /* Apply flex to the parent element.


<head>
<link rel="stylesheet" href="index.css" /> /* In this situation, it is the <ul> element with the "list" class
</head> name.
<body> */
<!-- Default document flow -->
<h4>Default</h4>
.list {
<ul> display: flex;
<li>Lorem ipsum dolor sit amet.</li> }
<li>Lorem ipsum dolor sit amet consectetur.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul> /* Add border to the items of the flex container */
.list li {
<!-- Applied flexbox --> border: 1px solid forestgreen;
<h4>Flex</h4>
<ul class="list">
}
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet consectetur.</li> /* Remove default decoration */
<li>Lorem ipsum dolor sit amet.</li> ul {
</ul>
</body> list-style: none;
</html> }
Flex Direction
The flex-direction property enables us to determine the direction in which flex items are arranged. By default, this property is set to row, resulting in a left-to-right layout
in browsers that use English as the default language. You can set it to:
flex-direction: row | column | row-reverse | column-reverse;
<!DOCTYPE html> .navigation-list {
row <html lang="en"> background-color: honeydew;
display: flex;
<head> padding: 10px;
<link rel="stylesheet" href="index.css" /> }
</head>
<body> .navigation-item {
<ul class="navigation-list"> padding: 10px;
<li class="navigation-item"> border-radius: 6px;
background-color: violet;
<a href="#" class="navigation-link">Home</a> }
</li>
<li class="navigation-item"> .navigation-item:not(:last-child) {
<a href="#" class="navigation-link">About</a> margin-right: 20px;
</li> }
<li class="navigation-item">
.navigation-link {
<a href="#" class="navigation-link">Price</a> color: wheat;
</li> }
<li class="navigation-item">
<a href="#" class="navigation-link">Team</a> /* Remove default decoration */
</li> ul {
list-style: none;
<li class="navigation-item">
}
<a href="#" class="navigation-link">Support</a>
</li> a{
</ul> text-decoration: none;
</body> }
</html>
row-reverse .navigation-list {
background-color: honeydew;
<!DOCTYPE html>
<html lang="en">
display: flex;
<head> flex-direction: row-reverse;
<link rel="stylesheet" href="index.css" /> padding: 10px;
</head> }
<body>
<ul class="navigation-list"> .navigation-item {
<li class="navigation-item">
<a href="#" class="navigation-link">Home</a>
padding: 10px;
</li> border-radius: 6px;
<li class="navigation-item"> background-color: violet;
<a href="#" class="navigation-link">About</a> }
</li>
<li class="navigation-item"> .navigation-item:not(:last-child) {
<a href="#" class="navigation-link">Price</a>
</li>
margin-left: 20px;
<li class="navigation-item"> }
<a href="#" class="navigation-link">Team</a>
</li> .navigation-link {
<li class="navigation-item"> color: wheat;
<a href="#" class="navigation-link">Support</a> }
</li>
</ul>
</body> /* Remove default decoration */
</html> ul {
list-style: none;
}

a{
text-decoration: none;
}
column <!DOCTYPE html> .navigation-list {
<html lang="en"> background-color: honeydew;
<head> display: flex;
<link rel="stylesheet" href="index.css" /> flex-direction: column;
</head> padding: 10px;
<body> }
<ul class="navigation-list">
<li class="navigation-item"> .navigation-item {
<a href="#" class="navigation-link">Home</a> padding: 10px;
</li> border-radius: 6px;
<li class="navigation-item"> background-color: violet;
<a href="#" class="navigation-link">About</a> }
</li>
<li class="navigation-item"> .navigation-item:not(:last-child) {
<a href="#" class="navigation-link">Price</a> margin-bottom: 20px;
</li> }
<li class="navigation-item">
<a href="#" class="navigation-link">Team</a> .navigation-link {
</li> color: wheat;
<li class="navigation-item"> }
<a href="#" class="navigation-link">Support</a>
</li> /* Remove default decoration */
</ul> ul {
</body> list-style: none;
</html> }

a{
text-decoration: none;
}
column-reverse .navigation-list {
background-color: honeydew;
<!DOCTYPE html>
display: flex;
<html lang="en">
<head> flex-direction: column-reverse;
<link rel="stylesheet" href="index.css" /> padding: 10px;
</head> }
<body>
<ul class="navigation-list"> .navigation-item {
<li class="navigation-item">
padding: 10px;
<a href="#" class="navigation-link">Home</a>
</li> border-radius: 6px;
<li class="navigation-item"> background-color: violet;
<a href="#" class="navigation-link">About</a> }
</li>
<li class="navigation-item"> .navigation-item:not(:last-child) {
<a href="#" class="navigation-link">Price</a>
margin-top: 20px;
</li>
<li class="navigation-item"> }
<a href="#" class="navigation-link">Team</a>
</li> .navigation-link {
<li class="navigation-item"> color: wheat;
<a href="#" class="navigation-link">Support</a> }
</li>
</ul>
</body> /* Remove default decoration */
</html> ul {
list-style: none;
}

a{
text-decoration: none;
}
Justify Content Horizontally
The justify-content property is instrumental in determining the position of flex items along the main axis. Its default value is flex-start.

justify-content: flex-start | flex-end | center | space-between | space-around;


.cards-list {
flex-start border: 1px solid lawngreen;
<!DOCTYPE html> display: flex;
<html lang="en"> width: 660px;
<head> }
<link rel="stylesheet" href="index.css" />
</head>
.card {
<body>
<ul class="cards-list"> border: 1px dashed cadetblue;
<li class="card"> padding: 10px;
<img width: 80px;
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/joker.png" }
alt="Joker"
width="64px" .card img {
/>
display: block;
<p>
The Joker is Batman's iconic supervillain known for his chaotic and margin: 0 auto;
sadistic behavior and disfigured clown appearance. }
</p>
</li> /* Remove default decoration */
<li class="card"> ul {
<img list-style: none;
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/alien.png"
padding-left: 0;
alt="Alien"
width="64px" }
/>
<p>
An alien is a being from a planet other than Earth, often depicted as
having extraterrestrial features and advanced technology.
</p>
</li>
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/clown.png"
alt="Clown"
.cards-list {
Align Items Vertically display: flex;
The align-items property governs the vertical arrangement of flex items. Its default value is stretch. border: 1px solid khaki;
width: 660px;
}
align-items: stretch | center | flex-start | flex-end | baseline;
<!DOCTYPE html> .card {
<html lang="en"> border: 1px dashed navy;
<head> padding: 10px;
<link rel="stylesheet" href="index.css" /> width: 120px;
</head> }
<body>
<ul class="cards-list">
<li class="card">
.card img {
<img display: block;
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/joker.png" margin: 0 auto;
alt="Joker" }
width="64px"
/> /* Remove default decorations */
<p>Lorem, ipsum dolor.</p> ul {
</li> list-style: none;
<li class="card"> padding-left: 0;
<img }
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/alien.png"
alt="Alien"
width="64px"
/>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita quos
voluptate velit asperiores dolores deleniti debitis autem aliquid quia
delectus.
</p>
</li>
<li class="card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/clown.png"
alt="Clown"
width="64px"
/>
<p>Lorem ipsum dolor sit amet.</p>
Flex Item Properties
Flex items are children for the flex container. They are not inline or block-level elements anymore. So, we can change item properties to get the correct positioning.

flex-basis
The flex-basis property defines the initial size of a flex item before any remaining space is distributed. It specifies the ideal size of a flex item, which may be

flex-basis: auto | value;


<!DOCTYPE html> .blog-list {
<html lang="en"> display: flex;
<head> justify-content: center;
<link rel="stylesheet" href="index.css" /> border: 1px solid rebeccapurple;
</head> width: 660px;
<body>
<ul class="blog-list">
}
<li class="blog-item">
<p class="article"> .blog-item {
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis ad flex-basis: calc(100% / 3);
autem cupiditate earum suscipit ab aut hic omnis, fugit qui sed border: 1px solid saddlebrown;
aspernatur deserunt dolores reprehenderit mollitia inventore labore, padding: 10px 15px;
fugiat ratione!
</p>
}
</li>
<li class="blog-item"> /* Remove default decorations */
<p class="article"> ul {
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta list-style: none;
provident voluptatum facere earum, animi debitis at, quod et expedita, padding-left: 0;
hic magni. Minus delectus praesentium vel officiis nulla ipsa ratione
impedit.
}
</p>
</li>
<li class="blog-item">
<p class="article">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut
recusandae nobis porro, dignissimos reprehenderit laboriosam et. Magni
quo laudantium pariatur necessitatibus, mollitia in voluptas
consequatur aspernatur! Cupiditate at sed sapiente?
flex-grow
.blog-list {
<!DOCTYPE html> display: flex;
<html lang="en"> justify-content: center;
<head> border: 1px solid rosybrown;
<link rel="stylesheet" href="index.css" /> }
</head>
<body> .blog-item {
<ul class="blog-list"> border: 1px solid violet;
<li class="blog-item"> flex-grow: 1;
<p class="article">Item 1</p> text-align: center;
</li> }
<li class="blog-item">
<p class="article">item 2</p> .blog-item:nth-child(2) {
</li> flex-grow: 2;
<li class="blog-item"> }
<p class="article">Item 3</p>
</li> /* Remove default decorations */
</ul> ul {
</body> list-style: none;
</html> padding-left: 0;
}
order
.blog-list {
<!DOCTYPE html> display: flex;
<html lang="en"> flex-direction: row;
<head> justify-content: center;
<link rel="stylesheet" href="index.css" /> border: 1px solid rosybrown;
</head> width: 500px;
<body> }
<ul class="blog-list">
<li class="blog-item"> .blog-item {
<h4>First item in the html document</h4> border: 1px solid violet;
</li> order: 5;
<li class="blog-item"> }
<h4>Second item in the html document</h4>
</li> .blog-item:nth-child(3) {
<li class="blog-item"> order: 1;
<h4>Third item in the html document</h4> }
</li>
</ul> /* Remove default decorations */
</body> ul {
</html> list-style: none;
padding-left: 0;
}
Decorative Effects
Background Color

div {
background-color property
background-color: limegreen;
color: #1e1e1e;
background-color: value;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div>
The sun was setting over the horizon, casting a warm glow
over the trees.
Birds chirped happily in the distance, while a gentle breeze
rustled the
leaves. It was a peaceful evening, and for a moment,
everything felt right
in the world.
</div>
</body>
</html>
static vs gradient color
Static color refers to a single color value that is applied uniformly to an element, such as red or #0000FF . On the other hand, gradient color involves blending two or
more colors together to create a smooth transition between them.
.container {
<!DOCTYPE html> display: flex;
<html lang="en"> justify-content: space-around;
<head> }
<link rel="stylesheet" href="index.css" />
</head> .static-color {
<body> width: 150px;
<div class="container"> height: 150px;
<div class="static-color"></div> background-color: red;
<div class="gradient-color"></div> }
</div>
</body> .gradient-color {
</html> width: 150px;
height: 150px;
background-image: linear-gradient(to right, #3a6186,
#89253e);
}
linear gradient :root {
--starting-color: rgb(204, 43, 94);
--ending-color: rgb(117, 58, 136);
}
background-image: linear-gradient("direction", "color1", "color2", ...);
.container {
display: flex;
<!DOCTYPE html> flex-wrap: wrap;
<html lang="en"> }
justify-content: space-around;

<head>
.box {
<link rel="stylesheet" href="index.css" /> margin: 10px;
width: 240px;
</head> height: 240px;
<body> /* put the box text in the center of the box */
display: flex;
<div class="container"> align-items: center;
justify-content: center;
<div class="box">to bottom</div>
<div class="box">to right</div> color: white;
font-size: 24px;
<div class="box">to top</div> font-weight: 500;
}
<div class="box">to left</div>
.box:nth-child(1) {
</div> background-image: linear-gradient(
</body> to bottom,
var(--starting-color),
</html> var(--ending-color)
);
}

.box:nth-child(2) {
background-image: linear-gradient(
to right,
var(--starting-color),
var(--ending-color)
);
}

.box:nth-child(3) {
Background Image .box {
background-image: url("image-url.jpg"); width: 300px;
height: 140px;
<!DOCTYPE html> background-image: url("https://codefinity-content-
<html lang="en"> media.s3.eu-west-1.amazonaws.com/code-1/background-first-
<head> example.jpg");
<link rel="stylesheet" href="index.css" /> }
</head>
<body>
<div class="box">Lorem ipsum dolor sit amet consectetur
adipisicing elit. Modi, aliquam.</div>
</body>
</html>
background-repeat
background-repeat: repeat | repeat-x | repeat-y | no-repeat; body {
display: flex;
<!DOCTYPE html> flex-wrap: wrap;
justify-content: space-around;
<html lang="en"> }

<head> .box {
margin: 10px;
<link rel="stylesheet" href="index.css" /> width: 140px;
height: 140px;
</head> border: 1px solid darkorchid;
background-image: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/background-repeeat-
<body> example.webp");

<div class="box"><span> no-repeat</span></div> display: flex;


justify-content: center;
<div class="box"><span>repeat</span></div> align-items: center;
}
<div class="box"><span>repeat-x</span></div>
span {
<div class="box"><span>repeat-y</span></div> padding: 5px;
font-size: 18px;
</body> background-color: rgb(145, 165, 182);
}
</html>
.box:nth-child(1) {
background-repeat: no-repeat;
}

.box:nth-child(2) {
background-repeat: repeat;
}

.box:nth-child(3) {
background-repeat: repeat-x;
}

.box:nth-child(4) {
background-repeat: repeat-y;
}
background-position
body {
display: flex;
background-position: x y flex-wrap: wrap;
justify-content: space-around;
}
<!DOCTYPE html>
<html lang="en"> .box {
margin: 10px;
<head> width: 140px;
<link rel="stylesheet" href="index.css" /> height: 140px;
border: 1px solid darkorchid;
</head> background-image: url("https://codefinity-content-media.s3.eu-west-
<body> 1.amazonaws.com/code-1/background-position-example.webp");
background-repeat: no-repeat;
<div class="box"><span>in the center</span></div> display: flex;
<div class="box"><span>on the right top</span></div> justify-content: center;
align-items: center;
<div class="box"><span>on the left bottom</span></div> }
<div class="box"><span>using px</span></div>
span {
</body> padding: 5px;
</html> font-size: 18px;
background-color: rgba(145, 165, 182, 0.45);
}

.box:nth-child(1) {
background-position: center;
}

.box:nth-child(2) {
background-position: right top;
}

.box:nth-child(3) {
background-position: left bottom;
background-size
background-size: auto | cover | contain | value in px/em/rem;
•auto - default value, which sets the background image to its original size.
•cover - scales the background image to completely cover the element while maintaining its aspect ratio. This may cause some parts of the image to be cropped if
the aspect ratio of the element and the image are different.
•contain - scales the background image to fit the entire element while maintaining its aspect ratio. This may cause empty spaces to be visible around the image if
the aspect ratio of the element and the image are different.
•value - sets the width and height of the background image. body {
display: flex;
flex-wrap: wrap;
<!DOCTYPE html> justify-content: space-around;
<html lang="en"> }

<head> .box {
width: 160px;
<link rel="stylesheet" href="index.css" /> height: 140px;
</head> border: 1px solid darkorchid;
background-image: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-
<body> 1/background+size+image+example.png");
background-repeat: no-repeat;
<div class="box"><span>auto</span></div> display: flex;
<div class="box"><span>cover</span></div> justify-content: center;
align-items: center;
<div class="box"><span>contain</span></div> }
<div class="box"><span>value in px</span></div> span {
</body> padding: 5px;
font-size: 28px;
</html> background-color: rgba(145, 165, 182, 0.45);
}

.box:nth-child(1) {
background-size: auto;
}

.box:nth-child(2) {
background-size: cover;
Work with Images

object-fit
object-fit: fill | contain | cover | none | scale-down;
•fill stretches the image to fill the container, regardless of its aspect ratio. This may cause the image to be cropped or distorte d.
•contain scales the image to fit the container while preserving its aspect ratio. This may result in empty space around the image if the container and the image have
different aspect ratios.
•cover scales the image to completely cover the container while preserving its aspect ratio.
•none displays the image at its original size, regardless of the size of the container. This may cause the image to overflow the co ntainer.
•scale-down scales the image down to fit the container if it is larger than the image's natural size, or displays the image at its natura l size if it fits within the container.
Decorative Pseudo-Elements
Pseudo-elements ::before and ::after are special selectors that allow us to insert content before or after an element's content. We use them to add decorative ele ments,
such as icons or borders, to an element's content without modifying the actual HTML content.
.list {
•::before add the content before the element content. margin-top: 0;
•::after adds the content after the element content. margin-bottom: 0;
padding-left: 0;
list-style: none;
<!DOCTYPE html>
display: flex;
<html lang="en"> justify-content: space-between;
<head> background-color: darkcyan;
<link rel="stylesheet" href="index.css" /> padding: 5px;
border-radius: 4px;
</head> }
<body>
.item {
<ul class="list"> padding: 5px 10px;
background-color: antiquewhite;
<li class="item"><a href="#" class="link">contacts</a></li> border-radius: 4px;
<li class="item"><a href="#" class="link">details</a></li> margin: 5px;
}
<li class="item"><a href="#" class="link">price</a></li>
.link {
<li class="item"><a href="#" class="link">faq</a></li> display: flex;
</ul> align-items: center;
text-decoration: none;
</body> color: black;
</html> }
font-size: 36px;

/* Let's play with the "before" content */


.link::before {
content: "";
width: 24px;
height: 24px;
Shadows

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color;


•offset-x refers to the horizontal positioning of the shadow, with a positive value shifting the shadow to the right of the element and a negative value shifting it to the left.
•offset-y refers to the vertical positioning of the shadow, with a positive value shifting the shadow downwards and a negative value shifting it upwards.
•blur-radius sets the degree of blurring for the shadow and is an optional value, with a higher value producing a more blurred shadow.
•spread-radius is also optional, increases or decreases the size of the shadow based on its positive or negative value.
•color specifies the color of the shadow using any valid color format, and is also an optional value.
body {
display: flex;
justify-content: space-between;
}

div {
width: calc(100% / 2 - 20px);
padding: 10px;
border-radius: 4px;
}

div:first-child {
margin-right: 20px;
}

div:nth-child(2) {
box-shadow: 14px -8px 20px 1px rgba(0, 0, 0, 0.75);
}

p{
text-align: center;
}

You might also like