Scribd
Upload
2 views

LECTURE 4 - 1 Introduction to CSS

This lecture introduces CSS properties, focusing on background, border, font, margin, padding, and display properties. It includes examples demonstrating how to apply these properties in web design, as well as the use of CSS for animations. The document serves as a foundational guide for students in web design and programming.

Uploaded by

Ansbert Severine Magomba
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

LECTURE 4 - 1 Introduction to CSS

This lecture introduces CSS properties, focusing on background, border, font, margin, padding, and display properties. It includes examples demonstrating how to apply these properties in web design, as well as the use of CSS for animations. The document serves as a foundational guide for students in web design and programming.

Uploaded by

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

Lecture 03: Introduction to CSS

RIT 122: Web Design & Programming I

COURSE INSTRUCTOR: Abdallah Haji Ali


Email: abdallahaji27@gmail.com
Mobile: +255772896054

Ruaha Catholic University 1


CSS Properties
• Background property is used to define the background effects
on element.
Background properties:
 Background-color
 Background-image
 Background-repeat
 Background-attachment
 Background-position

Ruaha Catholic University


CSS Properties
Background-color
• Example (try it yourself)

<!DOCTYPE html>
<html>
<head>
<style>
h2,p{
background-color: #b0d4de;
}
</style>
</head>
<body>
<h2>My first CSS page.</h2>
<p>This is an example of CSS background-color</p>
</body>
</html>
Ruaha Catholic University
CSS Properties
Background Image

• Example (try it yourself)

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url(“image.jpg");
margin-left:100px;
}
</style>
</head>
<body>
<h1> This is an example of CSS background-image </h1>
</body>
</html>

Ruaha Catholic University


CSS Properties

Background Repeat
 By default, the background-image property repeats the
background image horizontally and vertically.
 Some images are repeated only horizontally or vertically.

• Example (try it yourself)


body {
background-image: url(“image.jpg");
background-repeat: repeat-x;
}
body {
background-image: url(" image.jpg ");
background-repeat: repeat-y;
}
Ruaha Catholic University
CSS Properties
Background-attachment
• Is used to specify if the background image is fixed or scroll
with the rest of the page in browser window.
• If you set fixed value the background image will not move
during scrolling in the browser, otherwise the image will
scroll.
• Example (try it yourself)
body{
background: white url(' image.jpg ');
background-repeat: no-repeat;
background-attachment: fixed;
}
Ruaha Catholic University
CSS Properties
Background-position
• Define the initial position of the background image. By default, the
background image is placed on the top-left of the webpage.
• You can set center, top, bottom, left, right

• Example (try it yourself)


body{
background: white url(' image.jpg ');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}

Ruaha Catholic University


CSS Border
• Is a key property used to characterize and style the borders around
HTML components.
Border properties
• border-style, border-color, border-width, border-radius
Border-style: dotted, dashed, solid, double, groove, ridge, inset, outset.
Border-color: your favorite color, can be color name for instance: "red“,
RGB for instance: "rgb(255,0,0)“, Hex for instance: "#ff0000“.
Border-width: The border-width property is used to set the border's
width. It is set in pixels.
Border-radius

Ruaha Catholic University


CSS Properties
Border-radius
This flexible property permits you to make adjusted corners for
borders, adding a bit of polish to your design.

Property Description
Set the border-radius for the top-left
border-top-left-radius
corner
Set the border-radius for the top-right
border-top-right-radius corner
Set the border-radius for the bottom-
border-bottom-right-radius right corner
Set the border-radius for the bottom-
border-bottom-left-radius left corner

Ruaha Catholic University


CSS Properties
Border-radius
Can be assigned with, one, two, three or four values. It is set in pixels or percentage.

Example (try it yourself)

#roundedBox {
border-radius: 20px;
background-color: #7fd7e7;
}

#fancyBox {
border-radius: 15% 10%;
background-color: #ffa07a;
}

