Assignment Specification: Personal Portfolio Website

Subject: Web Development (HTML & CSS)

Total Marks: 60
Deliverable: .zip file containing root folder

1. Assignment Overview

Create a multi-page personal website that showcases your personality and hobbies. You must use HTML5
for structure and CSS3 for styling.

Constraints:
- NO JavaScript
- NO CSS Frameworks
- NO CSS Grid (Use Flexbox/Block model)

2. Grading Rubric (60 Marks)

Part A: HTML Structure (15 Marks)

- File Management (3): atleast 4 correct files (index, about, hobbies, contact).
- Navigation (4): Functional menu on all pages.
- Semantic Tags (5): Use of header, nav, main, footer.
- Images (3): Correct relative paths and alt text.

Part B: CSS Styling (20 Marks)

- External CSS (2): No inline styles.
- Typography & Color (6): Readable contrast and consistent theme.
- Box Model (8): Proper use of padding and margin.
- Nav Styling (4): Links look like a menu, not a list.

Part C: Layout & Responsiveness (15 Marks)

- Layout (8): Use Flexbox/Inline-block for side-by-side elements.
- Mobile (7): Content stacks vertically on small screens.

Part D: Content & Quality (10 Marks)

- Organization (3): Proper folder structure (css/ and images/ folders).
- Hobbies Content (4): 3 distinct hobbies with descriptions and images.
- Code Hygiene (3): Indentation and comments.

3. Page Requirements

1. Home: Hero section with H1, Intro text, Footer.

2. About: Bio paragraph, Facts list (ul), Profile picture.
3. Hobbies: List of 3 hobbies. Each must have Heading, Text, and Image.
4. Contact: Form with Name, Email, Message, and Submit button.

Page 1/1
What is CSS?
• Every web page is composed of HTML (Hypertext Markup Language)
code that describes the content
• Example:
<p>An<strong>important</strong><font

color=“#FFFF00”>paragraph</font>.</p>
• Displays:
• An important paragraph.
• Repetitive and hard to maintain.
What is CSS?
• Layers of a web page:
• Content:
• Text, images, animation, video, etc.
• Presentation:
• How the content will appear to a human through a web browser, text reader, etc.
• Behavior:
• Real-time user interaction with the page: validation, sorting, drag-n-drop etc.
Style Sheet Languages
• Style sheet languages are used to describe the presentation of
structured documents, like HTML, XML and other markup languages.
What is CSS?
• Cascading Style Sheets
• Contains the rules for the presentation of HTML

=
+

• CSS was introduced to keep the presentation information separate

from HTML markup (content).
• CSS separates the presentation from the content.
What are Cascading Style Sheets?
• Cascading Style Sheets (CSS) are rules. Each rule consists of a selector and a
declaration (which, in turn, is made up of a property and a value).

• They were established by the World Wide Web Consortium (W3C). CSS rules
control the look (Style) of web pages or XML files by providing central locations
(Sheets) where HTML or XML tags are interpreted by the browser.

CS 22: Enhanced Web Site Design - Cascading Style

Slide 3 (of 54)
Sheets
Why CSS?
• Flexible, can be applied in several ways.
• Easy to maintain.
• Accessibility to different users with different devices.
• CSS caching = less bandwidth + fast loading
Pros and Cons of Using CSS
• Pros
• Greater designer control of the appearance of the page
• Easier management of site-wide changes
• Greater accessibility to web sites by non-graphical browsers and web-page-
reading software

• Cons
• Different browsers may interpret Style Sheets in different ways
• Some styles may not be seen at all on some browsers
 General Syntax
• Style Definition:
Selector {
property: value;
}
• Example: body { font-family: Verdana; font-size: 9px; }

• The selector can either be a grouping of elements, an identifier, class, or

single HTML element (body, div, etc.)
• Each declaration includes a CSS property name and a value, separated
by a colon.
• A CSS declaration always ends with a semicolon, and declaration blocks
are surrounded by curly braces
CSS Syntax
• Case insensitive
• In most cases the use of whitespaces does not matter, within a
selector it does matter specifying which elements are targeted.
• Comments: Comments are useful for organizing styles, annotating
code, or communicating with team members.
/*
This is
a comment
*/
Source of Styles
• Author / Developer Style Sheets
• Inline Style Sheets
• Embedded Style Sheets
• External Style Sheets
• User Style Sheets
• Browser Default Style Sheets
 Source of Styles
> Author (Developer) Style Sheets
• Inline Styles:
• Allows you to format HTML elements directly as attribute of that
element itself.
• This is achieved through the style attribute which is supported by
every HTML tag.

• The simplest way but repetitive across multiple HTML elements

 Source of Styles
> Author (Developer) Style Sheets
• Embedded Styles:
• Embedded styles allow you to
write styles to control the page
content in the head of the
page’s HTML.
• This is achieved through the
style tag.
• Inefficient as a means of
controlling styles across an
entire site.
• Repetitive across multiple
pages.
 Source of Styles
> Author (Developer) Style Sheets
• External Styles
• Allow controlling styles across
multiple pages or even an entire
site.
• This can achieved in two ways.
• One is through the link tag (Empty
tag) specified in the pages head and
a separate (independent) stylesheet
file.
• type attribute: specifies the MIME
type of the resource
• rel attribute: defines the relationship
that the linked resource has to the
document from which it's referenced.

[Link]
 Source of Styles
> Author (Developer) Style Sheets
• External Styles
• Another way to associate a stylesheet file to an HTML page is
through the <style> tag and an inline style rule called @import.
[Link]
[Link]

• If you have to use @import, it must be specified above any rules in

the style tag.
Source of Styles
> User Style Sheets
• User Style Sheets: This file contains the user created styles.
[firefox profile folder]/chrome/[Link] is the current
user’s style sheet file for the firefox.

They provide a way for users to customize the appearance of

websites according to their preferences or specific needs.
Source of Styles
> Browser Default Style Sheets(user agent style
sheets)
• Browser Default Style Sheets: This file contains default styles for all
users of a browser.
[firefox profile folder]/res/[Link] is the default style sheet file
for the firefox.
resource://gre-resources/[Link]
resource://gre-resources/[Link]
Structuring HTML Correctly
• Without a logical, consistent structure to your HTML, writing
efficient CSS is impossible.
• HTML Authoring Best Practices
• Focus on using clear, semantic code.
• Structure your code consistently throughout your site.
• Simplify your code whenever possible. Avoid non-semantic
markup.
• Coding Strategy
• Approach initial coding with only the structure and content in mind.
• Design is considered, but should not influence code structure unless
absolutely necessary.
• This approach creates lean, semantic markup that is easier to style.
• Focus on the relationship between HTML structure and CSS
organization.
CSS SELECTORS
CSS Selectors
• In CSS, selectors are patterns used to select that element(s) you want
to style.
• Selectors allow us to target elements on a page.
• Selectors: Type/Element/Tag based selector, Identifier Selector, Class
Selector, Grouping Selector, Descendant Selector, Child Selector,
Adjacent Sibling Selector, General Sibling Selector, Attribute Selector,
Universal Selector, Pseudo-classes.
 CSS Selectors
