Presented By:Assem SalemMahmoud Bahaa El-Din

What’s UI?

It’s what you can see and interact with..

A good UI should be:• Simple.

• Consistency & common UI elements

• Purposeful layout.

• Strategically use colour and texture.

• Typography.

CSS A world of beauty

What is

<h1>HTML elemnts</h1><p>Welcome to SCCI!</p>

HTML elementsWelcome to SCCI!

Where to…?!!

InlineInternal

External

<style>h1{

color: #1234 }

</style>

<h1 style=“color: #1234;”></h1>

.html .css

• Selectors

• Background

• Text

• Borders

Selector

Element Id class

P{css code

}

#id{css code

}

.class{css code

}

p.class{css code

}

• Selectors

• Background

• Text

• Borders

Backgroundscolor image

{background-color: #1234;}

{background-image: url(“ ”);}

• Selectors

• Background

• Text

• Borders

Text

color Font size Font styleFont family

{color: #1234;}

{Font-family: Calibri;}

{Font-size: 28;}

{Font-style: italic;}

• Selectors

• Background

• Text

• Borders

Borders

border border radius Box shadow

{border:2px solid #FFF;}

{border-radius: 20 px;}

{box-shadow: 0 0 10 px blue;}

Recap

Where to ?! Inline Internal External

Selectors Element Id class

Backgrounds color image repeat position

Text color Font size Font weightFont family

Left right bottomMargin top

Border radius shadow

Any Questions?

Thank You