CSS

CSS Home

CSS is the language we use to style an HTML

Output

Digital Learining Goal

DLG

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}

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

p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>

<h1>Digital Learining Goal</h1>
<p>DLG</p>

</body>
</html>

CSS Syntax

Output

Hello

Digital Learining Goal.

<!DOCTYPE html>
<html>
<head>
<style>
#P3 {
color: red;
text-align: center;
}
</style>
</head>
<body>

<p id=”P3″>Hello </p>
<p id=”P3″>Digital Learining Goal.</p>

</body>
</html>

Note :

Example Explained

p is a selector in CSS (it points to the HTML element you want to style: <p>).
color is a property, and red is the property value
text-align is a property, and center is the property value

CSS Selectors

The CSS id Selector

Output

Hello

Digital Learining Goal.

<!DOCTYPE html>
<html>
<head>
<style>
#p5 {
text-align: center;
color: red;
}
</style>
</head>
<body>

<p id=”p5″>Hello </p>
<p>Digital Learining Goal.</p>

</body>
</html>

Note : An id name cannot start with a number!

The CSS class Selector

To select elements with a specific class, write a period (.) character

Output

Digital Learining Goal.

الهدف لتعليم الرقمي

<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class=”center”>Digital Learining Goal.</h1>
<p class=”center”> الهدف لتعليم الرقمي </p>

</body>
</html>

2.1

You can specify that only specific HTML elements should be affected by a class.

Output

Digital Learining Goal

الهدف لتعليم الرقمي

<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class =”center”>Digital Learining Goal</h1>
<p class=”center”> الهدف لتعليم الرقمي</p>

</body>
</html>

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

Output

Hello

Digital Learining Goal

الهدف لتعليم الرقمي

DLG

<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: purple;
}
</style>
</head>
<body>

<h1>Hello </h1>

<p>Digital Learining Goal</p>
<p id=”para1″> الهدف لتعليم الرقمي</p>
<p>DLG</p>

</body>
</html>

The CSS Grouping Selector

Output

Hello

Digital Learining Goal

الهدف لتعليم الرقمي

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: pink;
}
</style>
</head>
<body>

<h1>Hello </h1>
<h2>Digital Learining Goal</h2>
<p>الهدف لتعليم الرقمي</p>

</body>
</html>

How To Add CSS

External CSS

Output

Digital Learining Goal

الهدف لتعليم الرقمي

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”mystyle.css”>
</head>
<body>

<h1>Digital Learining Goal</h1>
<p>الهدف لتعليم الرقمي</p>

</body>
</html>

Internal CSS

Output

Digital Learining Goal

الهدف لتعليم الرقمي

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

#p12 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1 id =p12>Digital Learining Goal</h1>
<p>الهدف لتعليم الرقمي</p>

</body>
</html>

Inline CSS

Output

Digital Learining Goal

الهدف لتعليم الرقمي

<!DOCTYPE html>
<html>
<body>

<h1 style=”color:blue;text-align:center;”>Digital Learining Goal</h1>
<p style=”color:red;”>الهدف لتعليم الرقمي</p>

</body>
</html>

CSS Comments

Comments one lines

Output

Hello

Digital Learining Goal

الهدف لتعليم الرقمي

<!DOCTYPE html>
<html>
<head>
<style>
/* تعليق من سطر واحد */
#p14{
color: red;
}
</style>
</head>
<body>

<p id=p14>Hello </p>
<p id=p14>Digital Learining Goal</p>
<p id=p14>الهدف لتعليم الرقمي</p>

</body>
</html>

Comments multiple lines

Output

Hello

Digital Learining Goal

الهدف لتعليم الرقمي.

<!DOCTYPE html>
<html>
<head>
<style>
/* تعليق
اكثر من
سطر*/

#p13 {
color: red;
}
</style>
</head>
<body>

<p id=p13>Hello </p>
<p id=p13>Digital Learining Goal</p>
<p id=p13>الهدف لتعليم الرقمي.</p>

</body>
</html>

CSS Background Color

Hello World

Digital Learning Goal

<!DOCTYPE html>
<html>
<body>

<h1 style=”background-color:DodgerBlue;”>Hello World</h1><br/>

<p style=”background-color:Tomato;”>
Digital Learning Goal
</p>

</body>
</html>

CSS Text Color

Hello World

Digital Learning Goal