#customBox {
border-radius: 20px 30px 10px;
background-color: #98fb98;
}
Ruaha Catholic University
CSS Properties
CSS Float
• Example (try it yourself)

!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p>The following paragraph contains an image with style float to the right in the paragraph.</p>
<img src=“image.jpg" alt="Good Morning Friends"/>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html> Ruaha Catholic University
CSS Properties
CSS float
• Is a positioning property.
• It is used to push an element to the left or right, allowing other
element to wrap around it.
• It is generally used with images and layouts.

Ruaha Catholic University


CSS Properties
Font Property
• It is used to control the look of texts.
• By using font property, you can change the text size, color, style, family,
weight and variant.
• Font-color: There are three different formats to define a color:
 By a color name, example “white”
 By hexadecimal value, example “#9000A1”
 By RGB, example “rgb(0, 220, 98)”

Example (try it yourself)


h1 { color: red; }
h2 { color: #9000A1; }
p { color:rgb(0, 220, 98); }
}

Ruaha Catholic University


CSS Properties
Font-size
Font Size Value Description
xx-small display the extremely small text size.
x-small display the extra small text size.
small display small text size.
medium display medium text size.
large display large text size.
x-large display extra large text size.
xx-large display extremely large text size.
smaller display comparatively smaller text size.
larger display comparatively larger text size.
size in pixels or % set value in percentage or in pixels.

Ruaha Catholic University


CSS Properties
Font Family
• Font family divided in two types:
• Generic family: It includes Serif, Sans-serif, and Monospace.
• Font family: It specifies the font family name like Arial, New Times Roman
etc.
Example (try it yourself)
<style>
body {
font-size: 100%;
}
h1 { font-family: sans-serif; }
h2 { font-family: serif; }
p { font-family: monospace; }
}
</style>

Ruaha Catholic University


CSS Properties
Font Style
• Defines what type of font you want to display. It may be italic,
oblique, or normal.
• Example (try it yourself)
<style>
body {
font-size: 100%;
}
h2 { font-style: italic; }
h3 { font-style: oblique; }
h4 { font-style: normal; }
}
</style>

Ruaha Catholic University


CSS Syntax and Selectors
Font Variant
• Specifies font variant of an element. It may be normal and
small-caps.
• Example (try it yourself)
<style>
p { font-variant: small-caps; }
h3 { font-variant: normal; }
</style>

Ruaha Catholic University


CSS Properties
Font Weight
• Defines the weight of the font and specify that how bold a font
is.
• The possible values of font weight may be normal, bold, bolder,
lighter or number (100, 200..... Up to 900).
• Example (try it yourself)
<!DOCTYPE html>
<html>
<body>
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:lighter;">This font is lighter.</p>
<p style="font-weight:100;">This font is 100 weight.</p>
</body>
</html>

Ruaha Catholic University


CSS Properties
CSS Margin
• Margin property is used to define the space around elements.
• Top, bottom, left and right margin are the properties of margin.
• You can define different margin for different sides for an element

• Example (try it yourself)

<style>
p{
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 100px;
}
</style>
Ruaha Catholic University
CSS Properties
Margin: Shorthand Property
• It specifies all the margin properties in one property.
• Example (try it yourself)

<style>
p{
margin: 50px 100px 150px 200px;
}
</style>
It identifies that:
• top margin value is 50px
• right margin value is 100px
• bottom margin value is 150px
• left margin value is 200px
Ruaha Catholic University
CSS Properties
CSS Images
• Images are an important part of any web application.
• It is important to use the images wherever they required.
• CSS helps us to control the display of images in web
applications.
• CSS properties such
as border property, height property, width property, etc.
helps to style an image.

Ruaha Catholic University


CSS Properties
Thumbnail Image: The border property is used to make
thumbnail image

• Example (try it yourself)


