Contents

• CSS Introduction • CSS Padding • CSS Layout

• CSS Syntax • CSS Height, Width • CSS Overflow
• CSS Box Model • CSS Float
• CSS Selectors
• CSS Outline • CSS Align
• How To Add CSS • CSS Opacity
• CSS Text
• CSS Comments • CSS Fonts • CSS Navigation Bar
• CSS Colors • CSS Icons • CSS Dropdowns
• CSS Backgrounds • CSS Links • CSS Website Layout
• CSS Lists • CSS Units
• CSS Borders
• CSS Margins

Compiled By Aliazar D. (MSc in SEng) 2

Compiled By Aliazar D. (MSc in SEng) 3
CSS Introduction

※ CSS stands for Cascading Style Sheets

※ CSS is used to define styles for the web pages, including the design, layout and
variations in display for different devices and screen sizes.
※ CSS describes how HTML elements are to be displayed on screen, paper, or in
other media.
※ CSS saves a lot of work. It can control the layout of multiple web pages all at
once and the external stylesheets are stored in “.CSS” files.
※ HTML was created to describe the content of a web page and it was never
intended to contain tags for formatting a web page.
※ To solve this problem, the World Wide Web Consortium (W3C) created CSS.

Compiled By Aliazar D. (MSc in SEng) 4

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.
Compiled By Aliazar D. (MSc in SEng) 5
CSS Selectors
⁕ A CSS selector selects the HTML element(s) you • The CSS id Selector
want to style based on the element name. ◙ The id selector uses the id attribute of an HTML element
to select a specific element.
⁕ CSS selectors are used to "find" (or select) the ◙ The id of an element is unique within a page, so the id
HTML elements you want to style. selector is used to select one unique element!
⁕ CSS selectors are into divided five categories: ◙ To select an element with a specific id, write a hash (#)
character, followed by the id of the element.
† Simple selectors (select elements based on • The CSS class Selector
name, id, class) ◙ The class selector selects HTML elements with a
specific class attribute.
† Combinator selectors (select elements based ◙ To select elements with a specific class, write a period
on a specific relationship between them) (.) character, followed by the class name.
† Pseudo-class selectors (select elements based • The CSS Universal Selector
on a certain state) ◙ The universal selector (*) selects all HTML elements on
the page.
† Pseudo-elements selectors (select and style a • The CSS Grouping Selector
part of an element) ◙ The grouping selector selects all the HTML elements
with the same style definitions. To group selectors,
† Attribute selectors (select elements based on separate each selector with a comma.
an attribute or attribute value)
Compiled By Aliazar D. (MSc in SEng) 6
More..
Selector Example Example description
#id #firstname Selects the element with id="firstname"

.class .intro Selects all elements with class="intro"

element.class p.intro Selects only <p> elements with class="intro"

* * Selects all elements

element p Selects all <p> elements
element,eleme div, p Selects all <div> elements and all <p> elements
nt,..
Compiled By Aliazar D. (MSc in SEng) 7
How To Add CSS
External CSS Internal CSS •
Inline CSS
An inline style may be used to apply a unique
• With an external style sheet, • An internal style sheet may be used if one single style for a single element.
you can change the look of an HTML page has a unique style. • To use inline styles, add the style attribute to
entire website by changing • The internal style is defined inside the <style> the relevant element. The style attribute can
just one file! element, inside the head section. contain any CSS property.
• Each HTML page must
include a reference to the Multiple Style Sheets
external style sheet file inside • If some properties have been defined for the same selector (element) in different style sheets, the
the <link> element, inside the value from the last read style sheet will be used.
head section Cascading Order
<head>
<link rel="stylesheet" href="mystyle.css"> What if there is more than one style specified for an HTML element?
</head> • All the styles in a page will "cascade" into a new "virtual" style sheet by the
• An external style sheet can be following rules, where number one has the highest priority:
written in any text editor, and 1. Inline style (inside an HTML element)
must be saved with a .css 2. External and internal style sheets (in the head section)
extension. 3. Browser default
• The external .css file should So, an inline style has the highest priority, and will override external and internal
8
not contain any HTML tags. styles and browser defaults.
 CSS Comments
• CSS comments are not displayed in the browser, but
they can help document your source code.
• Comments are used to explain the code, and may
help when you edit the source code at a later date.
• A single line comment is placed inside /* and ends
with */
• Comments can also span multiple lines:
/* This is
a multi-line
comment */ 9
Compiled By Aliazar D. (MSc in SEng)
 CSS Colors
• Colors are specified using predefined Color Names, or RGB, HEX, HSL, RGBA, HSLA values.
Color Names
H
S
L

R
G H
B S
L
A

R H
G E
B X
A
10
Compiled By Aliazar D. (MSc in SEng)
 • CSS Background Image
• CSS background-color ✓ The background-image
CSS Backgrounds ✓ The background-color property specifies an image to
property specifies the use as the background of an
• The CSS background background color of an element.
properties are used to add element. background-image: url(“image.png");
background effects for ✓ You can set the background ✓ By default, the background-
elements. color for any HTML image property repeats an
• CSS background properties: elements: body, <h1>, <p>, image both horizontally and
and <div> elements. vertically but to display the
⁕ background-color
✓ The opacity property background image only once
⁕ background-image background-repeat: no-repeat;
specifies the
⁕ background-repeat property is used.
opacity/transparency of an
✓ The background-position
⁕ background- element. It can take a value property is used to specify the
attachment from 0.0 - 1.0. The lower position of the background
⁕ background-position value, the more transparent. image. background-position: right top;
⁕ Background • CSS background - Shorthand property
• The background-attachment It is used to specify all the background properties in one single
property. When using the shorthand property the order of the property
property specifies whether
values is:1. background-color, 2. background-image 3. background-
the background image repeat, 4.background-attachment and 5. background-position. It does
should scroll or be fixed not matter if one of the property values is missing, as long as the other
11
Compiled By Aliazar D. (MSc in SEng) ones are in this order. background: #ffffff url("img_tree.png") no-repeat right top;
 CSS Borders
• The border-style property specifies what kind of border to
display.
• The following values are allowed:
⁕ dotted - Defines a dotted border
⁕ dashed - Defines a dashed border
⁕ solid - Defines a solid border
⁕ double - Defines a double border
⁕ groove - Defines a 3D grooved border. The effect depends on
the border-color value
⁕ ridge - Defines a 3D ridged border. The effect depends on the
border-color value
⁕ inset - Defines a 3D inset border. The effect depends on the
border-color value
⁕ outset - Defines a 3D outset border. The effect depends on the
border-color value
⁕ none - Defines no border
⁕ hidden - Defines a hidden border
Compiled By Aliazar D. (MSc in SEng) 12
Conti.. ⁂ CSS Border Sides
† If the border-style property has
• CSS Border - Shorthand
Property
four values: † The border property is a
• CSS Border Width shorthand property for the
✓ The border-width property ⁕ border-style: dotted solid double
dashed; following individual border
specifies the width of the four
borders. ⁕ top border is dotted properties:
border-width: 5px; ⁕ right border is solid ⁕ border-width
✓ The border-width property can ⁕ bottom border is double ⁕ border-style (required)
have from one to four values (for ⁕ left border is dashed ⁕ border-color
the top border, right border, border: 5px solid red;
bottom border, and the left † If the border-style property has
three values: • CSS Rounded Borders
border):
border-width: 25px 10px 4px ⁕ border-style: dotted solid double; † The border-radius property
35px; ⁕ top border is dotted is used to add rounded
• CSS Border Color ⁕ right and left borders are solid borders to an element
✓ The border-color property is used ⁕ bottom border is double
to set the color of the four borders. † If the border-style property has
border-color: red; two values:
✓ The border-color property can ⁕ border-style: dotted solid;
have from one to four values (for
the top border, right border, ⁕ top and bottom borders are dotted
bottom border, and the left ⁕ right and left borders are solid
border). † If the border-style property has border: 2px solid red;
border-color: red green blue one value: border-radius: 5px;
yellow; ⁕ border-style: dotted; border-radius: 8px;
⁕ all four borders are dotted border-radius: 12px; 13
Compiled By Aliazar D. (MSc in SEng)
CSS Margins and Padding
CSS Padding
CSS Margins • The margin property is a shorthand • The CSS padding properties are
• The CSS margin properties are used to create space property for the following individual
around elements, outside of any defined borders. used to generate space around an
• margin properties:
CSS has properties for specifying the margin for element's content, inside of any
each side of an element: • margin-top
⁕ margin-top • margin-right defined borders.
⁕ margin-right • margin-bottom • For individual slides and shorthand
⁕ margin-bottom • margin-left property the same strategies are
⁕ margin-left • If the margin property has four values:
• All the margin properties can have the following with CSS Margins.
✓ margin: 25px 50px 75px 100px;
values:
(top, right, bottom, left)
⁕ auto - the browser calculates the margin
⁕ length - specifies a margin in px, cm, etc. • If the margin property has three values:
⁕ % - specifies a margin in % of the width of ✓ margin: 25px 50px 75px; (top,
the containing element left and right, bottom)
⁕ inherit - specifies that the margin should be • If the margin property has two values:
inherited from the parent element
✓ margin: 25px 50px; (top and div {
div {
border: 1px solid black; bottom, left and right) padding-top: 50px;
margin-top: 100px; • If the margin property has one value: padding-right: 30px;
margin-bottom: 100px; ✓ margin: 25px; (all four margins) padding-bottom: 50px;
margin-right: 150px; ✓ You can set the margin property to auto padding-left: 80px;
margin-left: 80px; to horizontally center the element
background-color: lightblue;
}
within its container. Compiled By Aliazar D. (MSc in SEng) 14
}
 CSS Height, Width and Max-width
• The CSS height and width properties are used • Setting max-width
to set the height and width of an element.
⁜ The max-width property is used to set
• The CSS max-width property is used to set the maximum width of an element.
the maximum width of an element. ⁜ The max-width can be specified in
• The height and width properties may have the length values, like px, cm, etc., or in
following values: percent (%) of the containing block, or
◙ auto - This is default. The browser set to none (this is default. Means that
calculates the height and width there is no maximum width).
◙ length - Defines the height/width in px, ⁜ If you for some reason use both the
cm, etc. width property and the max-width
◙ % - Defines the height/width in percent property on the same element, and the
of the containing block value of the width property is larger
◙ initial - Sets the height/width to its than the max-width property; the max-
default value width property will be used (and the
◙ inherit - The height/width will be width property will be ignored).
inherited from its parent value
• The height and width properties do not
include padding, borders, or margins. It sets
the height/width of the area inside the
padding, border, and margin of the element. 15
Compiled By Aliazar D. (MSc in SEng)
 The CSS Box Model
• The CSS box model is essentially a box that wraps around every
HTML element. It consists of: margins, borders, padding, and
the actual content. .
• 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

div {
width: 300px;
border: 15px
solid green;
padding: 50px;
margin: 20px; Compiled By Aliazar D. (MSc in SEng) 16
}
 • The outline-style property specifies•
CSS Outline the style of the outline, and can
The outline-width
property specifies the
width of the outline,
have one of the following values:
• An outline is a line drawn outside the ♠ dotted - Defines a dotted outline and can have one of
element's border to make the element ♠ dashed - Defines a dashed outline the following values:
"stand out". ♠ solid - Defines a solid outline thin (typically 1px),
♠ double - Defines a double outline medium (typically
♠ groove - Defines a 3D grooved 3px), thick (typically
outline 5px), A specific size
♠ ridge - Defines a 3D ridged outline (in px, pt, cm, em, etc)
• The outline-color
• CSS has the following outline properties: ♠ inset - Defines a 3D inset outline
♠ outset - Defines a 3D outset outline property is used to set
⁍ outline-style
♠ none - Defines no outline the color of the outline
⁍ outline-color
⁍ outline-width ♠ hidden - Defines a hidden outline • The outline-offset
property adds space
⁍ outline-offset
between an outline and
⁍ outline
the edge/border of an
• Outline differs from borders!
element.
• Unlike border, the outline is drawn
• The shorthand outline
outside the element's border, and may
property for setting the
overlap other content.
following individual
• Also, the outline is NOT a part of the
outline properties:
element's dimensions; the element's total
• outline-width
width and height is not affected by the
• outline-style (required)
width of the outline. Compiled By Aliazar D. (MSc in SEng) 17
• outline-color
 CSS Text
• CSS has a lot of properties for formatting text. • Text Decoration
• Text Color ✓ The text-decoration-line property is used to add a decoration line to text.
✓ The color property is used to set the color of the text. The values are overline, line-through, underline, and overline underline.
• Text Alignment ✓ The text-decoration-color property is used to set the color of the decoration
⁕ The text-align property is used to set the horizontal line.
alignment of a text. ✓ The text-decoration-style property is used to set the style of the decoration
⁕ A text can be left or right aligned, centered, or line. The values are solid, double, dotted, dashed, and wavy.
justified (justify). ✓ The text-decoration-thickness property is used to set the thickness of the
• Text Align Last decoration line.
✓ The text-align-last property specifies how to align the ✓ The text-transform property is used to specify uppercase and lowercase
last line of a text. letters in a text. The values are uppercase, lowercase, and capitalize.
• Text Direction
✓ The text-shadow property adds shadow to text. you only specify the
⁕ The direction and unicode-bidi properties can be used horizontal shadow and the vertical shadow in px.
to change the text direction of an element. • Text Spacing
direction: rtl; ✓ letter-spacing: Specifies the space between characters in a text.
unicode-bidi: bidi-override;
✓ line-height: Specifies the line height.
• Vertical Alignment
✓ text-indent: Specifies the indentation of the first line in a text-block.
✓ The vertical-align property sets the vertical alignment
of an element. The values are baseline (default), text-
✓ white-space: Specifies how to handle white-space inside an element.
top, text-bottom, sub and sup. ✓ word-spacing: Specifies the space between words in a text 18
Compiled By Aliazar D. (MSc in SEng)
CSS Fonts
• Choosing the right font has a huge Generic Font Family Examples of Font Names
impact on how the readers experience a Serif Times New Roman
website. Georgia
• In CSS there are five generic font Garamond
families:
1. Serif fonts have a small stroke at
the edges of each letter. They Sans-serif Arial
create a sense of formality and Verdana
elegance. Helvetica
2. Sans-serif fonts have clean lines
(no small strokes attached). They Courier New
Monospace
create a modern and minimalistic Lucida Console
look.
Monaco
3. Monospace fonts - here all the
letters have the same fixed width. Cursive Brush Script MT
They create a mechanical look. Lucida Handwriting
4. Cursive fonts imitate human
handwriting.
Fantasy Copperplate
5. Fantasy fonts are Papyrus
decorative/playful fonts.
Compiled By Aliazar D. (MSc in SEng) 19
 Conti..
• CSS Font Family • CSS Font Size
♠ The font-size property sets the size of the text.
♠ The CSS font-family property is used to specify the font
♠ To make the Font Size Responsive, the text size can be set with a vw unit, which
of a text. means the "viewport width".
♠ If the font name is more than one word, it must be in • CSS Google Fonts
quotation marks, like: "Times New Roman". (Fallback Fonts!) ♠ Google Fonts are free to use, and have more than 1000 fonts to choose from.
• CSS Font Style ♠ To use google fonts
♠ The font-style property is mostly used to specify italic 1. Add a stylesheet link to request the desired web font(s):
text. ♠ <link rel=“stylesheet”
href="https://fonts.googleapis.com/css?family=Font+Name">
♠ This property has two values: 2. Style an element with the requested web font, either in a stylesheet:
♠ normal - The text is shown normally I. .css-selector {font-family: 'Font Name', serif; }
♠ italic - The text is shown in italics II. or with an inline style on the element itself:
• CSS Font Weight <div style="font-family: 'Font Name', serif;">Your text</div>
♠ <link rel="stylesheet" href="https://fonts.googleapis.com/c
♠ The font-weight property specifies the weight of a font. ss?family=Sofia">
The values are normal, lighter, bold and you can specify ♠ font-family: "Sofia", sans-serif;
with number like 1000. ♠ To use multiple Google fonts, just separate the font names with a pipe character
• CSS Font Variant (|)
♠ The font-variant property specifies whether or not a text ♠ <link rel="stylesheet" href="https://fonts.googleapis.com/c
ss?family=Audiowide|Sofia|Trirong">
should be displayed in a small-caps font.
• The font property is a shorthand property for: font-style, font-variant, font-weight, font-
♠ In a small-caps font, all lowercase letters are converted to size/line-height and font-family. The font-size and font-family values are required. If one
uppercase letters. However, the converted uppercase of the other values is missing, their default value are used.
letters appears in a smaller font size than the original
uppercase letters in the text. Compiled By Aliazar D. (MSc in SEng) 20
 CSS Icons
• Icons can easily be added to HTML page, by <body> • Bootstrap Icons
using an icon library. such as Font Awesome. <i class="fas fa-cloud"></i> • To use the Bootstrap glyphicons, add
Add the name of the specified icon class to <i class="fas fa-heart"></i> the following line inside the <head>
any inline HTML element (like <i> or <i class="fas fa-car"></i> section of the HTML page:
<span>). <i class="fas fa-file"></i> • <link rel="stylesheet"
• Font Awesome Icons <i class="fas fa-bars"></i> href="https://maxcdn.bootstrapcdn.co
• To use the Font Awesome icons, go to </body> m/bootstrap/3.3.7/css/bootstrap.min.cs
fontawesome.com, sign in, and get a code to • Google Icons s">
add in the <head> section of the HTML page: • To use it, add the link below inside the <body>
<script <head> section of the HTML page: <i class="glyphicon glyphicon-
src="https://kit.fontawesome.com/yourcode.js"cross <link rel="stylesheet" cloud"></i>
origin="anonymous"></script> href="https://fonts.googleapis.com/icon?fa <i class="glyphicon glyphicon-
<head> mily=Material+Icons"> remove"></i>
<meta name="viewport" content="width=device- <i class="material-icons">cloud</i> <i class="glyphicon glyphicon-user"></i>
width, initial-scale=1"> <i class="material-icons">favorite</i> <i class="glyphicon glyphicon-
<script <i class="material-icons">attachment</i> envelope"></i>
src="https://kit.fontawesome.com/a076d05399.js" <i class="material-icons">computer</i> <i class="glyphicon glyphicon-thumbs-
crossorigin="anonymous"></script> up"></i>
<i class="material-icons">traffic</i>
<!--Get your own code at fontawesome.com--> </body>
Compiled By Aliazar D. (MSc in SEng) 21
</head>
 CSS Links
<style>
• Links can be styled with any CSS • /* unvisited link */
property (e.g. color, font-family, a:link {
color: red;
background, etc.). }

• In addition, links can be styled /* visited link */

a:visited {
differently depending on what state color: green;
}
they are in. /* mouse over link */
• The four links states are: a:hover {
color: hotpink;
}
⁕ a:link - a normal, unvisited link
/* selected link */
⁕ a:visited - a link the user has a:active {
color: blue;
visited }
</style>
⁕ a:hover - a link when the user <body>
mouses over it <p><b><a href=“http://www.wku.edu.et” target="_blank">This is a
link</a></b></p>
⁕ a:active - a link the moment it is </body> Compiled By Aliazar D. (MSc in SEng) 22
The cursor Property
• <span style="cursor: auto">auto</span><br>
<span style="cursor: crosshair">crosshair</span><br>
<span style="cursor: default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
<span style="cursor: help">help</span><br>
<span style="cursor: move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor: nw-resize">nw-resize</span><br>
<span style="cursor: pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor: se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
<span style="cursor: text">text</span><br>
<span style="cursor: w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span>

Compiled By Aliazar D. (MSc in SEng) 23

 CSS Lists
• The CSS list properties allows to:
⁕ Set different list item markers for ordered lists
⁕ Set different list item markers for unordered lists
⁕ Set an image as the list item marker
⁕ Add background colors to lists and list items
• The list-style-type property specifies the type of list item marker. Some of the available list
item markers are circle, square, upper-roman and lower-alpha.
• The list-style-image property specifies an image as the list item marker: ul { list-style-
image: url('sqpurple.gif’);}
• The list-style-position property specifies the position of the list-item markers (bullet points):
inside and outside.
• The list-style-type:none property can also be used to remove the markers/bullets. Note that
the list also has default margin and padding.
• To remove this, add margin:0 and padding:0 to <ul> or <ol>. Compiled By Aliazar D. (MSc in SEng) 24
 CSS Layout - Position ▪ position: relative;
✓ An element with position:
▪ position: absolute;
✓ An element with position:
• The position property specifies the
type of positioning method used for relative; is positioned relative absolute; is positioned relative
an element (static, relative, fixed, to its normal position. to the nearest positioned
absolute or sticky). ✓ Setting the top, right, bottom, ancestor (instead of positioned
• Elements are then positioned using and left properties of a relative to the viewport, like
the top, bottom, left, and right relatively-positioned element fixed).
properties. However, these
properties will not work unless the will cause it to be adjusted ✓ However; if an absolute
position property is set first. away from its normal position. positioned element has no
• position: static; Other content will not be positioned ancestors, it uses
✓ HTML elements are adjusted to fit into any gap left the document body, and moves
positioned static by default. by the element. along with page scrolling.
position: static; ▪ position: fixed; ▪ position: sticky;
✓ Static positioned elements are ✓ An element with position: ▪ An element with position:
not affected by the top, fixed; is positioned relative to sticky; is positioned based on
bottom, left, and right
properties. the viewport, which means it the user's scroll position.
• The z-index Property always stays in the same place ▪ A sticky element toggles
✓ When elements are even if the page is scrolled. between relative and fixed,
positioned, they can overlap The top, right, bottom, and left depending on the scroll
other elements. (+ve or –ve properties are used to position position. It is positioned
stack order) the element. relative until a given offset
✓ The z-index property ✓ A fixed element does not leave position is met in the viewport
specifies the stack order of an
element (which element a gap in the page where it - then it "sticks" in place (like
should be placed in front of, would normally have been position:fixed). 25
or behind, the others). located. Compiled By Aliazar D. (MSc in SEng)
CSS Layout – Overflow, float

• CSS Overflow <!DOCTYPE html> ▪ The float Property

<html>
⁕ The overflow property specifies whether to clip <head>
✓ The float property is used for
the content or to add scrollbars when the content <style> positioning and formatting content e.g.
of an element is too big to fit in the specified div {
background-color: coral;
let an image float left to the text in a
area. The overflow-x and overflow-y properties width: 200px; container.
specifies whether to change the overflow of height: 65px;
✓ The float property can have one of the
content just horizontally or vertically (or both). border: 1px solid;
overflow: visible; | hidden; | following values:
⁕ The overflow property has the following values: scroll; |auto;
⁕ left - The element floats to
}
◙ visible - Default. The overflow is not </style> the left of its container
clipped. The content renders outside the </head>
<body> ⁕ right - The element floats to
element's box
<h2>Overflow: visible</h2> the right of its container
◙ hidden - The overflow is clipped, and the <p>By default, the overflow is visible,
meaning that it is not clipped and it ⁕ none - The element does not
rest of the content will be invisible
renders outside the element's box:</p> float. This is default
◙ scroll - The overflow is clipped, and a <div>You can use the overflow property
scrollbar is added to see the rest of the when you want to have better control of
⁕ inherit - The element inherits
content the layout. The overflow property the float value of its parent
specifies what happens if content
◙ auto - Similar to scroll, but it adds overflows an element's box.</div> ✓ In its simplest use, the float property
scrollbars only when necessary </body> can be used to wrap text around
</html> images.
⁕ The overflow property only works for block elements
Compiled By Aliazar D. (MSc in SEng) 26
with a specified height.
•
Conti..
The display: inline-block
<!DOCTYPE html>
<html>
<head>
<body>

<h1>The display Property</h1>

<style>
Value span.a { <h2>display: inline</h2>
• display: inline-block is to display: inline; <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
display list items width: 100px; Vestibulum consequat scelerisque elit sit amet consequat. Aliquam
horizontally instead of height: 100px; erat volutpat. <span class="a">Aliquam</span> <span
vertically. padding: 5px; class="a">venenatis</span> gravida nisl sit amet facilisis. Nullam
• Compared to display: border: 1px solid blue; cursus fermentum velit sed laoreet. </div>
inline, the major background-color: yellow;
difference is that display: } <h2>display: inline-block</h2>
inline-block allows to set span.b { <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
a width and height on the display: inline-block; Vestibulum consequat scelerisque elit sit amet consequat. Aliquam
element. width: 100px; erat volutpat. <span class="b">Aliquam</span> <span
height: 100px;
• Also, with display: inline- padding: 5px;
class="b">venenatis</span> gravida nisl sit amet facilisis. Nullam
block, the top and bottom cursus fermentum velit sed laoreet. </div>
border: 1px solid blue;
margins/paddings are background-color: yellow;
respected, but with <h2>display: block</h2>
} <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
display: inline they are span.c {
not. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam
display: block; erat volutpat. <span class="c">Aliquam</span> <span
• Compared to display: width: 100px; class="c">venenatis</span> gravida nisl sit amet facilisis. Nullam
block, the major height: 100px; cursus fermentum velit sed laoreet. </div>
difference is that display: padding: 5px;
inline-block does not add border: 1px solid blue; </body>
a line-break after the background-color: yellow; </html>
element, so the element }
can sit next to other </style>
elements. </head>
27
Compiled By Aliazar D. (MSc in SEng)
 Conti..
• CSS Combinators • Adjacent Sibling Selector (+) • CSS Pseudo-classes
• A combinator is something that explains the ✓ The adjacent sibling selector is ✓ A pseudo-class is used to define a special state of an element.
relationship between the selectors. used to select an element that is it can be used to:
• There are four different combinators in CSS: ⁕ Style an element when a user mouses over it
directly after another specific
♠ descendant selector (space) ⁕ Style visited and unvisited links differently
element.
♠ child selector (>) ⁕ Style an element when it gets focus
✓ Sibling elements must have the ✓ The syntax of pseudo-classes:
♠ adjacent sibling selector (+)
♠ general sibling selector (~)
same parent element, and selector:pseudo-class {
• Descendant Selector
"adjacent" means "immediately property: value;
following". <!DOCTYPE html> </head> }
♠ The descendant selector matches all
<html> <body>
elements that are descendants of a div + p {
<head> <p>Mouse over the div element
specified element. background-color: yellow; <style> below to change its background
div p { } div { color:</p>
background-color: yellow;
} • General Sibling Selector (~) background-color: green; <div>Mouse Over Me</div>
color: white; </body>
• Child Selector (>) ✓ The general sibling selector padding: 25px; </html>
♠ The child selector selects all elements selects all elements that are next text-align: center;
that are the children of a specified siblings of a specified element. }
element. div ~ p { div:hover {
div > p { background-color: blue; Read about CSS Pseudo-
background-color: yellow;}
background-color: yellow; } elements!
}
Compiled By Aliazar D. (MSc in SEng) </style> 28
 <!DOCTYPE html>

Conti.. <!DOCTYPE html>

<html>
<head>
<style>Vertical
<html>
<head>
<style>
ul {
• CSS Opacity / Transparency ul {
list-style-type: none; list-style-type: none;
margin: 0;
⁕ The opacity property specifies margin: 0;
padding: 0;
padding: 0;
the opacity/transparency of an width: 200px; overflow: hidden;
element. background-color: #f1f1f1; background-color: #333;
} }
⁕ The opacity property can take a li a { li {
display: block; float: left;
value from 0.0 - 1.0. The lower color: #000; }
the value, the more transparent: padding: 8px 16px; li a {
text-decoration: none; display: block;
img { opacity: 0.5; } } color: white;
li a.active { text-align: center;
background-color: #04AA6D; padding: 14px 16px;
color: white;
text-decoration: none;
}
}
li a:hover:not(.active) {
li a:hover:not(.active) {
background-color: #555;
color: white; background-color: #111;
} }
</style> .active {
background-color: #04AA6D;
• CSS Navigation Bar </head>
<body> }
<h2>Vertical Navigation Bar</h2> </style>
<p>In this example, we create an "active" class </head>
with a green background color and a white text. <body> Horizontal
The class is added to the "Home" link.</p> <ul>
<ul> <li><a class="active"
<li><a class="active" href="#home">Home</a></li> href="#home">Home</a></li>
<li><a href="#news">News</a></li> <li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li> <li><a
<li><a href="#about">About</a></li> href="#contact">Contact</a></li>
</ul> <li><a href="#about">About</a></li>
</body> </ul>
</html> </body>
Compiled By Aliazar D. (MSc in SEng) </html> 29
CSS Dropdowns .dropdown-content a {
color: black;
<body>
<div class="dropdown">
<!DOCTYPE html> padding: 12px 16px; <button
<html> text-decoration: none; class="dropbtn">Dropdown</button>
<head> display: block; <div class="dropdown-content">
} <a href="#">Link 1</a>
<style> .dropdown-content a:hover <a href="#">Link 2</a>
.dropbtn { {background-color: #f1f1f1} <a href="#">Link 3</a>
background-color: #4CAF50; </div>
color: white; .dropdown:hover .dropdown-content { </div>
padding: 16px; display: block; <p><strong>Note:</strong> We use
} href="#" for test links. In a real web
font-size: 16px; .dropdown:hover .dropbtn { site this would be URLs.</p>
border: none; background-color: #3e8e41; </body>
cursor: pointer; } </html>
} </style>
.dropdown { </head>
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; 30
} Compiled By Aliazar D. (MSc in SEng)
<!DOCTYPE html> .dropdown-content { <body>
<html> display: none; <ul>
<head> position: absolute; <li><a
<style> background-color: #f9f9f9; href="#home">Home</a></li>
ul { min-width: 160px; <li><a
list-style-type: none; box-shadow: 0px 8px 16px 0px href="#news">News</a></li>
margin: 0; rgba(0,0,0,0.2); <li class="dropdown">
padding: 0; z-index: 1; <a href="javascript:void(0)"
overflow: hidden;
} class="dropbtn">Dropdown</a>
background-color: #333;
.dropdown-content a { <div class="dropdown-
}
color: black; content">
li {
padding: 12px 16px; <a href="#">Link 1</a>
float: left;
text-decoration: none; <a href="#">Link 2</a>
}
display: block; <a href="#">Link 3</a>
li a, .dropbtn {
text-align: left; </div>
display: inline-block;
} </li>
color: white;
.dropdown-content a:hover </ul>
text-align: center;
padding: 14px 16px;
{background-color: #f1f1f1;} </body>
text-decoration: none;
.dropdown:hover .dropdown- </html>
}
content {
li a:hover, .dropdown:hover display: block;
.dropbtn { }
background-color: red; </style>
} </head>
li.dropdown {
display: inline-block;
} 31
Compiled By Aliazar D. (MSc in SEng)
CSS Website Layout

Compiled By Aliazar D. (MSc in SEng) 32

<!DOCTYPE html> /* Style the topnav links /* Clear floats after the <div class="header">
*/ <h1>Header</h1>
<html lang="en"> columns */ <p>Resize the browser window to see the responsive
<head> .topnav a {
float: left; .row:after { effect.</p>
</div>
<title>CSS Website display: block; content: ""; <div class="topnav">
Layout</title> color: #f2f2f2; display: table; <a href="#">Link</a>
<meta charset="utf-8"> <a href="#">Link</a>
text-align: center; clear: both; <a href="#">Link</a>
<meta name="viewport" padding: 14px 16px; } </div>
content="width=device- text-decoration: none; /* Responsive layout - <div class="row">
width, initial-scale=1"> } <div class="column side">
/* Change color on hover makes the three columns <h2>Side</h2>
<style> */ stack on top of each other <p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit..</p>
* { .topnav a:hover { instead of next to each </div>
box-sizing: border-box; background-color: #ddd; other */ <div class="column middle">
color: black; @media screen and (max- <h2>Main Content</h2>
} } <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
body { width: 600px) { Maecenas sit amet pretium urna. Vivamus venenatis velit nec
/* Create three unequal
.column.side, neque ultricies, eget elementum magna tristique. Quisque
margin: 0; columns that floats next vehicula, risus eget aliquam placerat, purus leo tincidunt
to each other */ .column.middle {
} eros, eget luctus quam orci in velit. Praesent scelerisque
.column { width: 100%; tortor sed accumsan convallis.</p>
/* Style the header */ float: left; } </div>
.header { padding: 10px; <div class="column side">
} <h2>Side</h2>
background-color: }
/* Style the footer */ <p>Lorem ipsum dolor sit amet, consectetur adipiscing
#f1f1f1; /* Left and right column elit..</p>
*/ .footer { </div>
padding: 20px; .column.side { background-color: </div>
text-align: center; width: 25%; #f1f1f1; <div class="footer">
<p>Footer</p>
} } padding: 10px; </div>
/* Style the top navigation /* Middle column */ text-align: center; </body>
.column.middle { } </html>
bar */
width: 50%;
.topnav { } </style>
overflow: hidden; </head>
background-color: #333; <body>
} 33
Compiled By Aliazar D. (MSc in SEng)
 CSS Units
Absolute Lengths Relative Lengths
• Relative length units specify a length relative to another
length property. Relative length units scale better
• The absolute length units are fixed and a length
between different rendering mediums.
expressed in any of these will appear as exactly
Unit Description
that size.
em Relative to the font-size of the element (2em
means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely
Unit Description used)
ch Relative to width of the "0" (zero)
cm centimeters
rem Relative to font-size of the root element
mm millimeters vw Relative to 1% of the width of the viewport*
in inches (1in = 96px = 2.54cm) vh Relative to 1% of the height of the viewport*
px * pixels (1px = 1/96th of 1in) vmin Relative to 1% of viewport's* smaller dimension
pt points (1pt = 1/72 of 1in) vmax Relative to 1% of viewport's* larger dimension
pc picas (1pc = 12 pt) % Relative to the parent element
Compiled By Aliazar D. (MSc in SEng) 34
Compiled By Aliazar D. (MSc in SEng) 35