<!DOCTYPE html>
<html>
<body>

<h1 style=”color:Tomato”>Hello World</h1><br/>

<p style=”color:DodgerBlue;”>
Digital Learning Goal
</p>

</body>
</html>

CSS Border Color

Digital

Learning

Goal

<!DOCTYPE html>
<html>
<body>

<h1 style=”border: 2px solid Tomato;”>Digital</h1>

<h1 style=”border: 2px solid DodgerBlue;”>Learning</h1>

</body>
</html>

CSS Color Values:RGB,HEX,HSL

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

<!DOCTYPE html>
<html>
<body>
<h1 style=”background-color:rgb(255, 99, 71);”>rgb(255, 99, 71)</h1><br/>
<h1 style=”background-color:#ff6347;”>#ff6347</h1><br>
<h1 style=”background-color:hsl(9, 100%, 64%);”>hsl(9, 100%, 64%)</h1>

</body>
</html>

CSS Background- Image-repeat-position-attachment

Digital Learning goal

This page has an image as the background!

<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align:center;
background-image: url(“paper.gif”);
background-repeat: repeat-x;
background-position: right top;
background-attachment: fixed;
}
</style>
</head>
<body>

<h1>Digital Learning goal</h1>

<p>This page has an image as the background!</p>

</body>
</html>

*note:shorthand property to set the background properties in one declaration:

body {
background: #ffffff url(“img_tree.png”) no-repeat right top;
}

CSS Margins

Digital Learning Goal

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>

<h2>Digital Learning Goal</h2>

</body>
</html>

CSS Padding

The padding shorthand property - 2 values

<!DOCTYPE html>
<html>
<head>
<style>
h1{
border: 1px solid black;
padding: 25px 50px;
background-color: lightblue;
}
</style>
</head>
<body>

<h1>The padding shorthand property – 2 values</h1>

</body>
</html>

CSS Height, Width and Max-width

Set the height and width of an element

This div element has a height of 200px and a width of 50%.

<!DOCTYPE html>
<html>
<head>
<style>
#hw {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the height and width of an element</h2>

<div id=”hw”>This div element has a height of 200px and a width of 50%.</div>

</body>
</html>

The CSS Box Model

Demonstrating the Box Model

This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<!DOCTYPE html>
<html>
<head>
<style>
#bm{
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<div id=”bm”>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>

CSS Outline Style

The outline Property

A dashed outline.

A dotted red outline.

A 5px solid yellow outline.

A thick ridge pink outline.

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
</style>
</head>
<body>

<h2>The outline Property</h2>

<p class=”ex1″>A dashed outline.</p><br/>
<p class=”ex2″>A dotted red outline.</p><br/>
<p class=”ex3″>A 5px solid yellow outline.</p><br>
<p class=”ex4″>A thick ridge pink outline.</p>

</body>
</html>

CSS Outline Offset

The outline-offset Property

This paragraph has an outline 15px outside the border edge.

