SCCI'15 - Devology - Session 2 - UI&CSS
Click here to load reader
Transcript of SCCI'15 - Devology - Session 2 - UI&CSS
![Page 1: SCCI'15 - Devology - Session 2 - UI&CSS](https://reader037.fdocuments.us/reader037/viewer/2022100300/55a250de1a28abd1758b457f/html5/thumbnails/1.jpg)
Presented By:Assem SalemMahmoud Bahaa El-Din
![Page 2: SCCI'15 - Devology - Session 2 - UI&CSS](https://reader037.fdocuments.us/reader037/viewer/2022100300/55a250de1a28abd1758b457f/html5/thumbnails/2.jpg)
What’s UI?
![Page 3: SCCI'15 - Devology - Session 2 - UI&CSS](https://reader037.fdocuments.us/reader037/viewer/2022100300/55a250de1a28abd1758b457f/html5/thumbnails/3.jpg)
It’s what you can see and interact with..
![Page 4: SCCI'15 - Devology - Session 2 - UI&CSS](https://reader037.fdocuments.us/reader037/viewer/2022100300/55a250de1a28abd1758b457f/html5/thumbnails/4.jpg)
![Page 5: SCCI'15 - Devology - Session 2 - UI&CSS](https://reader037.fdocuments.us/reader037/viewer/2022100300/55a250de1a28abd1758b457f/html5/thumbnails/5.jpg)
A good UI should be:• Simple.
• Consistency & common UI elements
• Purposeful layout.
• Strategically use colour and texture.
• Typography.
![Page 6: SCCI'15 - Devology - Session 2 - UI&CSS](https://reader037.fdocuments.us/reader037/viewer/2022100300/55a250de1a28abd1758b457f/html5/thumbnails/6.jpg)
CSS A world of beauty
![Page 7: SCCI'15 - Devology - Session 2 - UI&CSS](https://reader037.fdocuments.us/reader037/viewer/2022100300/55a250de1a28abd1758b457f/html5/thumbnails/7.jpg)
What is
![Page 8: SCCI'15 - Devology - Session 2 - UI&CSS](https://reader037.fdocuments.us/reader037/viewer/2022100300/55a250de1a28abd1758b457f/html5/thumbnails/8.jpg)
<h1>HTML elemnts</h1><p>Welcome to SCCI!</p>
HTML elementsWelcome to SCCI!
![Page 9: SCCI'15 - Devology - Session 2 - UI&CSS](https://reader037.fdocuments.us/reader037/viewer/2022100300/55a250de1a28abd1758b457f/html5/thumbnails/9.jpg)
Where to…?!!
InlineInternal
External
<style>h1{
color: #1234 }
</style>
<h1 style=“color: #1234;”></h1>
.html .css
![Page 10: SCCI'15 - Devology - Session 2 - UI&CSS](https://reader037.fdocuments.us/reader037/viewer/2022100300/55a250de1a28abd1758b457f/html5/thumbnails/10.jpg)
• Selectors
• Background
• Text
• Borders
![Page 11: SCCI'15 - Devology - Session 2 - UI&CSS](https://reader037.fdocuments.us/reader037/viewer/2022100300/55a250de1a28abd1758b457f/html5/thumbnails/11.jpg)
Selector
Element Id class
P{css code
}
#id{css code
}
.class{css code
}
p.class{css code
}
![Page 12: SCCI'15 - Devology - Session 2 - UI&CSS](https://reader037.fdocuments.us/reader037/viewer/2022100300/55a250de1a28abd1758b457f/html5/thumbnails/12.jpg)
• Selectors
• Background
• Text
• Borders
![Page 13: SCCI'15 - Devology - Session 2 - UI&CSS](https://reader037.fdocuments.us/reader037/viewer/2022100300/55a250de1a28abd1758b457f/html5/thumbnails/13.jpg)
Backgroundscolor image
{background-color: #1234;}
{background-image: url(“ ”);}
![Page 14: SCCI'15 - Devology - Session 2 - UI&CSS](https://reader037.fdocuments.us/reader037/viewer/2022100300/55a250de1a28abd1758b457f/html5/thumbnails/14.jpg)
• Selectors
• Background
• Text
• Borders
![Page 15: SCCI'15 - Devology - Session 2 - UI&CSS](https://reader037.fdocuments.us/reader037/viewer/2022100300/55a250de1a28abd1758b457f/html5/thumbnails/15.jpg)
Text
color Font size Font styleFont family
{color: #1234;}
{Font-family: Calibri;}
{Font-size: 28;}
{Font-style: italic;}
![Page 16: SCCI'15 - Devology - Session 2 - UI&CSS](https://reader037.fdocuments.us/reader037/viewer/2022100300/55a250de1a28abd1758b457f/html5/thumbnails/16.jpg)
• Selectors
• Background
• Text
• Borders
![Page 17: SCCI'15 - Devology - Session 2 - UI&CSS](https://reader037.fdocuments.us/reader037/viewer/2022100300/55a250de1a28abd1758b457f/html5/thumbnails/17.jpg)
Borders
border border radius Box shadow
{border:2px solid #FFF;}
{border-radius: 20 px;}
{box-shadow: 0 0 10 px blue;}
![Page 18: SCCI'15 - Devology - Session 2 - UI&CSS](https://reader037.fdocuments.us/reader037/viewer/2022100300/55a250de1a28abd1758b457f/html5/thumbnails/18.jpg)
Recap
![Page 19: SCCI'15 - Devology - Session 2 - UI&CSS](https://reader037.fdocuments.us/reader037/viewer/2022100300/55a250de1a28abd1758b457f/html5/thumbnails/19.jpg)
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
![Page 20: SCCI'15 - Devology - Session 2 - UI&CSS](https://reader037.fdocuments.us/reader037/viewer/2022100300/55a250de1a28abd1758b457f/html5/thumbnails/20.jpg)
Any Questions?
![Page 21: SCCI'15 - Devology - Session 2 - UI&CSS](https://reader037.fdocuments.us/reader037/viewer/2022100300/55a250de1a28abd1758b457f/html5/thumbnails/21.jpg)
Thank You