<style>
img{
border: 2px solid red;
border-radius:5px;
padding:10px;
}
</style>
Ruaha Catholic University
CSS Properties

Transparent image
• We use the opacity property to make an image transparent. The value of
this property lies between 0.0 to 1.0, respectively.
• Example (try it yourself)
<style>
img{
border: 2px solid red;
border-radius:5px;
padding:10px;
opacity:0.3;
}
</style>

Ruaha Catholic University


CSS Properties
Rounded image
• The border-radius property sets the radius of the bordered
image.
• It create the rounded images.

• Example (try it yourself)


<style>
img{
border: 2px solid green;
border-radius:10px;
padding:5px;
}
</style>
Ruaha Catholic University
CSS Properties

Responsive Image
• It automatically adjusts to fit on the screen size.
• It is used to adjust the image to the specified box
automatically.

• Example (try it yourself)


<style>
img{
max-width:100%;
height:auto;
}
</style>
Ruaha Catholic University
CSS Properties
CSS Padding
• Define the space between the element content and the
element border.
• Padding value can be assigned by length (pt, px, em) or
percentage.

Property Description
set all the padding properties in one
padding
declaration.
padding-left set left padding of an element.
padding-right set right padding of an element.
padding-top set top padding of an element.
padding-bottom set bottom padding of an element.

Ruaha Catholic University


CSS Properties
CSS Padding

• Example (try it yourself)

<!DOCTYPE html>
<html>
<head>
<style>
p{
padding-top: 50px;
padding-right: 100px;
padding-bottom: 150px;
padding-left: 200px;
}
</style>
</head>
<body>
<p>This is a paragraph with specified paddings.</p>
</body>
</html>
Ruaha Catholic University
CSS Properties
• CSS Colors
• This property is used to set the color of HTML
elements.
• Typically, this property is used to set the
background color or the font color of an element.
• There are three different formats to define a color:
 By a color name, example “white”
 By hexadecimal value, example “#9000A1”
 By RGB, example “rgb(0, 220, 98)”

Ruaha Catholic University


CSS Properties
Color name Hexadecimal Value Decimal Value or rgb() value
Red #FF0000 rgb(255,0,0)
Blue #0000FF rgb(0,0,255)
Orange #FFA500 rgb(255,165,0)
Aqua #00FFFF rgb(0,255,255)
Yellow #FFFF00 rgb(255,255,0)
Brown #A52A2A rgb(165,42,42)
Pink #FFC0CB rgb(255,192,203)
White #FFFFFF rgb(255,255,255)
Green #008000 rgb(0,128,0)
Gray #808080 rgb(128,128,128)
Violet #EE82EE rgb(238,130,238)
Black #000000 rgb(0,0,0)

Ruaha Catholic University


CSS Properties
• Display Property
It determines an element's delivery behavior.
It impacts how an element communicates with its encompassing
elements, influencing its size, positioning, and visibility.
The display property can take several values, each directing a
particular delivery behavior.

Ruaha Catholic University


CSS Properties
Common display property values:
• Block: The element produces a block-level box, driving a line
break.
• Inline: The element produces an inline-level box, permitting
different elements to sit adjacent to it on a similar line.
• Inline-block: The element produces a block-level box that acts
like an inline element.
• Flex: The element produces a block-level flex holder.
• Grid: The element produces a block-level grid holder.
• None: The element is hidden.

Ruaha Catholic University