<!DOCTYPE html>
<html>
<head>
<style>
p.off {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
</style>
</head>
<body>

<h2>The outline-offset Property</h2>

<p class=”off”>This paragraph has an outline 15px outside the border edge.</p>

</body>
</html>

CSS Text-color-Alignment-Direction-Decoration-Transformation-Spacing-Shadow

Digital Learning Goal

<!DOCTYPE html>
<html>
<head>
<style>
.text1 {
color: blue;
text-align: center;
}
.text2{
direction: rtl;
unicode-bidi: bidi-override;
}
.text3{
text-decoration: line-through;
}
.text4{
text-transform: uppercase;
}
.text5{
text-indent: 50px;
letter-spacing: 5px;
}
.text6{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>

<h1 class=”text1″>Digital Learning Goal</h1><br/>
<h2 class=”text2″>Digital Learning Goal</h2>
</h2>
<h2 class=”text3″>Digital Learning Goal</h2>
</h2>
<h2 class=”text4″>Digital Learning Goal</h2>
</h2>
<h2 class=”text5″>Digital Learning Goal</h2>
</h2>
<h2 class=”text6″>Digital Learning Goal</h2>
</h2>

</body>
</html>

The CSS font-family Property

This is a paragraph, shown in the Times New Roman font.

This is a paragraph, shown in the Arial font.

This is a paragraph, shown in the Lucida Console font.

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-family: “Times New Roman”, Times, serif;
}

.p2 {
font-family: Arial, Helvetica, sans-serif;
}

.p3 {
font-family: “Lucida Console”, “Courier New”, monospace;
}
</style>
</head>
<body>
<p class=”p1″>This is a paragraph, shown in the Times New Roman font.</p>
<p class=”p2″>This is a paragraph, shown in the Arial font.</p>
<p class=”p3″>This is a paragraph, shown in the Lucida Console font.</p>

</body>
</html>

The CSS font-Style, Weight,Variant,Size

Digital Learning Goal

<!DOCTYPE html>
<html>
<head>
<style>
.font1{
font-style: italic;
font-weight: bold;
font-variant: small-caps;
font-size: 20px;
}
</style>
</head>
<body>
<h1 class=”font1″>
Digital Learning Goal
</h1>

</body>
</html>

Styling Links

Style a link with a color

This is a link

<!DOCTYPE html>
<html>
<head>
<style>
.link1{
color: hotpink;
text-decoration: underline
}
</style>
</head>
<body>

<h2>Style a link with a color</h2>

</body>
</html>

Link Button

A link styled as a button:

This is a link

<!DOCTYPE html>
<html>
<head>
<style>
.link2:link, .link2:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

.link2:hover, .link2:active {
background-color: red;
}
</style>
</head>
<body>

<h2>Link Button</h2>

<p>A link styled as a button:</p>
<a class=”link2″ href=”default.asp” target=”_blank”>This is a link</a>

</body>
</html>

CSS Lists

Example

Output

The list style type Property

Digital Learining Goal lists:

Home
About us
Our Business

Home
About us
Our Business

Digital Learining Goal lists:

Home
About us
Our Business

Home
About us
Our Business

<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-image:sqpurple.gif
list-style-type: circle;
}

ul.b {

list-style-type: square;
}

ol.c {
list-style-type: none;
margin: 0;
padding: 0;
list-style-type: upper-roman;
}

ol.d {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
list-style-type: lower-alpha;
}
</style>
</head>
<body>

<h2>The list style type Property</h2>

<p>Digital Learining Goal lists:</p>
<ul class=”a”>
<li>Home</li>
<li>About us</li>
<li>Our Business</li>
</ul>

<ul class=”b”>
<li>Home</li>
<li>About us</li>
<li>Our Business</li>
</ul>

<p>Digital Learining Goal lists:</p>
<ol class=”c”>
<li>Home</li>
<li>About us</li>
<li>Our Business</li>
</ol>

<ol class=”d”>
<li>Home</li>
<li>About us</li>
<li>Our Business</li>
</ol>

</body>
</html>

CSS Tables

Table Borders

Output

personal information:

Firstname	Lastname
Ali	Nasser
Amal	Ahmed

<html>
<head>
<style>
table, th, td {
border: 1px solid;
}
/* Full-Width Table */
table {
width: 100%;
/* Collapse Table Borders */
border-collapse: collapse;
}
</style>
</head>
<body>

<h2>personal information:</h2>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Ali</td>
<td>Nasser</td>
</tr>
<tr>
<td>Amal </td>
<td>Ahmed</td>
</tr>
</table>

</body>
</html>

CSS Table Size

Output

personal information:

Firstname	Lastname	Savings
Ali	Nasser	$200
Amal	Ahmed	$280
Adam	Brown	$400
Maya	Ali	$350

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}

table {
border-collapse: collapse;
width: 100%;
}
/* Horizontal Alignment */
td {
text-align: center;
}

