working with internet technologies using CSS

© Dr. Khalid Nazim S.A. B.E., M. Tech, MBA[IT], PhD, LMISTE, LMCSI, MIE
Associate Professor,
Department of Computer Science & Information,
Majmaah University, Az- Zulfi Campus, KSA.
CSI 511: Web Programming and Internet Technology

Week 7
Topics to be Discussed:
Introduction to CSS.
Why use CSS.
CSS Style sheets.
CSS Syntax, Selectors, Comments
CSS Colors
Positioning Elements: Absolute Positioning, z-index.
Positioning Elements: Absolute Positioning, span

Introduction to CSS
What is CSS?
CSS stands for Cascading Style
Sheets.
CSS removed the style
formatting from the HTML page!
CSS is the language we use to
style an HTML document.
CSS saves a lot of work. It can
control the layout of multiple web
pages all at once
External stylesheets are stored
in .css files.
Why is CSS?
HTML was NEVER intended to
contain tags for formatting a web
page!
HTML was created to describe
the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Development of large websites,
where fonts and color information
were added to every single page,
became a long and expensive
process.
To solve this problem, the World
Wide Web Consortium (W3C)
created CSS.

Why use CSS ?
CSS is used to define styles for the web pages, including the design,
layout and variations in display for different devices and screen sizes.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: green;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>Learning CSS.</p>
</body>
</html>

HTML Styles - CSS
CSS can be added to HTML documents in 3 ways:
1.Inline: by using the style attribute inside HTML elements
2.Internal: by using a <style> element in the <head> section
3.External: by using a <link> element to link to an external
CSS file
The most common way to add CSS, is to keep the styles in
external CSS files.

HTML Styles – Inline CSS
 An inline CSS is used to apply a
unique style to a single HTML
element.
 An inline CSS uses the style
attribute of an HTML element.
 The following example sets the
text color of the <h1> element to
blue, and the text color of the
<p> element to red
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue
Heading</h1>
<p style="color:red;">A red
paragraph.</p>
</body>
</html>

HTML Styles – Internal CSS
 An internal CSS is used to define a
style for a single HTML page.
 An internal CSS is defined in the
<head> section of an HTML page,
within a <style> element.
 The following example sets the text
color of ALL the <h1> elements (on
that page) to blue, and the text color of
ALL the <p> elements to red. In
addition, the page will be displayed
with a "powderblue" background color:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

HTML Styles – External CSS
 With an external style sheet, you can
change the look of an entire website by
changing just one file!
 Each HTML page must include a
reference to the external style sheet file
inside the <link> element, inside the
head section.
 An external style sheet can be written
in any text editor, and must be saved
with a .css extension.
 The external .css file should not
contain any HTML tags.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="mystyle.css">
</head>
<body>
</body>
</html>
body {
background-color: lightblue;
}
h1 { color: navy;
margin-left: 20px;
}
mystyle.css

CSS Syntax
A CSS rule consists of a selector and a declaration block.
 The selector points to the HTML element you want to style.
 The declaration block contains one or more declarations separated by
semicolons.
 Each declaration includes a CSS property name and a value,
separated by a colon.
 Multiple CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.

CSS Syntax
Example
p {
color: red;
text-align: center;
}
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
A CSS selector selects the HTML element(s) you want to style.
CSS selectors are classified into five categories:
1.Simple selectors (select elements based on name, id, class)
2.Combinator selectors (select elements based on a specific relationship
between them)
3.Pseudo-class selectors (select elements based on a certain state)
4.Pseudo-elements selectors (select and style a part of an element)
5.Attribute selectors (select elements based on an attribute or attribute
value)

CSS element Selector
The element selector selects HTML elements based on the element
name.
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Example
Here, all <p> elements on the page will
be center-aligned, with a red text color:
p {
text-align: center;
color: red;
}

CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
To select an element with a specific id, write a hash (#) character, followed by the id of
the element.
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Example
The CSS rule below will be applied to
the HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}

CSS class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned
heading</h1>
<p class="center">Red and center-aligned
paragraph.</p>
</body>
Example
In this example all HTML elements
with class="center" will be red and
center-aligned:
.center {
text-align: center;
color: red;
}

CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
</body>
</html>
Example
h1, h2, p {
text-align: center;
color: red;
}

CSS Comments
1. CSS comments are not displayed in the browser, but they can help document your source
code.
2. Comments are used to explain the code, and may help when we edit the source code at a later
date.
3. Comments are ignored by browsers.
4. A CSS comment is placed inside the <style> element, and starts with /* and ends with */:
/* This is a single-line comment */
p {
color: red;
}
p {
color: red; /* Set text color to red */
}
p {
color: /*red*/blue;
}
/* This is
a multi-line
comment */
p {
color: red;
}

CSS Colors
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
Color Color Hexadecimal Code
#000000
#FF0000
#00FF00
#0000FF
#FFFF00
#00FFFF
#FF00FF
#C0C0C0
#FFFFFF

CSS Colors
Short Hexadecimal Codes
Color Short Hexadecimal Code
#000
#F00
#0F0
#0FF
#FF0
#0FF
#F0F
#FFF

CSS Colors - RGB Values
This color value is specified using the rgb( ) property.
It takes three values, one each for red, green, and blue.
The value can be an integer between 0 and 255 or a percentage.
Color Color RGB
rgb(0,0,0)
rgb(255,0,0)
rgb(0,255,0)
rgb(0,0,255)
rgb(255,255,0)
rgb(0,255,255)
rgb(255,0,255)
rgb(192,192,192)
rgb(255,255,255)