CSS Properties
• Display None
<style>
.hidden{
display: none;
}
</style>
<title> Display Example </title>
</head>
<body>
<p> This is a visible paragraph. </p>
<div class = "hidden" >
<p> This paragraph is hidden using display: none. </p>
</div>
<p> This is another visible paragraph. </p>
</body>
</html>
Ruaha Catholic University
CSS Properties
• Display Inline
<html>
<head>
<style>
p{
display: inline;
}
</style>
</head>
<body>
<p>Web design</p>
<p> Database administration</p>
<p>Software design</p>
<p>Programming</p>
</body>
</html>
Ruaha Catholic University
CSS Properties
• Display inline-block
<html>
<head>
<style>
p{
display: inline-block;
}
</style>
</head>
<body>
<p>Web design</p>
<p> Database administration</p>
<p>Software design</p>
<p>Programming</p>
</body>
</html>
Ruaha Catholic University
CSS Properties
• Display block
<html>
<head>
<style>
p{
display: block;
}
</style>
</head>
<body>
<p>Web design</p>
<p> Database administration</p>
<p>Software design</p>
<p>Programming</p>
</body>
</html>
Ruaha Catholic University
CSS Properties
• CSS Animation property
• Is used to create animation on the webpage. It can be used as
a replacement of animation created by Flash and JavaScript.
• An animation makes an element change gradually from one
style to another.
• The animation is created in the @keyframe rule. It is used to
control the intermediate steps in a CSS animation sequence.
• You need at least two properties to create animation:
• The name of the animation
• The duration of the animation

Ruaha Catholic University


CSS Properties
Property Description

@keyframes It is used to specify the animation.

animation This is a shorthand property, used for setting all the


properties.

animation-delay It specifies when the animation will start.

animation-direction It specifies if or not the animation should play in


reserve on alternate cycle.

animation-duration It specifies the time duration.

animation-fill-mode it specifies the static style of the element.

animation-iteration-count It specifies the number of times the animation


should be played.

animation-play-state It specifies if the animation is running or


paused.

animation-name It specifies the name of @keyframes


animation.
Ruaha Catholic University
CSS Properties
• Changing background color

<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-animation: myfirst 6s; /* Chrome, Safari, Opera */
}
@keyframes myfirst {
from {background: red;}
to {background: green;}
}
</style>
</head>
<body>
<p><b>Note:</b> The IE 9 and earlier versions don't support CSS3 animation property. </p>
<div></div>
</body>
</html> Ruaha Catholic University
CSS Properties
• Moving Rectangle

<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: black;
position: relative;
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s;
}
@keyframes myfirst {
0% {background:black; left:0px; top:0px;}
25% {background:yellow; left:100px; top:0px;}
50% {background:blue; left:300px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:black; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> The Internet Explorer 9 and its earlier versions don't support this example.</p>
<div></div>
</body>
</html>
Ruaha Catholic University
CSS Properties
• CSS Grid Layout
• CSS grid is a two-dimensional layout that helps web designers
build complex and flexible web pages.
• The grid container and grid items make up the CSS Grid
Layout model
• Grid Container: The element that houses the grid layout.
• Grid Items: The grid container's child elements.

Ruaha Catholic University


CSS Properties
• Example
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<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>
</body>
</html> Ruaha Catholic University
CSS Properties
body {
margin: 0;
padding: 0;
}

.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px); /* 3 columns with 100px width each */
grid-template-rows: repeat(3, 100px); /* 3 rows with 100px height each */
gap: 10px; /* Gap between grid items */
justify-content: center; /* Center the grid horizontally */
align-items: center; /* Center the grid vertically */
height: 100vh; /* Set grid container height to full viewport height */
}

.grid-item {
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
} Ruaha Catholic University
Implementing Responsive Web Design
• Implementing responsive web design involves a combination
of practices and modern techniques to ensure that websites
provide an optimal experience across a variety of devices.
• These includes:
– Media queries: to adapt layouts based on screen size and
device orientation.
– Mobile-first approach: to prioritize design for smaller
screens
– Fluid layouts: to scale gracefully across different devices

Ruaha Catholic University


Media queries
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Responsive Design Example</title>
</head>
<body>
<h1>Responsive Typography and Background Color</h1>
<p>This is an example of responsive web design. Resize the
browser to see the effect.</p>
</body>
</html> Ruaha Catholic University
Media queries
<style>
/* Base styles for mobile */
body {
font-size: 16px;
margin: 0;
padding: 0;
background-color: #ffffff; /* Default background color for mobile */
}