th {
height: 70px;
}
/* Table Style */
tr:nth-child(even) {background-color: #f2f2f2;}
/* Table Color */
th {
background-color: pink;
color: white;
}
</style>
</head>
<body>

<h2>Digital Learining Goal lists</h2>

<p>personal information:</p>
<div style=”overflow-x: auto;”>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Ali</td>
<td>Nasser</td>
<td>$200</td>
</tr>
<tr>
<td>Amal</td>
<td>Ahmed</td>
<td>$280</td>
</tr>
<tr>
<td>Adam </td>
<td>Brown</td>
<td>$400</td>
</tr>
<tr>
<td>Maya</td>
<td>Ali</td>
<td>$350</td>
</tr>
</table>

</body>
</html>

Display

Output

Display links as block elements

<!DOCTYPE html>
<html>
<head>
<style>
li {
display: inline;
}
</style>
</head>
<body>

<p>Display links as block elements</p>

<ul>
<li><a href=”https://en.dlg-learning.com/” target=”_blank” rel=”noopener”>Home <br> </a></li>
<li><a href=”https://en.dlg-learning.com/aboutus/” target=”_blank” rel=”noopener”>About us <br> </a></li>
<li><a href=”https://en.dlg-learning.com/our-business-prospects/” target=”_blank” rel=”noopener”>Our business</a></li>
</ul>

</body>
</html>

width and max

Output

CSS Max-width

This div element has width: 500px;

This div element has max-width: 500px;

Digital Learining Goal

<!DOCTYPE html>
<html>
<head>
<style>
div.ex12 {
width: 500px;
margin: auto;
border: 3px solid purple;
}

div.ex13 {
max-width: 500px;
margin: auto;
border: 3px solid purple;
}
</style>
</head>
<body>

<h2>CSS Max-width</h2>

<div class=”ex12″>This div element has width: 500px;</div>
<br>

<div class=”ex13″>This div element has max-width: 500px;</div>

<p><strong>Digital Learining Goal</strong></p>

</body>
</html>

The z-index

Output

Digital Learining Goal

Because the image has a z-index of -1, it will be placed behind the text.

<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>

<h1>Digital Learining Goal</h1>
<img src=”https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.pngkey.com%2Fmaxpic%2Fu2t4w7i1o0i1r5w7%2F&psig=AOvVaw1TOytCK1PxSzz4IZgDz4zq&ust=1654592148354000&source=images&cd=vfe&ved=0CAkQjRxqFwoTCLixo_-5mPgCFQAAAAAdAAAAABAS”>
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>

</body>
</html>

Overflow

Output

Overflow

Digital Learining Goal

Digital Learning Goal For Collaboration With Association Of Arab Universities

<!DOCTYPE html>
<html>
<head>
<style>
#p72{
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid black;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>

<h2 id=”p70″>Overflow</h2>

<p id=”p71″>Digital Learining Goal</p>

<div id=”p72″ >Digital Learning Goal For Collaboration With Association Of Arab Universities</div>

</body>
</html>

Align Text

Output

Align Elements

Digital Learining Goal

<!DOCTYPE html>
<html>
<head>
<style>
#p77 {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>

<h2 id=”p75″> Align Elements</h2>

<div id=”p76″>
<p id=”p77″>Digital Learining Goal</p>
</div>

</body>
</html>

Combinators

Output

Digital Learining Goal

Paragraph 1.

Paragraph 2.

Paragraph 3.

Some code.

Paragraph 4.

<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Digital Learining Goal</h2>

<p>Paragraph 1.</p>

<div>
<p>Paragraph 2.</p>
</div>

<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>

</body>
</html>

Pseudo-elements

Output

Digital Learining Goal.

الهدف لتعليم الرقمي

<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
</style>
</head>
<body>

<p class=”intro”>Digital Learining Goal.</p>
<p>الهدف لتعليم الرقمي </p>

</body>
</html>

Dropdown

Output

Digital Learining Goal

Move the mouse over the button to open the dropdown menu.

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: purple;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>Digital Learining Goal</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class=”dropdown”>
<button class=”dropbtn”>Dropdown</button>
<div class=”dropdown-content”>
<a href=”#”>Home</a>
<a href=”#”>About US</a>
<a href=”#”>Oue Bus</a>
</div>
</div>

</body>
</html>

Image

Output

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div id = “p101”>
<a target=”_blank” href=”img_5terre.jpg”>
<img src=”https://www.codewell.com.tw/grid/images/img_snow.jpg” alt=”Cinque Terre” width=”200″ height=”400″>
</a>

</div>
</body>
</html>

CSS Attribute Selectors

w3schools.com disney.com wikipedia.org disney.com

<!DOCTYPE html>
<html>
<head>
<style>
.as1[target] {
background-color: yellow;}
.as1[target=_blank] {
background-color: red;
}
</style>
</head>
<body>
<a class=”as1″ href=”https://www.w3schools.com”>w3schools.com</a>
<a class=”as1″ href=”http://www.disney.com” target=”_blank”>disney.com</a>
<a class=”as1″ href=”http://www.wikipedia.org” target=”_top”>wikipedia.org</a>
<a class=”as1″ href=”http://www.disney.com” target=”_blank”>disney.com</a>

</body>
</html>

CSS Forms

Using CSS to style an HTML Form

<!DOCTYPE html>
<html>
<style>
.intx[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

.insu[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}

.insu[type=submit]:hover {
background-color: #45a049;
}

.formdiv{
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
<body>

<h3>Using CSS to style an HTML Form</h3>

<div class=”formdiv”>
<form action=”/action_page.php”>
<label for=”fname”>First Name</label>
<input class=”intx” type=”text” id=”fname” name=”firstname” placeholder=”Your name..”>

<label for=”country”>Country</label>
<select id=”country” name=”country”>
<option value=”australia”>Australia</option>
<option value=”canada”>Canada</option>
<option value=”usa”>USA</option>
</select>

</body>
</html>

CSS Units

This is heading 1

This is heading 2

This is a paragraph.

This is another paragraph.

<!DOCTYPE html>
<html>
<head>
<style>
.uh1 {
font-size: 60px;
}

.up1 {
font-size: 25px;
line-height: 50px;
}
</style>
</head>
<body>

<h1 class=”uh1″>This is heading 1</h1>
<h2 class=”uh2″>This is heading 2</h2>
<p class=”up1″>This is a paragraph.</p>
<p class=”up1″>This is another paragraph.</p>

</body>
</html>

The min() Function

Use min() to set the width of #div1 to whichever value is smallest, 50% or 300px:

Some text...

Resize the browser window to see the effect.

<!DOCTYPE html>
<html>
<head>
<style>
#divfun {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
</style>
</head>
<body>

<h1>The min() Function</h1>

<p>Use min() to set the width of #div1 to whichever value is smallest, 50% or 300px:</p>

<p>Resize the browser window to see the effect.</p>

</body>
</html>

The Max() Function

The max() Function

Use max() to set the width of #div1 to whichever value is largest, 50% or 300px:

Some text...

Resize the browser window to see the effect.

<!DOCTYPE html>
<html>
<head>
<style>
#divmax {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
</style>
</head>
<body>

<h1>The max() Function</h1>

<p>Use max() to set the width of #div1 to whichever value is largest, 50% or 300px:</p>

<p>Resize the browser window to see the effect.</p>

</body>
</html>

CSS Advanced

CSS Rounded Corners

Rounded corners for an element with a specified background color:

Rounded corners!

Rounded corners for an element with a border:

Rounded corners!

<!DOCTYPE html>
<html>
<head>
<style>
#rc1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rc2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p>Rounded corners for an element with a specified background color:</p>
<p id=”rc1″>Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id=”rc2″>Rounded corners!</p>
</body>
</html>

CSS Border Images

border-image: url(border.png) 50 round;

border-image: url(border.png) 20% round;

border-image: url(border.png) 30% round;

Note: Internet Explorer 10, and earlier versions, do not support the border-image property.

<!DOCTYPE html>
<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(https://en.dlg-learning.com/wp-content/uploads/2022/06/border-1.png) 50 round;
}

#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(https://en.dlg-learning.com/wp-content/uploads/2022/06/border-1.png) 20% round;
}

#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(https://en.dlg-learning.com/wp-content/uploads/2022/06/border-1.png) 30% round;
}
</style>
</head>
<body>
<p id=”borderimg1″>border-image: url(border.png) 50 round;</p>
<p id=”borderimg2″>border-image: url(border.png) 20% round;</p>
<p id=”borderimg3″>border-image: url(border.png) 30% round;</p>

<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>

</body>
</html>

Multiple Backgrounds

Output

Digital Learining Goal

الهدف للتعليم الرقمي

A private company established in the Hashemite Kingdom of Jordan in cooperation with the Association Of Arab Universities, with the aim of producing digital education courses and including them in university courses in Arab universities

<!DOCTYPE html>

<html>
<head>
<style>
#exA1 {
background: url(https://en.dlg-learning.com/wp-content/uploads/2022/06/white-texture-scaled.jpg)right bottom no-repeat, url(https://en.dlg-learning.com/wp-content/uploads/2022/06/86939-scaled.jpg) left top repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id=”exA1″>
<h1>Digital Learining Goal</h1>
<h4>الهدف للتعليم الرقمي </h4>
<p>
A private company established in
the Hashemite Kingdom of Jordan in cooperation with the Association Of Arab Universities, with the aim of producing digital education courses and including them in university courses in Arab universities</p>
</div>

</body>
</html>

background-size

Output

The background-size

Digital Learining Goal

الهدف للتعليم الرقمي

<!DOCTYPE html>
<html>
<head>
<style>
#exA2 {
border: 1px solid pink;
background: url(https://en.dlg-learning.com/wp-content/uploads/2022/06/91231-scaled.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
padding: 15px;
}

</style>
</head>
<body>

<h5>The background-size </h5>

<div id=”exA2″>
<h1>Digital Learining Goal</h1>
<h4>الهدف للتعليم الرقمي </h4>
<p>A private company established in
the Hashemite Kingdom of Jordan in cooperation with the Association Of Arab Universities, with the aim of producing digital education courses and including them in university courses in Arab universities</p>

</div>

</body>
</html>

Colors

Output

Colors

red

yellow

green

pink

purple

//text in the body part

Digital Learining Goal

<!DOCTYPE html>
<html>
<head>
<style>
#A1 {background-color:hsl(0,90%,48%);}
#A2 {background-color:hsl(65,90%,51%);}
#A3 {background-color:hsl(120,73%,49%);}
#A4 {background-color:rgb(255,202,211);}
#A5 {background-color:hsl(290,100%,50%);}

#A6 {
color: blue;
border: 7px solid currentcolor;
padding: 20px;
}
</style>
</head>
<body>

<h1> Colors </h1>

<p id=”A1″>red</p><br>
<p id=”A2″>yellow</p><br>
<p id=”A3″>green</p><br>
<p id=”A4″>pink</p><br>
<p id=”A5″>purple</p><br>
//text in the body part
<p id=”A6″>Digital Learining Goal</p><br>

</body>
</html>

Gradients

Output

Linear Gradient

Radial Gradient

Conic Gradient

<!DOCTYPE html>
<html>
<head>
<style>
/*Linear Gradient */
#A7 {
height: 150px;
width: 150px;
background-color: pink;
background-image: linear-gradient(pink, purple);
}
/* Radial Gradient */
#A8 {
height: 150px;
width: 150px;
background-color: red;
background-image: radial-gradient(pink, purple, blue
);
}
/* Conic Gradient */
#A9 {
height: 150px;
width: 150px;
background-color: black;
background-image: conic-gradient(pink 0deg, pink 90deg, purple 90deg, purple 180deg, red 180deg, red 270deg, blue 270deg);
border-radius: 50%;
}
</style>
</head>
<body>
<h4>Linear Gradient </h4>
<div id=”A7″></div><br>
<h4>Radial Gradient </h4>
<div id=”A8″></div><br>
<h4>Conic Gradient</h4>
<div id=”A9″></div>