> Element Selector
• Also known as type selector and tag
based selector.
• The element selector allows you to
target content on the page based on
the element that contains it.
• Specify the style(s) for a single HTML
element.
• Extremely powerful, but very broad.
 CSS Selectors
> Class Selector (.)
• Class selectors allow you to
target any element on the
page that has the same class
attribute.
• Class based styles can be
used by multiple HTML
elements.
• They are defined using the
period (.) character together
with a class name.
 CSS Selectors
> Id Selector (Identifier Selector) (#)
• Id selectors work in much the same
way as class selectors in that, they
allow us to target any element on the
page with a specific Id attribute.
• They are defined using the pound (#)
character together with the Id of the
element we want to target.
• In an event where Id and Class
selector conflict with each other, the
Id selector styling will be used in favor
of the class because it is more specific.
CSS Selectors
> Considerations (Id & Class)
• Class and Id attributes extend the meaning of your HTML code.
CSS Selectors
> Considerations (Id & Class)
CSS Selectors
> Class and Id Selectors with the Element
• Below is an example of an element specific selector with class and id.
• Notice that there is no space between the element name and the
class or id selector.
CSS Selectors
> Universal Selectors (*)
• Universal selectors are used to select any element.
• The following code sets the text color of all elements in a page to
blue.
CSS Selectors
> Grouping Selectors (,)`
• Often you will find several different elements on the page require the
exact same styling.
• Allows you to specify a single style for multiple elements at one time.
• Multiple selectors can be grouped in a single declaration by using
comma (,)
CSS Selectors
> Descendant Selector (space)
• The most powerful targeting
ability CSS gives us is the ability
to combine selectors together
in what is known as descendant
selectors.
• Allow to more precisely target
content based on the
relationship between nested
tags and their parents.
• Descendant selectors are used
to select elements that are
descendants (not necessarily
children) of another element in
the document tree.
CSS Selectors
> Descendant Selector (space)
 CSS Selectors
> Child Selectors (>)
• A child selector is used to
select an element that is
a direct child of another
element (parent). Child
selectors will not select
all descendants, only
direct children.
CSS Selectors
> Child Selectors (>)
CSS Selectors
> Adjacent Selectors (+)
• Also called adjacent sibling
selectors.
• Sibling = has the same parent
• Adjacent = immediately
following
• Allow you to target elements
based on which elements
follow one another in your
code. Essentially adjacent
selector allow you to style an
element based on which
element comes before it in
the document, providing that
both of those elements are
inside the same parent.
CSS Selectors
> Adjacent Selectors (+)
 CSS Selectors
> General Sibling Selectors (~)
• Sibling = has the same
parent element
• General = just following
• Allow you to target
elements based on which
elements follow in your
code. Essentially general
sibling selector allow you
to style an element based
on which element comes
before it (not necessarily
immediately) in the
document, providing that
both of those elements are
inside the same parent.
 CSS Selectors
> Attribute Selectors
• Attribute selectors selects
elements based upon the
attributes present in the
HTML tags and their value.
• Attributes are specified
using brackets.
• [attribute=“value”] (case
sensitive)
• [attribute] (doesn’t matter
what the value is)
CSS Selectors
> Attribute Selectors
CSS Selectors
> Attribute Selectors
CSS Selectors
> Attribute Selectors
 CSS Selectors
> Attribute Selectors
• Allow us to much patterns as well
• Tilde (~): It basically says go ahead and look for a
white space separated list that includes the word.
 CSS Selectors
> Attribute Selectors
• Another pattern matching character
• Caret (^): It basically says go ahead and match any
string that begins with a certain value.
 CSS Selectors
> Attribute Selectors
• Another pattern matching character
• Dollar Sign ($): It basically says go ahead and match
any string that ends with a certain value.
 CSS Selectors
> Attribute Selectors
• Another pattern matching character
• Asterisk Sign (*): It basically says go ahead and match
any string that contains a certain value.
 Document Object Model (DOM)
• A structural representation of all elements in an HTML
document, often used by browsers and scripts to
traverse through the documents and retrieve content
or apply behaviors.
• Browsers apply styles to elements by traversing through the
tree.
• There are times, however, when the DOM alone cannot
help you target elements, such as users hovering over
an element or focusing on a form element.
• Pseudo-class Selectors: allow us to target elements or
instances that lie outside of the DOM or are too
specific for simple selectors to target.
CSS Selectors
> Pseudo-Class Selectors(PC selectors)
• Dynamic pseudo-class selectors target elements based on something
other than attributes, content, or element type. Usually refers to
something that can change over time, or that is based on user
interaction.
• UI element state pseudo-class selectors target specific user interface
elements in regards to whether or not they are currently enabled.
(:enabled, :disabled, :checked).
• Structural pseudo-class selectors target elements based on specialized
information within the DOM that simple selectors cannot target. This
can be pattern-matching, child-to-parent relationships, or other
structural information. (Example: nth child selector)
• Other pseudo-class selectors exist that can’t really be grouped into any
one category. These selectors give you even more specific targeting
capabilities based on things like language or URL targeting.
• Please Read:
[Link]
CSS Selectors
> Pseudo-Class Selectors
• Is used to define a special state of an element
• Can be used to style an element when a user mouse hovers over it, visited
and unvisited links and getting focus.
• Pseudo-class selectors consists of a colon (:) followed by the selector.
:hover pseudo-class selector
• Usually they are preceded by the element you wish to target based on its
state.
a:hover targeted pseudo-class selector
• And can be combined with other simple selectors as well.
ul a:hover descendent selector with a pseudo-class
selector
CSS Selectors
> Dynamic PC Selectors
• a:link :- targets all links on the page. (Any link with an href attribute)
• a:visited :- targets all links with an address that the user already visited
• a:hover :- targets all links that is currently hovered over
• a:active :- targets all links that are either in focus or currently being clicked
on.
• The order is very important. If you put the visited styling after the hover
styling, then the visited styling will override the hover style.
• Developers usually group the link and visited styles together and the hover
and active styles together.
• a:target :- has more to do with the URL than the actual page itself. If a URL
is set to focus to a specific section (link) on the page, the style is applied.
CSS Selectors
> Dynamic PC Selectors
CSS Selectors
> Dynamic PC Selectors

• URL without fragment ([Link]

• URL with fragment ([Link]

[Link]#section1)
 CSS Selectors
> Structural PC Selectors
• Allow you to target elements based on more complex
patterns with in the DOM.
• Example: target an element with a condition whether or not it is the
first child of an element, or whether it is the only child of it and
other factors.
• first-child

• Find every span in the document and if it’s the first child of its
parent element go ahead and give it the styling.
 CSS Selectors
> Structural PC Selectors
• first-of-type

• Find every h2 in the document and if it’s the first h2 child of its
parent element go ahead and give it the styling.
• only-child

• Whenever you find a paragraph, and that paragraph is the only child
inside of a parent go ahead and give that styling.
CSS Selectors
> Structural PC Selectors
• First-child
• last-child
• First-of-type
• last-of-type
• Only-child
• only-of-type
CSS Selectors
> Structural PC Selectors
• Of all the structural pseudo-class selectors :nth-child() pseudo-class
selector is the most complex of them all.
• nth-child selectors allow us to target elements based on patterns that
describes which elements within a parent you should target.
• We have four flavors of nth-child selectors.
• nth-child()
• nth-of-type()
• nth-last-child()
• nth-last-of-type()
CSS Selectors
> Structural PC Selectors
• nth-child(2)
CSS Selectors
> Structural PC Selectors
• nth-child(2n)
• n is a grouping element
• On the above element, target every second element
CSS Selectors
> Structural PC Selectors
• nth-child(odd)
• Instead of grouping, one can use keywords
• even is also another keyword
CSS Selectors
> Structural PC Selectors

• nth-child(2n+1)
• The 1 is called offset (beginning with this one)
CSS Selectors
> Structural PC Selectors
• nth-child(-2n+8)
nth-child(5n-1)
CSS Selectors
> Pseudo-elements
• Pseudo-elements are similar to pseudo-classes in many ways as they
allow you to access content beyond the normal capabilities of the
DOM.
• For Example: Using pseudo-element selectors you could target the first line or
first letter of an element.
• Pseudo-element selectors also allow us to create what is know as
generated content.
• That is actually place content on the page that is not contained in the
structure of the document.
CSS Selectors
> Pseudo-elements
• p::first-line (written like p:first-line in CSS 2)
CSS Selectors
> Pseudo-elements
• p::first-letter
CSS Selectors
> Pseudo-elements
• Generated content allows us to place content on the page.
• :before and :after
• Doesn’t show up on the DOM tree
• In order to work with :before and :after, we use content attribute.
• Content can be: string (Text content), u, counters(chapters), open-quote and
close-quote, and attr(x).
CSS Selectors
> Pseudo-elements
 CONFLICT IN CSS

1. The Cascade
2. Inheritance
3. Specificity
Conflict in CSS
• Unless every page you create only holds a single paragraph, you’re
eventually going to have to deal with styles that conflict with one
another.
• Anytime you have multiple rules that target the same element you
have conflicting styles.
Conflict in CSS
• It is not always easy to catch conflicting styles.
Conflict in CSS
• When the properties conflict the properties of one rule will replace
the other.
• If they don’t conflict with one another, the properties are added and
the rules are cumulative leaving you with a mixture of the two rules.
• What determines which properties are used in the event of a
conflict? That is driven by three principles.
• The Cascade
• Inheritance
• Specificity
 The Cascade

• The cascade can be summed up as, the

last rule applied wins.
• Styles are applied in the order they are found,
and in the event of a conflict the style that
comes last is the one that is used.
CSS Rules Overriding

created by zelalem Abera-HilCoe-Web - Technology 35

 The Cascade
> Example
•
[Link]
 The Cascade
> Example…
•
[Link]
 The Cascade
> Example…
•
[Link]
 The Cascade
> Example…
•
[Link]
Inheritance
• The process by which properties are passed from parent to child elements
without explicit definition.
• Allows elements to “inherit” styles from parent elements.
• Helpful in reducing the amount of CSS to set styles for child elements.
• Unless a more specific style is set on a child element, the element looks to
the parent element for its styles.
• Styles that relate to text and appearance are inherited by the descendant
elements.
• Styles that relate to the appearance of boxes created by styling DIVs,
paragraphs, and other elements, such as borders, padding, margins are
not inherited.
 Inheritance

• What if you want to apply

Arial font for all of your
elements in a given HTML
document. You just have
to apply the font to the
body element as shown
on the figure.
• In the event of a conflict,
child element styles will
override parent element
styles
Inheritance
> Example
 Inheritance
> Example…
• Not every property
inherits.
• When they have a
property applied to them
that conflicts with the
parent element, the child
element’s property wins.
• Browsers and User Agents
have default style sheets.
Inheritance
> Example…
• Cumulative Effect
 Inheritance
> Example…
• Property of the paragraph
are going to override any
properties of a parent
element that conflict with
it.
Working with Inheritance
• As sties become more complex, inheritance become more difficult to
track.
• Keeping styles organized will help you avoid conflicts caused by
inheritance.
• Placing your most basic, default styles on top-level elements is an
efficient way to style elements site-wide.
• Remember that styles are cumulative; you must account for
formatting inherited through parent elements.
Specificity
• Most of the time the cascade or inheritance can be counted on to
resolve styling conflicts. However, there is a third concept. Specificity
that can come into play as well.
• The specificity of a selector is, how specific is it?
• In the event of a conflict between two selectors that inheritance can
not solve the specificity of the selector is used to determine which
selector has precedence.
Quiz:-Show at least 9 ways to target the
<h1> element

Example:-
H1{
Color:red
}
Specificity
• classes: Classes, Attributes, and Pseudo-classes
• elements: Element Types and Pseudo-elements
 Specificity
> Example
• We have 101 and 1, the
101 always wins
Specificity
> Example
• Programmers go crazy about this one.
• This is not working because there is a selector elsewhere with a
higher degree of specificity than the one you are trying to use.
• .green has a specificity of 10 and #mainContent p has a specificity of 101.
Specificity
> Example
• In this case, we know .green has a specificity of 10, which shouldn’t
override #mainContent p that has a specificity of 101.
• Specificity works just fine until inheritance is involved.
• The strong element is nested inside the section and a paragraph. We
know from inheritance that those properties like color will inherit.
But, if a child element has a style that differs or conflicts with the
parent styles, the child styles always wins. In this case we are seeing
inheritance and not specificity.
Specificity
> Example
• .green has a specificity of 10
• strong has a specificity of 1
• .green wins.
Specificity
> Example
• .green has a specificity of 10
• [Link] has a specificity of 11
• [Link] wins.
Specificity
• Remember
• You always have to keep track how specific a rule is to know if you need
something a little bit more specific to override something.
• You want to try to keep the specificity of your rules as low as possible. They
are easier to parse that way, and they are also a lot easier to override later
on.
• And semantic naming matters. (a class named green, but it sets its color to
purple)
• Please go ahead and visit the following link and play with specificity
• [Link]
Important
• In addition to the cascade, inheritance and specificity there is one
more CSS technique that can be used to resolve conflicts and that is
the important declaration.
• It doesn’t matter what else is going on in your styles, in the event of a
conflict, the important declaration wins.
• The only thing that can override an important declaration is another more
specific important declaration or some kind of user controlled stylesheet.
• Don’t use important declaration unless it is absolutely necessary.
• Example: color: blue !important;
Important
> Example
• In the following case regardless of the cascade, specificity or inline
style the important declaration wins.
Resolving Conflicts Through Planning
> General Guidelines
• Avoid using local styles when possible.
• They add unwarranted extra layer of complexity to a site.
• Updating or modifying styles can become a chore.
• Local styles are easy to miss, especially in a team environment.
• Do not use inline styles except for very specific circumstances.
• They are almost impossible to detect and maintain.
Resolving Conflicts Through Planning
> Develop a Strategy for Specificity
• Don’t mix class and ID selectors without having a plan that guides
when they are to be used.
• Sections of ID selectors can be hard to override later if not accounted
for.
• Rule of Thumb: If you find yourself writing descendent selectors with
three or more selectors, consider revising your strategy.
Resolving Conflicts Through Planning
> Use Inheritance to your Advantage
• If you are familiar with your page structure, you should be able to
identify global formatting across your site.
• Those formatting needs can then be written as global styles on parent
elements, and inherited by the rest of the site.
• This results in fewer rules to write and easier styles to maintain.
Resolving Conflicts Through Planning
> Think about How Styles Relate to One Another
• New designers often make the mistake of styling each element
individually, as it’s encountered.
• This can lead to bloated style sheets and hard to maintain styles.
• Thinking of styles as related formatting allows you to plan and write
organized style sheets.
Example of Good Planning
Example of Good Planning. Separate .css file for different font
family,animations…
DIMENSIONS

• Height
• Width
• Max-width
CSS Dimension Properties
• The CSS dimension properties allow you to control the height and
width of an element.
• We can use the height and width properties.

section {
width: 500px;
height: 100px;
border: 3px solid #73AD21;
}
width and max-width
• A block-level element always takes up the full
width available (stretches out to the left and
right as far as it can)
• Setting the width of a block-level element will
prevent it from stretching out to the edges of its
container.
• Note: The problem with giving a width to an
element is when the browser window is smaller
than the width of the element. The browser
then adds a horizontal scrollbar to the page.
• The solution is using max-width property
• It will improve the browser's handling of small
windows. This is important when making a site
usable on small devices.
 CSS UNITS

• Relative
• Absolute
CSS Units
• CSS has several different units for expressing a length.
• Many CSS properties take "length" values, such as width, margin,
padding, font-size, border-width, etc.
• Length is a number followed by a length unit, such as 10px, 2em, etc.
• A whitespace cannot appear between the number and the unit.
However, if the value is 0, the unit can be omitted.
• For some CSS properties, negative lengths are allowed.
• There are two types of length units:
• Relative
• Absolute
CSS Units…
• Absolute Values: The absolute length units are fixed and a length
expressed in any of these will appear as exactly that size.
• in (inches), cm (centimeters), mm (millimeters), pt (points), pc (picas), px
(pixels),
• Not good for small screen devices
• Relative Values: Relative length units specify a length relative to
another length property. Relative length units scales better between
different rendering mediums.
• em (ems), ex (exes), gd (grids), rem (root ems), vw (viewport width), vh
(viewport height), vm (viewport minimum), ch (character)
• Well suited for devices like screens
 CSS Units

• Pixels

• EMS: when used with font-size,

1em is equal to the default font
size for the device.
CSS Units
CSS Units
• Percentages: percentage values are calculated relative to their
parent element. A div with a width of 80% would use 80% of its
parent element, while a paragraph with its font-size set to 80% would
size the text at 80% of the size of its parent text.
• Important for fluid layouts
CSS Values
• Words:- text-align: center
• Numerical Values:- Numerical values are usually followed by a unit
type.
• font-size: 12px;
• 12 is the numerical value and px is the unit type pixels.
• Two types of numerical values
• Absolute Values: in, pc, px, cm, mm, pt
• Relative Values: em, ex, %
• Color Values: color: #rrggbb / #rgb (HEX) or colorname (red, blue,
yellow, etc) or rgb (x, x, x)
Exercise
• Create a div element with a red background color and 50 vmin and
vmax width & height.
 TOPOGRAPHY
PROPERTIES
• CSS Fonts
• CSS Texts
• CSS Background
Typography Properties
> font-family
• We can either use
• System fonts:- common fonts shipped with most operating systems.
• Arial, Helvetica, Verdana, Georgia, Times New Roman, and others.
• Saves overhead and allow you to relay on fonts that have a long and solid track record.
• Web fonts:- allow designers to use the @font-face inline rule to define a font-
family to use within the page
• The font is an external resource that the browser then requests and uses on the page.
• designer either host the font themselves, or use one of the many font hosting services
available.
Typography Properties
> font-family: System Fonts
• Multiple fonts can be defined on a font-family property separated by
a comma creating a font stack.
• font-family: Arial, Helvetica, sans-serif;
• We are defining some kind of a fallback mechanism.
• Fonts have categories (generic font family) and we can use the
generic name in the font-family, so that the browser picks the
operating system’s default font for the family.
• Example: serif, san-serif, monospace, cursive, fantasy
• Whenever you have a font name which has multiple word in it with
white spaces, it is best to go ahead and put it in a double quote.
• Example: Georgia, Times, “Times New Roman”, serif
 Typography Properties
> font-family: Web Fonts
• Web fonts allows
designers to use
the inline @font-
face rule to define
an external font as
a font-family to use
within the page.
• The font
referenced is an
external resource
that the browser
then request and
uses on the page.
Typography Properties
> font-family: Different Font Formats
Typography Properties
> font-family: Web Fonts
• @font-face properties
• font-family: The name you want your font to be referred with
• src: web path to the font (url) and format of the font.
• font-weight: normal or bold
• font-style: normal or italic
• Multiple entries for same font family can be added.
• When adding multiple entries, we shall add in order of normal, normal;
normal, italic; bold, normal; bold, italic for the font-weight and font-style.
• To read about fonts
• [Link] [Link]
Typography Properties
> font-size
• To control the size of your font you use the property named font-size.
• We can set it in
• pixel
• Reserved Keywords: (xx-small, x-small, small, medium, large, x-large, xx-large)
• Don’t expect them to be the same size on all browsers.
• em: (relative value – calculated based on the parent element)
• 1.8em: Give me 1.8 larger than the default value
• 1em: Give me the default value
• %: (relative value – calculated based on the parent element)
• Default browsers font size is 16px.
Typography Properties
> font-size
 Typography Properties
> font-style and font-weight
• You can control the weight of text by
using the font-weight property, while the
font-style property allows you to italicize
text.
• font-style values
• italic, normal, inherit, oblique (skew)
• font-weight values
• Numeric values (100 – 900 [The darkness value of
the font from the lighter to the bolder])
• Keyword values (bold, bolder, lighter, normal (no
longer bolded), inherit)
 Typography Properties
> text-transform
• You can’t always control how text is entered or
formatted in your site.
• Example: Content Management System (text from a
database)
Every item on a list should be
capitalized
• Using the text-transform property, you can
control which case is used for the characters
within an element.
• text-transform values
• capitalize, inherit, lowercase, none (undo any
transformation you have done in a previous style),
uppercase
 Typography Properties
> font-variant
• The font-variant property allows us to specify
small caps for our text. If the font in use has a
defined set of small caps, they will be used. If
not, the browser will scale the fonts to
achieve the small caps look. This will
occasionally cause font weight issues,
especially at smaller sizes, so use with
caution.
• font-variant values
• normal (override any small-caps usage), small-
caps
 Typography Properties
> text-decoration
• Using the text-decoration property, you can
add special effects or formatting options to
text.
• This can help you control whether text is
underlined or strike through.
• text-decoration values (we can combine
them)
• line-through, underline, overline, none
 Typography Properties
> background-color and color
• Designers can set color for text
using two basic properties:
• the background-color property and
• the color property (define the content
color).
• These can be combined to produce
a variety of effects.
 Typography Properties
> Shorthand Notations
• Some of the syntax options in CSS don’t really give you any
additional functionality. They are just designed to save you
time.
• Shorthand notations are designed to do just that.
• The font short hand notation allows us to define font
families, font size, font style, font weight, font variant and
line height all in one property.
• font Syntax
• font: normal normal normal 100%/1.5 Georgia, “Times New
Roman”, Times, serif;
font-weight font-style font-variant font-size/line-height
font-family
Typography Properties
> Shorthand Notations
Typography Properties
> Shorthand Notations
• Whenever you do font shorthand notation, you have to pass in at
least two things. That would be the size of the font and the family of
the font and the need to be done in that order.
• font: 100% Georgia, “Times New Roman”, Times, serif;
font-size font-family
• font: 100%/1.5 Georgia, “Times New Roman”, Times, serif;
font-size/line-height font-family
• Be carful when you use the minimalist approach. Because normal is
going to be passed and may cause unintended style to be achieved.
Typography Properties
> Shorthand Notations

• You don’t have to pass all three of them. You can simply pass bold for
font-weight, or small-caps for font-variant or italic for font-style.
Typography Properties
> Shorthand Notations
• Shorthand notations also take some special keywords.
• You can use a set of optional keywords which instructs the user agent to use
the font formatting used by those system fonts. This is especially useful when
creating applications or UI widgets. Example: status-bar, small-caption,
message-box, menu, icon, caption
Typography Properties
> text-align
• To control text alignment with CSS we use the text-align property.
• For the most part, text alignment is pretty straightforward. You set
alignment through the text-align property, which accepts the left,
right, center, justify, or inherit values.
Typography Properties
> text-align
Typography Properties
> letter-spacing and word-spacing
• CSS gives you control over word and letter spacing through the word-
spacing and letter-spacing properties.
• -ve value is also possible
Typography Properties
> text-indent
• CSS allows you to control the indenting of text through the text-
indent property. This will indent the first line of text in any element
that it is applied to. You can also apply negative values to the property
as well.
• Negative values can often help you create what is known as hanging
punctuation.
 Typography Properties
> text-indent

• The text in the quote looks

indented even when it is not.
Typography Properties
> text-indent
Typography Properties
> text-indent
Typography Properties
> line spacing (line-height)
• Leading, or line spacing, is controlled in CSS through the line-height
property.
• You can use any unit of measurement with line-height, and it is
unique in that it allows you to use a “multiple” value as well.
• Multiples are a single number with no unit of measurement specified, the
number simply acts as a multiple of the current element's font-size.
• normal is the default value for line-height.
• If you think about inheriting line-height property from parent
elements, use Multiples instead of using a value with a unit of
measurement.
Typography Properties
> line spacing (line-height)
• All this result in the same line height for a given paragraph.

• We can use line-height to vertically center a text.

• If you haven’t specified the height of an element its line height is going to
generate the height for you.
• If you have a single line of text, that means the line-height becomes the
height of that entire element.
Use Css Topography Properties
List of all text properties
CSS BACKGROUNDS
background
• The background property allows you to control how the background
of an element displays.
• Backgrounds go all the way up to the beginning edge of the border of
an element. So, any padding will be considered as part of the
background.
• Example:
• background-color: yellow;
• Background: yellow;
 background-image
• Syntax:
• background-image: url(‘pathtoyourimage’);

• By default background images are

tiled/repeated.
• We can change that by using the
background-repeat property.
• background-repeat: repeat;
• background-repeat: repeat-x; /* specific axis */
• background-repeat: no-repeat;
background-position
• Syntax:
• background-position: horizontalvalue verticalvalue;
• Keywords: (center is always assumed if no value is passed)
• Horizontalvalue: left center right
• Verticalvalue: top center bottom
background-position (percentage values)
• Corresponding percentage points are mapped on both the
background image and the element. The points are then aligned to
determine the background image’s position.
Background Shorthand
• Shorthand Notation Syntax:
• background: color url background-repeat background-position;
 THE BOX MODEL

• Margin
• Padding
• Border
• Content
The Box Model
> Styling Container Elements
• The box model is a term used to describe
the rules and properties surrounding the
physical properties of all HTML elements
on the page.
• All elements on your webpage are considered
to be a rectangular box. The properties of this
box, its width, height, padding and margin
define not only the size of the element but
how it relates to the elements around it.
Without these properties we wouldn’t be
able to control layout at all.
The Box-Model
> Border
• Three different ways you can apply borders in terms of
syntax.
• Border Syntax:
• /* Verbose */ 12 times
• border-top-width: width;
• border-top-color: color;
• border-top-style: style;
• /* Directional Shorthand Notation */ 4 times
• border-top: width style color;
• /* Uniform Shorthand Notation */ 1 time
• border: width style color;
The Box-Model
> Border
• Example:
• border-top-width: 1px;
• border-top-color: #000;
• border-top-style: solid;

• border-top: 1px solid #000;

• border: 1px solid #000;

 The Box-Model
> Border
• Different border styles
example
• Use a higher value (>=
3px) for double,
groove, ridge, inset,
outset
The Box-Model
> rounded-corners
• You can create rounded corners by using the border-radius property.
• border-radius Syntax
• border-radius: allsides;
border-radius:50px:
• border-radius: topleftandbottomright bottomleftandtopright;
border-radius: 15px 50px
• border-radius: topleft bottomleftandtopright bottomright;
border-radius: 15px 50px 30px:
• border-radius: topleft topright bottomright bottomleft;
border-radius: 15px 50px 30px 5px

• border-top-left-radius: value;
• border-radius: horizontalradius/verticalradius;
The Box-Model
> rounded-corners
The Box Model
> margin (element-spacing)
• Margins help us control the spacing between elements and can be
specified individually for the top, right, bottom and left sides of an
element.
• Syntax:
• margin-top: value;
• Auto margins example:
• .four p { width: 80%; margin-right: auto; margin-left: auto; }
• Centers the paragraph horizontally
• Auto: it takes whatever is left over from the width of an element and go
ahead and apply the margin to that.
The Box-Model
> Padding
• The space inside an element is controlled through three properties.
• Width
• Height
• Padding
• Padding is the space between an element content and the inside
edge of its border.
• Primarily used to keep content away from its edge.
• Example:
• padding-left: 50px;
• Padding has a cumulative effect on the total height and width of an
element.
The Box-Model
> Short Hand (Margins and Padding)
• Short Hand Syntax: (works for both margin or padding)
• margin: top right bottom left;
• padding: top leftandright bottom;
• margin: topbottom leftright;
• padding: allsides;
• Example:
• margin: 10px 15px 20px 30px;
• padding: 10px 20px 15px;
• margin: 10px 30px;
• padding: 30px;
The Box-Model
> Element Sizing
• Width of an element is the summation (cumulative) of the width,
padding and margin values.
• The width property is a content width.
• If no height is defined, the height of the elements will be calculated
based on borders, padding, and content. Margins are used in
calculating overall width and height, but are not actually considered
part of the container width and height and are the first to be
sacrificed if the element's width and height no longer fits within the
parent.
• Account all properties when designing a box to fit.
Use Padding to position Div content
What's the full width and height of the ff Div

Div
{
Width:100px;
Height:200px;
Padding:10px;
Margin:10px;
Border:10px solid red;

}
IMAGES, LISTS, TABLES &
FORMS
Images
• CSS plays a good role to control image display. You can set the following
image
properties using CSS.
The border property is used to set the width of an image border.
The height property is used to set the height of an image.
The width property is used to set the width of an image.

• img {
max-width: 100%;
height: auto;
}
• Note:-You can create a responsive image by using max-width property
Images(Rounded Images)
• Use the Border-radius property to create rounded images.
• img {
• border-radius: 50%;
•}
Image Opacity / Transparency

• Creating transparent images with CSS is easy.

• The CSS Opacity property is a part of the CSS3 recommendation.
• img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
You can use the filter property to create a black and white
image.
LISTS

created by zelalem Abera-HilCoe-Web - Technology 18

The list-style-type Property

created by zelalem Abera-HilCoe-Web - Technology 19

The list-style-type Property

list-style-type: katakana;

created by zelalem Abera-HilCoe-Web - Technology 20

Table Borders

• To specify table borders in CSS, use the border property.

• The example below specifies a black border for table, th, and td
elements:
table, th, td
{
border: 1px solid black;
}

created by zelalem Abera-HilCoe-Web - Technology 23

Table Width and Height

• Width and height of a table is defined by the width and height properties.
• The example below sets the width of the table to 100%, and the height of
the th elements to 50px:
table
{
width:100%;
}
th
{
height:50px;
}
created by zelalem Abera-HilCoe-Web - Technology 24
Table Text Alignment

• The text in a table is aligned with the text-align and vertical-align

properties.
• The text-align property sets the horizontal alignment, like left, right, or
center:
• td
{
text-align:right;
}
• td
{
height:50px;
vertical-align:bottom;
}

created by zelalem Abera-HilCoe-Web - Technology 25

Table Padding

• To control the space between the border and content in a table, use
the padding property on td and th elements:
• td
{
padding:15px;
}

created by zelalem Abera-HilCoe-Web - Technology 26

Table Color

• The example below specifies the color of the borders, and the text
and background color of th elements:

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
tr:nth-child(even){background-color: #f2f2f2}

27
Table Collapse

• The border-collapse property sets whether the table borders should

be collapsed into a single border:

table {
border-collapse: collapse;
}
}

28
Responsive Table
• Add a container element (like <div>) with overflow-x:auto around
the <table> element to make it responsive:
• <div style="overflow-x:auto;">
Forms
Styling Input Fields
• input {
width: 100%;
}
• If you only want to style a specific input type, you can use attribute
selectors:-
• input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box; border: 2px solid red;
border-radius: 4px; background-color: #3CBC8D;
}
 CSS LAYOUT
• Display
• Width max-width
• Position
• Overflow
• Float and clear
• Inline-block
• Horizontal and vertical align
Display
• A block-level element always starts on a new line and takes up the full
width available (stretches out to the left and right as far as it can).
<div> <h1> - <h6> <p> <form><header> <footer> <section>
• An inline element does not start on a new line and only takes up as
much width as necessary. <span><a><img>
CSS Display and Visibility

HIDING AN ELEMENT
DISPLAY:NONE OR VISIBILITY:HIDDEN
[Link] { [Link] {

visibility: hidden; display: none;

} }

Changing How an Element is Displayed

li { span {
display: inline; display: block;
} }

33
Position
• The position property specifies the type of positioning method used for an
element (static, absolute, relative or fixed)
• Static is the default value.
• IE7 and IE8 support the fixed value only if a !DOCTYPE is specified.
• Syntax
• position: static|absolute|fixed|relative|initial|inherit;
• static The default position in the page flow
• relative Relative to its normal position in the flow
• absolute Relative to its containing block (the first ancestor that is not
static)
• fixed Relative to the browser windows (regardless of scrolling)
Position
Position
• Boxes are positioned in three dimensions
• To change the stack level, use z-index (default value is 0)
Use Relative & absolute position
Overflow
• The overflow property specifies what happens if content
overflows an element's box
• The default value is visible

overflow: visible|hidden|scroll|auto|initial|inherit;
 Floating
• A floated element is one whose float
property has the value right or left (the
default is none)
• The float property, in its simplest use,
can be used to wrap text around
images.
• Floating an element converts it to a
block.
• A floated box is shifted to the left or
right as far as possible.
• A floated box must have an explicit
width. Otherwise, the results can be
unpredictable.
Use float
Clear
• The clear property is used to control the behavior of floating
elements.
• Elements after a floating element will flow around it. To avoid this,
use the clear property.
• The clear property specifies on which sides of an element floating
elements are not allowed to float;
• Syntax:
• clear: left|right|both;
• Reading Assignment (Clear and Float with page layout)
• [Link]
The inline-block Value

• It has been possible for a long time to create a grid of boxes that fills the browser
width and wraps nicely (when the browser is resized), by using the float property.
• we also need to specify a clear property for the element after the floating boxes.
• However, the inline-block value of the display property makes this even easier.
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21; }
Align
.center {
margin: auto;
• Center Align - Using margin width: 60%;
border: 3px solid
• No effect if width property is not set (or set to 100%).
#73AD21;
padding: 10px;
• Left and Right Align - Using position }

• One method for aligning elements is to use Position-absolute

• can overlap elements.
• When aligning elements with position always define margin .right {
& padding for the body element position: absolute;
right: 0px;
!DOCTYPE declaration when using Position element width: 300px;
border: 3px solid
#73AD21;
padding: 10px;
}
Align
• Left and Right Align - Using float
• Another method for aligning elements is to use the float property
• When aligning elements with position always define margin
body {
& padding for the body element margin: 0;
padding: 0;
}

.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
WORKING WITH COLORS
Working with Colors
> Keywords
• Color Keywords: To declare basic color values, you can use one of
over 140 reserved color keywords.
• Example: black, gray, maroon, olive, fuchsia, saddlebrown, slategray
• You may learn more about them at [Link]
 Working with Colors
> Hexadecimal

• Hexadecimal Notation: uses

number/character value pairs to
represent RBG values.
• You may have to use color palate.
• is really nothing more than number character
pairs that range 0 to F that are then used to
represent RGB values.
• It can be represented as 6 characters or, if the
pairs match, a three digit shorthand version.
• Sample: #ab19ef
• Example: #000000 (black), #ffffff (white)
• Short Hand example: #336633 -> #363,
#ffaacc -> #fac
 Working with Colors
> RGB
• RGB Color: No matter how you define your
color in CSS chances are its being displayed
using RGB.
• RGB stands for red, green and blue and it is
the primary color used by screen devices.
• RGB is an additive color method, featuring a
mixture of red, green and blue values that
range between 0 and 255.
• If all three are set to 255, you get white
• If all three are set to 0, you get black
• CSS offer support for RGB values through
two forms of syntaxes.
Working with Colors
> RGB
• Two forms of syntax:
• Using color ranges of 0 – 255 for each color value => rgb(x, y, z)
• As a percentage between 0 – 100% for each value => rgb(x%, y%, z%)
• Browsers allow you to mix percentages and absolute values, but it is
not recommended because all browsers doesn’t have an
implementation.
• Example:
• color: rgb(125, 244, 15)
• background: rgb(45%, 70%, 20%)
 Working with Colors
> HSL (Hue, Saturation and Lightness)
• A color’s hue is represented as an angle on
the color wheel which ranges from 0 to 360.
• Red is on 0 and 360
• Green is on 120
• Blue is on 240
• And all other colors are found between those
values.
• Saturation represents the amount of color,
how much color a particular shade has. (How
saturated?)
• 100% fully saturated
• And 0% being gray scale
Working with Colors
> HSL (Hue, Saturation and Lightness)
• Lightness is how dark or bright the color is and just like saturation, it
is defined using a percentage.
• 100% very bright (white)
• And 0% being black
• Syntax: hsl(hue, saturation%, lightness%)
• Example:
• bacground: hsl(240, 100%, 85%); bacground: hsl(120, 100%, 85%);
• bacground: hsl(60, 100%, 85%); bacground: hsl(15, 100%, 85%);
• color: hsl(20, 100%, 100%) – The hue doesn’t matter if both saturation and
lightness are 100% or 0%
Transparency of an element
> Opacity syntax and RGBA and HSLA syntax
• CSS gives us a couple of different ways to set the transparency of an
element.
• opacity: describes how opaque or transparent an element is and it is
based on values from 0 to 1.
• Example: opacity: 0; (transparent)
opacity: 1; (opaque)
opacity: 0.5 (semi-transparent)
opacity: 0.25 (very transparent)

• You can only define the opacity of an entire element. It is sort of all or
nothing type.
Transparency of an element
> Opacity syntax and RGBA and HSLA syntax
• RGBA and HSLA: This technique involves passing an alpha value
through a regular RGB or HSL color definition.
• Flexible (Border, text, and background color)
• You can then define the transparency either the foreground color, background
color or border color.
• This method only allows to set alpha values to colors but not to background
images.
• Example:
• background: rgba(102, 0, 0, .2);
• background: hsla(65, 80%, 50%, .6)
> Drop Shadows
• In CSS for drop shadows, you have two options.
• Box Shadows are going to be applied to the containing box of an element.
• Text Shadows should be limited to be used on text.
• Box Shadow Example:
• box-shadow: vertical length, horizontal length, blur radius (how blur do you
want this), spread (how far do you want it to fade out), color
• box-shadow: 10px 10px 5px 5px rgba(0, 0, 0, .7);
• Text Shadow Example:
• text-shadow: vertical length, horizontal length, blur radius, color
• text-shadow: 10px 10px 5px rgba(0, 0, 0 .7);
Reading Assignment
• CSS3 2D Transforms
• CSS3 3D Transforms
• CSS3 Animations
Flexbox
CSS3 Flexbox

Flexible boxes, or flexbox, is a new layout mode in

CSS3
Use of flexbox ensures that elements behave
predictably when the page layout must accommodate
different screen sizes and different display devices
For many applications, the flexible box model provides
an improvement over the block model in that it does
not use floats, nor do the flex container's margins
collapse with the margins of its contents
CSS3 Flexbox - Concepts

Flexbox consists of flex containers and flex items

A flex container is declared by setting the display

property of an element to either flex (rendered as a
block) or inline-flex (rendered as inline)

Inside a flex container there is one or more flex items

CSS3 Flexbox - Concepts

Note: Everything outside a flex container and inside a

flex item is rendered as usual
Flexbox defines how flex items are laid out inside a flex
container
Flex items are positioned inside a flex container along a
flex line
By default there is only one flex line per flex container
CSS3 Flexbox - Concepts Cross Axis

Flex Container

Main Axis
CSS3 Flexbox - Concepts Cross Axis

Flex Container

Flex Item Flex Item Flex Item

Main Axis
 Why do we need
this?
CSS3 Flexbox - Code

CSS:
CSS3 Flexbox - Code

HTML:
CSS3 Flexbox - Code

Result:
CSS3 Flexbox - Code

It is also possible to change

the direction of the flex line

If we set the direction

property to rtl (right-to-left),
the text is drawn right to
left, and also the flex line
changes direction, which will
change the page layout
CSS3 Flexbox - Code

Result:
CSS3 Flexbox - Flex Direction

The flex-direction property specifies the direction of the

flexible items inside the flex container. The default value of
flex-direction is row (left-to-right, top-to-bottom)

The other values are as follows:

row-reverse - If the writing-mode (direction) is left
to right, the flex items will be laid out right to left
column - If the writing system is horizontal, the flex
items will be laid out vertically
column-reverse - Same as column, but reversed
CSS3 Flexbox - Flex Direction

Example:
(Row-reverse)
CSS3 Flexbox - Flex Direction

Example:
CSS3 Flexbox - Flex Direction

Example:
(Column)
CSS3 Flexbox - Flex Direction

Example:
CSS3 Flexbox - Flex Direction

Example:
(Column-
reverse)
CSS3 Flexbox - Flex Direction

Example:
justify-content Property

The justify-content property horizontally aligns the flexible

container's items when the items do not use all available space
on the main-axis
The possible values are as follows:
flex-start - Default value. Items are positioned at the
beginning of the container
flex-end - Items are positioned at the end of the container
center - Items are positioned at the center of the container
space-between - Items are positioned with space between
the lines
space-around - Items are positioned with space before,
between, and after the lines
justify-content Property

Example:
(Flex-end)
justify-content Property

Example
(Flex-end):
justify-content Property

Example:
(center)
justify-content Property

Example:
(center)
justify-content Property

Example:
(space-
between)
justify-content Property

Example:
(space-
between)
align-items Property

The align-items property vertically aligns the flexible

container's items when the items do not use all available space
on the cross-axis
The possible values are as follows:
stretch - Default value. Items are stretched to fit the container
flex-start - Items are positioned at the top of the container
flex-end - Items are positioned at the bottom of the container
center - Items are positioned at the center of the container
(vertically)
baseline - Items are positioned at the baseline of the container
align-items Property

Example:
(Stretch)
align-items Property

Example:
(Stretch)
align-items Property

Example:
(Flex-start)
align-items Property

Example:
(Flex-start)
align-items Property

Example:
(Flex-end)
align-items Property

Example:
(Flex-end)
align-items Property

Example:
(Center)
align-items Property

Example:
(Center)
align-items Property

Example:
(Baseline)
align-items Property

Example:
(Baseline)
flex-wrap Property

The flex-wrap property specifies whether the flex items

should wrap or not, if there is not enough room for them on
one flex line
The possible values are as follows:
nowrap - Default value. The flexible items will not
wrap
wrap - The flexible items will wrap if necessary
wrap-reverse - The flexible items will wrap, if
necessary, in reverse order
flex-wrap Property

Example:
(Nowrap)
flex-wrap Property

Example:
(Nowrap)
flex-wrap Property

Example:
(Wrap)
flex-wrap Property

Example:
(wrap)
align-content Property
The align-content property modifies the behavior of the
flex-wrap property. It is similar to align-items, but instead of
aligning flex items, it aligns flex lines
The possible values are as follows:
stretch - Default value. Lines stretch to take up the
remaining space
flex-start - Lines are packed toward the start of the
flex container
flex-end - Lines are packed toward the end of the flex
container
align-content Property
The align-content property modifies the behavior of the
flex-wrap property. It is similar to align-items, but instead of
aligning flex items, it aligns flex lines
The possible values are as follows:
center - Lines are packed toward the center of the flex
container
space-between - Lines are evenly distributed in the
flex container
space-around - Lines are evenly distributed in the flex
container, with half-size spaces on either end
align-content Property

Example:
(Center)
align-content Property

Example:
(Center)
align-content Property

Example:
(Flex-end)
align-content Property

Example:
(Flex-end)
Flex Item Properties - Ordering

The order property specifies the order of a flexible item

relative to the rest of the flexible items inside the same
container
Flex Item Properties - Ordering

Example:
(Ordering)
Item Properties - Ordering
Example:
(Ordering)
Flex Item Properties - Margin

Setting margin: auto; will absorb extra space

It can be used to push flex items into different positions
Flex Item Properties - Margin

Example:
(Margin)
Flex Item Properties - Margin

Example:
(Margin)
Flex Item Properties - Perfect Centering

Setting margin: auto; will make the item perfectly

centered in both axis
Flex Item Properties - Margin

Example:
(Margin)
Flex Item Properties - Margin

Example:
(Margin)
Flex Item Properties - Align Self

The align-self property of flex items overrides the

flex container's align-items property for that item
It has the same possible values as the align-items
property
Flex Item Properties -
Align Self
Example:
(Align self)
Flex Item Properties - Align Self

Example:
(Align self)
Flex Item Properties - Flex

The flex property specifies the length of the flex item,

relative to the rest of the flex items inside the same
container
Flex Item Properties - Flex

Example:
(Flex)
Flex Item Properties - Flex

Example:
(Flex)
CSS3 Flexbox Properties
Property Description
display Specifies the type of box used for an HTML element
flex-direction Specifies the direction of the flexible items inside a flex container
justify-content Horizontally aligns the flex items when the items do not use all available space on the
main-axis
align-items Vertically aligns the flex items when the items do not use all available space on the
cross-axis
flex-wrap Specifies whether the flex items should wrap or not, if there is not enough room for
them on one flex line
align-content Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead
of aligning flex items, it aligns flex lines
flex-flow A shorthand property for flex-direction and flex-wrap
order Specifies the order of a flexible item relative to the rest of the flex items inside the
same container
align-self Used on flex items. Overrides the container's align-items property
flex Specifies the length of a flex item, relative to the rest of the flex items inside the same
container
Sources

[Link]
 Copyrights
Presentation prepared by and copyright of John Ramsey,
East Tennessee State University, Department of
Computing . (ramseyjw@[Link])

●Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.
●IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer, z/VM,
z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER, OpenPower,
PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, Intelligent Miner, WebSphere,
Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM Corporation.
●Linux is the registered trademark of Linus Torvalds in the U.S. and other countries.
●Oracle is a registered trademark of Oracle Corporation.
●HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology.
●Java is a registered trademark of Sun Microsystems, Inc.
●JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape.
●SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, and other SAP products and services mentioned herein as well as their respective logos are
trademarks or registered trademarks of SAP AG in Germany and other countries.
●Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services
mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects S.A. in the United States and in other countries. Business Objects is
an SAP company.
●ERPsim is a registered copyright of ERPsim Labs, HEC Montreal.
●Other products mentioned in this presentation are trademarks of their respective owners.