Programming & web
development
PRE229
Lecture3
Dr. Shahira Azab
[email protected]
Lecture 2 UFE
Classes and Ids
Id
classes
Classes&Ids
Lecture 2 UFE 2
Div and Span
3
Div&Span
Lecture 2 UFE
The Box Model
Padding
borders
Outline
Margin
4
BoxModel
Lecture 2 UFE
Background Image
5
BackgroundImage
Lecture 2 UFE
Pseudo-Classes
Pseudo-classes define a special state of an element.
/* UnVisited Link */
a:link
{
color: blue;
}
/* Visited Link */
a:visited
{
color: gray;
}
Lecture 2 UFE
Pseudo-Classes
/* On Mouse Over Link */
a:hover
{
color: red;
}
/* Active link that is clicked */
a:active
{
color: green;
}
Lecture 2 UFE 7
Pseudo-Elements
Pseudo-elements
p::first-line { font-weight: bold;}
::before - Inserts content before an element.
::after - Inserts content after an element.
Lecture 2 UFE 8
Last Rule Wins
multiple rules apply, the last one in the stylesheet takes precedence:
p { color: red;}
p { color: blue;}
Lecture 2 UFE 9
Important Rule Wins
The !important declaration overrides all other rules.
p { color: red !important;}
Lecture 2 UFE 10
Floating
11
Lecture 2 UFE
Positioning
Fixed(default)
Relative(to the original position)
Absolute(to the first appearance of
non-static elements)
Z-index
Without z index the last element
appears on top
Lecture 2 UFE
12
Display
Hidden
None
Block /Inline
13
Lecture 2 UFE
Text Decoration
14
Lecture 2 UFE
Styling List
15
Lecture 2 UFE
Styling Links
size will not work
16
Lecture 2 UFE
Lecture 2 UFE
gradient
18
Lecture 2 UFE
Colors
Lecture 2 UFE
https://htmlcolorcodes.com/
https://www.w3schools.com/colors/colors_picker.asp
https://www.colorzilla.com/chrome/welcome/new/?chrome/132.0.0.0/-/4.1
Lecture 2 UFE 20
Colors
(1)- CSS provides 140 predefined named colors that are easy to use.
color: red;
color: blue;
color: orange;
(2)-RGB Colors
Specifies the intensity of red, green, and blue using numbers between 0 and
255.
color: rgb(255, 87, 51); /* Bright orange */
color: rgb(0, 128, 128); /* Teal */
color: rgb(0, 255, 0); /* Green */
Lecture 2 UFE 21
Colors
(3)- RGBA ColorsAdds an alpha channel to RGB for transparency. The alpha value
is between 0 (fully transparent) and 1 (fully opaque).
color: rgba(255, 87, 51, 0.5); /* Semi-transparent bright orange */
color: rgba(0, 128, 128, 0.3); /* Semi-transparent teal */
color: rgba(0, 255, 0, 1); /* Fully opaque green */
(4)- Hexadecimal Colors
Uses a #RRGGBB or #RGB format, where RR, GG, and BB are two-digit
hexadecimal values (00–FF) representing the intensity of red, green, and blue.
color: #FF5733; /* Bright orange */
color: #008080; /* Teal */
color: #0F0; /* Short form for #00FF00 (green) */
Lecture 2 UFE 22
Colors
(5)-HSL ColorsUses hsl(hue, saturation, lightness) to define colors.
• Hue: The color type (0° = red, 120° = green, 240° = blue, etc.).
• Saturation: The intensity of the color (0% is gray, 100% is pure color).
• Lightness: The brightness of the color (0% is black, 100% is white).
• Color: hsl(0, 100%, 50%); /* Pure red */
• color: hsl(120, 100%, 25%); /* Dark green */
• color: hsl(240, 100%, 75%); /* Light blue */6.
(6)-HSLA Colors Extends HSL by adding an alpha channel for transparency
• color: hsla(0, 100%, 50%, 0.5); /* Semi-transparent red */
• color: hsla(120, 100%, 25%, 0.8); /* Slightly transparent dark green */
• color: hsla(240, 100%, 75%, 0.3); /* Very transparent light blue */
Lecture 2 UFE 23
https://f28wp.github.io/
https://geotraceroute.com/new.php?
host=umt.edu&node=0
Lecture 2 UFE
Fonts
Lecture 2 UFE
Font and Text Properties
• font-family: Specifies the name of the font to be used for the text.
• font-family: Arial, sans-serif; (e.g., Calibri, Times New Roman).
• font-size: Sets the size of the font, typically measured in pixels (px),
ems (em), or percentage (%).
• font-size: 16px; (e.g., 12pt, 14pt).
• font-style: Defines whether the font is displayed as normal, italic, or
oblique.Values: normal, italic, oblique
▪ font-style: italic;
• font-weight: the thickness of the font. Can be set as normal, bold,
lighter, or numerical values (e.g., 100 to 900).
• font-weight: bold;
Lecture 2 UFE 26
text-transform : Controls the case of the text.
• text-transform: uppercase;
• text-decoration underlines, overlines, line-throughs, or removes text-
decoration: underline;
• text-shadow: Adds a shadow effect behind the text. Takes values for
horizontal and vertical offsets, blur radius, and color
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5)
Lecture 2 UFE 27
Responsive Web Design
RWD
Lecture 2 UFE
Responsive Web Design RWD
• What RWD is
• Fluid layouts
• Media queries
• Design strategies and patterns
• Testing options
Lecture 2 UFE
Introduction to RWD
Responsive Web Design (RWD) is an approach to web design aimed at
ensuring that web pages render well on a variety of devices and window or
screen sizes. It allows web content to adjust dynamically and efficiently,
providing users with a consistent experience regardless of the device
they're using—whether it's a desktop computer, tablet, or smartphone.
Lecture 2 UFE
Introduction to RWD
Lecture 2 UFE
Key Components
1.Flexible Layouts (Fluid Grids)
2.Flexible Images & Media
3.Media Queries
4.Mobile-First Design
5.Viewport Meta Tag
6.Touch-Friendly Navigation
7.Responsive Typography
Lecture 2 UFE 32
Flexible Layouts (Fluid Grids)
Flexible Layouts (Fluid Grids)A fluid grid layout is a fundamental concept in
Responsive Web Design (RWD) that allows web page elements to resize
dynamically based on the screen size and resolution.
• Key Features: Relative UnitsUses percentages (%), em, instead of fixed
pixels (px).
• Ensures elements scale proportionally across different screen sizes.
Proportional Column System Elements are divided into a flexible grid
system (e.g., 12-column layout).
• Allows content to rearrange fluidly based on device width. Automatic
Adjustments Elements adapt based on parent container size, ensuring
consistency across screens.
Lecture 2 UFE 33
Flexible Layouts (Fluid Grids)
.container {
width: 90%; /* Adapts to the screen width */
margin: auto;
}
.column {
width: 33.33%; /* Three equal columns */
float: left;
}
Lecture 2 UFE 34
Flexible Grids (Fluid Layout)
Lecture 2 UFE
Fluid Layout
Fluid layouts are the best approach for designing for a wide range of screen
widths
For flexibility, use:
percentage measurements
flex in flexbox layouts or grid layouts
Lecture 2 UFE
Flexible Images & Media
Non-Responsive Image (Fixed Size)
<img src="image.jpg" width="500" height="300">
Responsive Image (Scales with Screen Size)
<img src="image.jpg" style="max-width: 100%; height: auto; display:
block;">
Lecture 2 UFE 37
Media Queries
Media Queries are a crucial part of Responsive Web Design (RWD), allowing you to
apply different styles depending on the characteristics of the device or browser.
They enable web pages to adapt to different screen sizes, resolutions,
orientations, and other properties, making the site responsive to various devices
like smartphones, tablets, and desktops.
/* Media Query for Mobile Phones (Max Width: 480px) */
@media screen and (max-width: 480px) {
.container {
width: 100%;
padding: 10px;
background-color: lightgreen;
}
Lecture 2 UFE 38
Setting the Viewport
Mobile browsers render pages on a canvas called the viewport and then shrink
it to fit the screen (device width).
To make the viewport the same size as the device width:
<meta name="viewport"
content="width=device-width, initial-scale="1">
Lecture 2 UFE
Setting the Viewport
<meta name="viewport"
content="width=device-width, initial-scale="1">
*turns a regular webpage into a responsive page
Tells the browser to set the width of the viewport equal to
the width of the device screen (width=device-width)
Why? To fit standard websites onto small screens,
mobile browsers render the page on a canvas called the
viewport and then shrink that viewport down to fit the
width of the screen (device width).
Example: on iPhones, Mobile Safari sets the viewport width to
980 pixels, so a web page is rendered as though it were on a
desktop browser window set to 980 pixels wide. But that
rendering gets shrunk down to 320 pixels wide (portrait
orientation) viewport element is a re-set – telling the browser to
set the width of the content to the width of the device itself,
and to scale that content to 1 (100%) on load
Lecture 2 UFE
Setting the Viewport (cont’d)
Lecture 2 UFE
Making Images Flexible
img { max-width: 100%; }
flexible images: images scale down to fit the size of their container
When the layout gets smaller, the images will scale down to fit the width of the container they are in
When the container is larger than the image – the image does not scale larger; it stops at 100% of
its original size
Lecture 2 UFE
Media Queries
A media query is a special rule that tests for certain conditions before applying the
styles it contains:
@media type and (feature: value) {
/* styles for browsers that meet this criteria */
}
Media queries allow you to combine media types with media features and expressions to control when
styles are applied.
A few query examples:
Is it on a screen or printed?
Is the browser at least a certain width?
Is the orientation landscape or portrait?
uses conditional logic to filter when styles are applied
Lecture 2 UFE
Media Query Example
ex: one set of styles to screen devices and another to a printer
Lecture 2 UFE
Media Types
The first part of a media query identifies the media type.
The current media types are all, print, screen, and speech.
Example:
@media print {
/* print-specific styles between the brackets */
}
Media types were introduced in CSS2.
Lecture 2 UFE
Media Types
all: styles apply to all devices
print: used for printers and other print-related displays
speech: for screen-readers
screen: matches all devices that are not print or speech
(computer screens, tablets, smart-phones, etc.)
Lecture 2 UFE
Site Testing
Testing sites in a wide variety of browsing environments is critical:
Real devices
The best way to test is on actual smartphones, tablets, etc.
Emulators
Use a desktop application that simulates device hardware and software.
Browser testing services
Subscription-based services show how your site looks on a huge variety of
browsers.
Lecture 2 UFE