</body>
</html>

Shadow

Output

Digital Learining Goal

<!DOCTYPE html>
<html>
<head>
<style>
/*Text Shadow*/
#A10 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px pink;
margin: 20px;
}
/*Text Shadow*/
#A10 {
text-shadow: 0 0 4px purple;
}
</style>
</head>
<body>
<h1 id = “A10”>Digital Learining Goal</h1>
</body>
</html>

Text Effects

Output

Text overflow

Digital Learining Goal

word wrap

This paragraph contains a very long word: A private company established in the Hashemite Kingdom of Jordan in cooperation with the Association Of Arab Universities

Writing Mode

Digital Learining Goal الهدف للتعليم الرقمي DLG

<!DOCTYPE html>
<html>
<head>
<style>
/*text-overflow: clip; and text-overflow: ellipsis;*/
#A11 {
white-space: nowrap;
width: 250px;
border: 4px solid pink;
overflow: hidden;
text-overflow: clip;
}
/*word-wrap*/
#A12 {
width: 11em;
border: 4px solid pink;
word-wrap: break-word;
}
/*writing-mode*/
span#A13 {
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<h4>Text overflow </h4>
<p id = “A11”>Digital Learining Goal</p><br>

<h4>word wrap </h4>
<p id = “A12”>This paragraph contains a very long word:
A private company established in
the Hashemite Kingdom of Jordan in cooperation with the Association Of Arab Universities</p><br>
<h4>Writing Mode</h4><br>
<p>Digital Learining Goal <span id=”A13″>الهدف للتعليم الرقمي </span> DLG</p>
</body>
</html>

