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, andred
is the property valuetext-align
is a property, andcenter
is the property value
CSS Selectors
1
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!
2
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>
3
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>
4
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
1
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>
2
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>
3
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
1
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>
2
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>
<h1 style=”border: 2px solid Violet;”>Goal</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
<!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
<!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
Digital Learning Goal
Digital Learning Goal
Digital Learning Goal
Digital Learning Goal
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
<!DOCTYPE html>
<html>
<head>
<style>
.link1{
color: hotpink;
text-decoration: underline
}
</style>
</head>
<body>
<h2>Style a link with a color</h2>
<p><b><a class=”link1″ href=”https://en.dlg-learning.com/501-2/” target=”_blank” rel=”noopener”>This is a link</a></b></p>
</body>
</html>
Link Button
<!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
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
<!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
<!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
<!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
<!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=”lname”>Last Name</label>
<input class=”intx” type=”text” id=”lname” name=”lastname” placeholder=”Your last 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>
<input class=”insu” type=”submit” value=”Submit”>
</form>
</div>
</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
The min() Function
Use min() to set the width of #div1 to whichever value is smallest, 50% or 300px:
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>
<div id=”divfun”>Some text…</div>
<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:
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>
<div id=”divmax”>Some text…</div>
<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
الهدف للتعليم الرقمي
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>
#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.
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:
<!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:
<!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
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>
<div class=”mask2″>
<img src=”https://en.dlg-learning.com/wp-content/uploads/2022/06/img_5terre.jpg” alt=”Cinque Terre” width=”600″ height=”400″>
</div>
<img src=”https://en.dlg-learning.com/wp-content/uploads/2022/06/img_5terre.jpg” alt=”Cinque Terre” width=”600″ height=”400″>
</body>
</html>
Button Colors
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
<!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>
<div class=”pagination”>
<a href=”#”>«</a>
<a href=”#”>1</a>
<a href=”#” class=”active”>2</a>
<a href=”#”>3</a>
<a href=”#”>4</a>
<a href=”#”>5</a>
<a href=”#”>6</a>
<a href=”#”>»</a>
</div>
</body>
</html>
Box-sizing
Without box-sizing
<!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
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>
<div class=”flex-container”>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<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
Chania
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>
<div class=”grid-container”>
<div class=”grid-item”>1</div>
<div class=”grid-item”>2</div>
<div class=”grid-item”>3</div>
<div class=”grid-item”>4</div>
<div class=”grid-item”>5</div>
<div class=”grid-item”>6</div>
<div class=”grid-item”>7</div>
<div class=”grid-item”>8</div>
<div class=”grid-item”>9</div>
</div>
</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>
<div class=”grid-container”>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</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>
<div class=”grid-containerIT”>
<div class=”item1″>1</div>
<div class=”item2″>2</div>
<div class=”item3″>3</div>
<div class=”item4″>4</div>
<div class=”item5″>5</div>
<div class=”item6″>6</div>
<div class=”item7″>7</div>
<div class=”item8″>8</div>
<div class=”item9″>9</div>
<div class=”item10″>10</div>
<div class=”item11″>11</div>
<div class=”item12″>12</div>
<div class=”item13″>13</div>
<div class=”item14″>14</div>
<div class=”item15″>15</div>
<div class=”item16″>16</div>
<div class=”item17″>17</div>
</div>
</body>
</html>