/* Adjust styles for tablets */


@media (min-width: 600px) {
body {
font-size: 18px;
background-color: #f0f0f0;
}
}

/* Adjust styles for desktop */


@media (min-width: 1024px) {
body {
font-size: 20px;
background-color: #ffffff;
}
}
</style> Ruaha Catholic University
Media queries
• Inspect screen orientation
• Chrome Browser:
Press: Ctrl + Shift + I
• Mozilla Firefox:
Press: Ctrl + Shift + I
Microsoft Edge:
Press: F12

Ruaha Catholic University


Adopting a Mobile-First Approach
Note: Write CSS with a base style for mobile and use min-width in media queries for larger
screens.
• Example

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout</title>
</head>
<body>

<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>

</body>
</html> Ruaha Catholic University
Adopting a Mobile-First Approach
<style>
/* Base styles for mobile (default) */
.container {
padding: 10px;
display: flex;
flex-direction: column;
background-color: #f0f0f0;
}

.item {
background-color: #4CAF50;
color: white;
margin: 5px;
padding: 20px;
border-radius: 5px;
text-align: center;
}

/* Large screens */
@media (min-width: 768px) {
.container {
flex-direction: row;
}
}
</style> Ruaha Catholic University
Adopting a Mobile-First Approach

• The container class has flex properties that arrange child


elements vertically by default.
• With a media query targeting screens that are at least 768
pixels wide, the flex direction changes to horizontal (row).
• Three item divs are included for demonstration; they have
some styling for visibility.

Ruaha Catholic University


Creating Fluid Layouts

• Fluid layouts use relative units (like percentages ) to adapt and


scale across different screen sizes seamlessly.

Ruaha Catholic University


Creating Fluid Layouts
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout Example</title>
</head>
<body>

<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>

</body>
</html> Ruaha Catholic University
Creating Fluid Layouts
<style>
.container {
display: flex; /* Enable flexbox */
flex-wrap: wrap; /* Allow items to wrap onto the next line */
width: 100%; /* Fluid layout */
max-width: 1200px; /* Maximum width for larger screens */
margin: 0 auto; /* Center container */
}

.item {
flex: 1 1 100%; /* Allow items to grow and shrink */
padding: 20px;
box-sizing: border-box; /* Ensure padding doesn't affect width */
background-color: #f0f0f0; /* Light background color */
border: 1px solid #ccc; /* Light border */
margin: 10px; /* Space between items */
text-align: center; /* Center text */
}

/* For larger screens */


@media (min-width: 768px) {
.item {
flex: 1; /* Each item takes equal space */
}
}
</style> Ruaha Catholic University
Creating Fluid Layouts

• The container class uses Flexbox to arrange its children in a


flexible manner.
• The item class is styled to take full width on smaller screens.
When the screen width is greater than 768 pixels, items are
set to occupy equal space.

Ruaha Catholic University


CSS pagination
• Is a technique for indexing different pages of a website on the
homepage.
• If your website has lots of pages, you have to add some sort of
pagination to each page.

Ruaha Catholic University


CSS pagination
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body>
<h2>Basic Pagination</h2>
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
</ul>
</body>
</html>

Ruaha Catholic University


CSS pagination
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
</style> Ruaha Catholic University
CSS Comments
• CSS Comments are used to add clarifications or reminders to
the code that the browser ignores when rendering the
webpage.
• CSS comments are written between /* and */.
• Here's an example: /* This is a CSS comment */

Ruaha Catholic University


Comments
Uses of Comments:
• Documentation
• Code temporary disablement
• Collaboration: Comments help developers work together.
• Future reference
• Organization and readability: You can use comments to break
up your CSS code into logical sections or to emphasize critical
passages.

Ruaha Catholic University

You might also like