2D Transforms

Output

T translate() Method

Digital Learining Goal.

T translate() Method

Digital Learining Goal.

<!DOCTYPE html>
<html>
<head>
<style>
/* translate()*/
#A14{
width: 150px;
height: 50px;
background-color: pink;
transform: translate(20px,20px);
}
/*rotate()*/
#A15 {
width: 150px;
height: 50px;
background-color: pink;
transform: rotate(20deg);
}
/*transform property
translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()
*/

</style>
</head>
<body>
<h4>T translate() Method</h4>
<p id=”A14″>
Digital Learining Goal.
</p><br>

<h4>T translate() Method</h4>
<p id=”A15″>
Digital Learining Goal.
</p>
</body>
</html>

3D Transforms

Output

The rotateX() Method

Digital Learining Goal.

<!DOCTYPE html>
<html>
<head>
<style>
#A16{
width: 150px;
height: 50px;
background-color: pink;
}
#A17 {
width: 150px;
height: 50px;
background-color: pink;
transform: rotateX(150deg);
}
/*The same way we use :
rotateY()
rotateZ()
*/
</style>
</head>
<body>
<h1>The rotateX() Method</h1>
<h4 id =”A16″>Digital Learining Goal.
</h4>
<h4 id =”A17″>
Digital Learining Goal.
</h4>