CSS Background Color
Example
<h1 style="background-
color:DodgerBlue;">Hello
World</h1>
<p style="background-
color:Tomato;">Cascading Style
Sheets, fondly referred to as
CSS, is a simple design language
intended to simplify the process
of making web pages
presentable.</p>
<!DOCTYPE html>
<html>
<body>
<h1 style="background-
color:DodgerBlue;">Hello
World</h1>
<p style="background-
color:Tomato;">
Cascading Style Sheets, fondly
referred to as CSS, is a simple design
language intended to simplify the
process of making web pages
presentable.</p>
</body>
</html>

CSS Text Color
Example
<h1 style="color:Tomato;">Hello
World</h1>
<p style="color:DodgerBlue;">welcome
to CSS..</p>
<p
style="color:MediumSeaGreen;">Changin
g text color...</p>
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello
World</h3>
<p style="color:DodgerBlue;">Welcome
to CSS.</p>
<p
style="color:MediumSeaGreen;">Working
with TEXT colors</p>
</body>
</html>

CSS Border Color
Hello World
Hello World
Hello World
Example:
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px dotted DodgerBlue;">Hello World</h1>
<h1 style="border: 2px dashes Violet;">Hello World</h1>
</body>
</html>

CSS Border Color
<html>
<head>
<style>
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.dotted {border-style: dotted;}
p.dashes {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.mixed {border-style: none dashed solid dotted;}
</style>
</head>
<body>
<h2>border-style Property</h2>
<p class="none">No border.</p>
<p class="hidden">Hidden border.</p>
<p class="dotted">Dotted border.</p>
<p class="dashes">Dashed border.</p>
<p class="solid">Solid border.</p>
<p class="double">Double border.</p>
<p class="groove">Groove border.</p>
<p class="ridge">Ridge border.</p>
<p class="inset">Inset border.</p>
<p class="outset">Outset border.</p>
<p class="mixed">A mixed border.</p>
</body>
<html>

CSS Background Image
 The background-image property specifies an image to use as the
background of an element.
 By default, the image is repeated so it covers the entire element.
Example
Set the background image for a page:
body {
background-image: url("paper.gif");
}

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3
_logo_and_wordmark.svg/1200pxCSS3_logo_and_wordmark.svg.png");
}
</style>
</head>
<body>
<p>This page has an image as the background!</p>
</body>
</html>

CSS background-repeat: no-repeat
Showing the background image only once is also specified by the
background-repeat property:
Example
Show the background image only once:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3
_logo_and_wordmark.svg/1200pxCSS3_logo_and_wordmark.svg.png");
}
</style>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url("https://upload.wikimedia.org/wikipedia/commons/1/1a/Crystal_Project_computer.
png");
background-position: right top;
margin-right: 200px;
}
</style>
</head>
<body>
</body>
</html>
CSS background-position

CSS Box Model
 In CSS, the term "box model" is used when talking about design and
layout.
 The CSS box model is essentially a box that wraps around every
HTML element. It consists of: content, padding, borders and margins.
The image below illustrates the box model:

CSS Box Model
Explanation of the different parts:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is
transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to
define space between elements.

CSS Box Model
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists
of: borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding, 20px margin and a
15px green border. </div>
</body>
</html>

CSS Tables
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid;
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Khalid</td>
<td>Nazim</td>
</tr>
<tr>
<td>Sattar</td>
<td>Abdul</td>
</tr>
</table>
</body>
</html>

CSS Tables
<html>
<head>
<style>
table {
border: 3px solid purple;
}
th, td {
border: 1px solid black;
}
</style>
<body>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</tbody>
</table>
</body>
</html>

CSS Layout - The z-index Property
The z-index Property:
When elements are positioned,
they can overlap other elements.
The z-index property specifies
the stack order of an element
(which element should be placed in
front of, or behind, the others).
An element can have a positive
or negative stack order:
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcRTfr_NR3pTKsr8b-
crbaViv5R3Yf4h9oWHX2iSIVGJWnlfwuhS5DSQ6
mz2Ny9s-JwNBlw&usqp=CAU">
<p>Because the image has a z-index of -1, it will be
placed behind the text.</p>
</body>
</html>

CSS Dropdowns
<!DOCTYPE html>
<html>
<head>
<style>
.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);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</body>
</html>

CSS Dropdown Image
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
display: block;
}
.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<h2>Dropdown Image</h2>
<p>Move the mouse over the image below to open the dropdown
content.</p>
<img src="https://cdn.pixabay.com/photo/2016/04/04/14/12/monitor-
1307227_1280.jpg" alt="web design" width="100" height="50">
<img src="https://cdn.pixabay.com/photo/2016/04/04/14/12/monitor-
1307227_1280.jpg" alt="Cinque Terre" width="300" height="200">
<div class="desc">Web Design</div>
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
color: white;
text-align: center;
padding: 14px 16px;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
CSS Dropdown Navbar
.dropdown-content a {
color: black;
padding: 12px 16px;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>

Summary
 Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the
process of making web pages presentable.
 There are four ways to associate styles with your HTML document. Most commonly used methods are
inline CSS and External CSS.
 A CSS rule consists of a selector and a declaration block.
 CSS can be used to make forms look good. You can style forms using CSS to change the appearance of
form elements, such as text fields, checkboxes, radio buttons, select menus, and submit buttons.
 CSS z-index property is used to control the stacking order of elements in a web page when they overlap
in the same stacking context. Elements with a higher z-index value appear in front of elements with
lower values.
 Dropdown is a user interface element that includes a list of options. It allows the user to choose one
value from a list by hovering or clicking on a trigger element. It is typically used in navigation menus,
forms, and other interactive components of a website.

working with internet technologies using CSS

working with internet technologies using CSS

More Related Content

Similar to working with internet technologies using CSS

More from nazimsattar

Recently uploaded

working with internet technologies using CSS