</body>
</html>

CSS Transitions

Hover over the div elements below, to see the different speed curves:

linear

ease

ease-in

ease-out

ease-in-out

<!DOCTYPE html>
<html>
<head>
<style>

#divtrs1 {transition-timing-function: linear;
width: 100px;
height: 100px;
background: red;
transition: width 2s;}
#divtrs2 {transition-timing-function: ease;
width: 100px;
height: 100px;
background: red;
transition: width 2s;}
#divtrs3 {transition-timing-function: ease-in;
width: 100px;
height: 100px;
background: red;
transition: width 2s;}
#divtrs4 {transition-timing-function: ease-out;
width: 100px;
height: 100px;
background: red;
transition: width 2s;}
#divtrs5 {transition-timing-function: ease-in-out;
width: 100px;
height: 100px;
background: red;
transition: width 2s;}
</style>
</head>
<body>

<p>Hover over the div elements below, to see the different speed curves:</p><br>

<div id=”divtrs1″>linear</div><br>
<div id=”divtrs2″>ease</div><br>
<div id=”divtrs3″>ease-in</div><br>
<div id=”divtrs4″>ease-out</div><br>
<div id=”divtrs5″>ease-in-out</div><br>

</body>
</html>

CSS Animation

The animation-timing-function property specifies the speed curve of the animation. The following example shows some of the different speed curves that can be used:

linear

ease

ease-in

ease-out

ease-in-out

<!DOCTYPE html>
<html>
<head>
<style>
#divani1 {animation-timing-function: linear;
width: 100px;
height: 50px;
background-color: red;
font-weight: bold;
position: relative;
animation: mymove 5s infinite;}
#divani2 {animation-timing-function: ease;
width: 100px;
height: 50px;
background-color: red;
font-weight: bold;
position: relative;
animation: mymove 5s infinite;}
#divani3 {animation-timing-function: ease-in;
width: 100px;
height: 50px;
background-color: red;
font-weight: bold;
position: relative;
animation: mymove 5s infinite;}
#divani4 {animation-timing-function: ease-out;
width: 100px;
height: 50px;
background-color: red;
font-weight: bold;
position: relative;
animation: mymove 5s infinite;}
#divani5 {animation-timing-function: ease-in-o ut;
width: 100px;
height: 50px;
background-color: red;
font-weight: bold;
position: relative;
animation: mymove 5s infinite;}

@keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}
</style>
</head>
<body>
<p>The animation-timing-function property specifies the speed curve of the animation. The following example shows some of the different speed curves that can be used:</p><br>

<div id=”divani1″>linear</div>
<div id=”divani2″>ease</div>
<div id=”divani3″>ease-in</div>
<div id=”divani4″>ease-out</div>
<div id=”divani5″>ease-in-out</div>

</body>
</html>

Basic Tooltip

Move the mouse over the text below:

Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way.

<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;

/* Position the tooltip */
position: absolute;
z-index: 1;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style=”text-align:center;”>

<h2>Basic Tooltip</h2>

<p>Move the mouse over the text below:</p>

<div class=”tooltip”>Hover over me
<span class=”tooltiptext”>Tooltip text</span>
</div>

<p>Note that the position of the tooltip text isn’t very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way.</p>

</body>
</html>

Using object-fit: cover

<!DOCTYPE html>
<html>
<head>
<style>
.obfit {
width: 200px;
height: 300px;
object-fit: cover;
}
</style>
</head>
<body>
<img class=”obfit” src=”https://en.dlg-learning.com/wp-content/uploads/2022/06/paris.jpg” alt=”Paris” width=”400″ height=”300″>
</body>
</html>

Using object-position

<!DOCTYPE html>
<html>
<head>
<style>
.obpos {
width: 200px;
height: 300px;
object-fit: cover;
object-position: 80% 100%;
}
</style>
</head>
<body>
<img class=”obpos” src=https://en.dlg-learning.com/wp-content/uploads/2022/06/paris.jpg” alt=”Paris” width=”400″ height=”300″>
</body>
</html>

The mask-image Property

<!DOCTYPE html>
<html>
<head>
<style>
.mask2 {
-webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
</style>
</head>
<body>

</body>
</html>

Button Colors

Change the background color of a button with the background-color property:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
</style>
</head>
<body>

<h2>Button Colors</h2>

<p>Change the background color of a button with the background-color property:</p>

<button class=”button”>Green</button>
<button class=”button button2″>Blue</button>
<button class=”button button3″>Red</button>
<button class=”button button4″>Gray</button>
<button class=”button button5″>Black</button>

</body>
</html>

pagination

Rounded Active and Hover Buttons

« 1 2 3 4 5 6 »

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
display: inline-block;
}

.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}

.pagination a.active {
background-color: #4CAF50;
color: white;
border-radius: 5px;
}

.pagination a:hover:not(.active) {
background-color: #ddd;
border-radius: 5px;
}
</style>
</head>
<body>

<h2>Rounded Active and Hover Buttons</h2>

</body>
</html>

Box-sizing

Without box-sizing

This div is smaller (width is 300px and height is 100px).

This div is bigger (width is also 300px and height is 100px).

<!DOCTYPE html>
<html>
<head>
<style>
.div1box {
width: 300px;
height: 100px;
border: 1px solid blue;
}

.div2box {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>

<h1>Without box-sizing</h1>

<div class=”div1box”>This div is smaller (width is 300px and height is 100px).</div>
<br>
<div class=”div2box”>This div is bigger (width is also 300px and height is 100px).</div>

</body>
</html>

Create a Flex Container

A Flexible Layout must have a parent element with the display property set to flex.

Direct child elements(s) of the flexible container automatically becomes flexible items.

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: DodgerBlue;
}

.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>

<h1>Create a Flex Container</h1>

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>

CSS Responsive

Grid-View

The City

Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.

Resize the browser window to see how the content respond to the resizing.

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<style>
.row::after {
content: “”;
clear: both;
display: table;
}

[class*=”col-“] {
float: left;
padding: 15px;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

html {
font-family: “Lucida Sans”, sans-serif;
}

.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}

.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
background-color: #0099cc;
}
</style>
</head>
<body>

<div class=”header”>
<h1>Chania</h1>
</div>

<div class=”row”>
<div class=”col-3 menu”>
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>

<div class=”col-9″>
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</div>

</body>
</html>

Grid Elements

A Grid Layout must have a parent element with the display property set to grid or inline-grid.

Direct child element(s) of the grid container automatically becomes grid items.

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>

<p>Direct child element(s) of the grid container automatically becomes grid items.</p>

</body>
</html>

grid-container

Use the justify-content property to align the grid inside the container.

The value "end" will align the grid at the end of the container:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
justify-content: end;
grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
gap: 10px;
background-color: #2196F3;
padding: 10px;
}

.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<p>Use the <em>justify-content</em> property to align the grid inside the container.</p>

<p>The value “end” will align the grid at the end of the container:</p>

</body>
</html>

Grid Item

Use the grid-row property to specify where to place an item.

Item1 will start on row 1 and span 2 rows:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-containerIT {
display: grid;
grid-template-columns: auto auto auto auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}

.grid-containerIT > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}

.item1 {
grid-row: 1 / span 2;
}
</style>
</head>
<body>
<p>Use the <em>grid-row</em> property to specify where to place an item.</p>
<p>Item1 will start on row 1 and span 2 rows:</p>

</body>
</html>