6. css presentation - web front-end
DESCRIPTION
The CSS Box Model and CSS Dimension for page design and layout Telerik Software Academy: http://html5course.telerik.com The website and all video materials are in Bulgarian CSS Borders; Overflow; Margins and Paddings; The Box Model; Width and Height; Other CSS Properties.TRANSCRIPT
![Page 1: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/1.jpg)
CSS Presentation
Doncho Minkov
Telerik Software Academyacademy.telerik.com
Technical Trainerhttp://www.minkov.it
http://html5course.telerik.com
![Page 2: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/2.jpg)
Table of Contents
Borders Overflow Margins and Paddings The Box Model Width and Height Other CSS Properties
2
![Page 3: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/3.jpg)
Borders
![Page 4: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/4.jpg)
Borders border-width: thin, medium, thick or numerical value (e.g. 10px)
border-color: color alias or RGB value
border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
Each property can be defined separately for left, top, bottom and right border-top-style, border-left-color, …
4
![Page 5: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/5.jpg)
Border Shorthand Property
border: shorthand rule for setting border properties at once:
is equal to writing:
Specify different borders for the sides via shorthand rules: border-top, border-left, border-right, border-bottom
When to avoid border:05
border: 1px solid red
border-width:1px;border-color:red;border-style:solid;
![Page 6: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/6.jpg)
BordersLive Demo
border-rules.html
![Page 7: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/7.jpg)
Rounded Corners
![Page 8: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/8.jpg)
Rounded Corners Rounded corners are actually a part of CSS 3 Supported in all major browsers Firefox, IE 9, Chrome, Opera and
Safari Done by the border-radius property
Three ways to define corner radius:
border-radius: [<length>|<%>][<length>|<%>]?
border-radius: 15px;
border-radius: 15px 20px;
border-radius: 15px 15px 15px 10px;
8
![Page 9: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/9.jpg)
Rounded CornersLive Demo
![Page 10: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/10.jpg)
Overflow
![Page 11: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/11.jpg)
Overflow
overflow: defines the behavior of element when content needs more space than you have specified by the size properties or for other reasons. Values:
visible (default) – content spills out of the element
auto - show scrollbars if needed
scroll – always show scrollbars
hidden – any content that cannot fit is clipped
11
![Page 12: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/12.jpg)
OverflowLive Demo
overflow-rule.html
![Page 13: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/13.jpg)
Margins and Paddings
![Page 14: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/14.jpg)
Margin and Padding margin and padding define the spacing around the element Numerical value, e.g. 10px or -5px Can be defined for each of the four
sides separately - margin-top, padding-left, …
margin is the spacing outside of the border
padding is the spacing between the border and the content
What are collapsing margins? 14
![Page 15: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/15.jpg)
Margin and Padding: Short Rules
margin: 5px; Sets all four sides to have margin of 5 px;
margin: 10px 20px; top and bottom to 10px, left and
right to 20px; margin: 5px 3px 8px;
top 5px, left/right 3px, bottom 8px margin: 1px 3px 5px 7px;
top, right, bottom, left (clockwise from top)
Same for padding
15
![Page 16: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/16.jpg)
Margins and Paddings
Live Demomargins-paddings-
rules.html
![Page 17: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/17.jpg)
The Box Model
17
Margin
Border
Padding
Content
![Page 18: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/18.jpg)
IE Quirks Mode When using
quirks mode (pages with no DOCTYPE or with a HTML 4 Transitional DOCTYPE)
18
Internet Explorer violates the box model standard!
![Page 19: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/19.jpg)
W i d t h
Height
W i d t h
Height
![Page 20: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/20.jpg)
Width and Height width – defines numerical value for the width of element, e.g. 200px
height – defines numerical value for the height of element, e.g. 100px By default the height of an element
is defined by its content Inline elements do not apply height,
unless you change their display style
20
![Page 21: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/21.jpg)
Width and HeightLive Demo
size-rules.html
![Page 22: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/22.jpg)
List StylesFor Ordered and Unordered Lists
![Page 23: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/23.jpg)
Styles for Lists List properties are used to define the look and feel of the list items Mainly to change the list item
marker Normal styles:
List-style-type Values for <ol>: circle, square,…
Values for <ul>: upper-roman, lower-alpha
Values for both: noneul{ list-style-type:none;}
23
![Page 24: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/24.jpg)
List StylesLive Demo
![Page 25: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/25.jpg)
Images as Bullets We can set a image for the bullets of a list With the property list-style-image
Does not work equally for all browsers
IE puts less space between the bullet and the content
Shorthand property
ul{ list-style-image: url('images/blue-dot.jpg');}
ul{ list-style: bullet url('images/blue-dot.jpg');}
25
![Page 26: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/26.jpg)
Images as Bullets - Alternative
We can place a background in the left-most It looks like a image-bulletul{ list-style-type: none; padding: 0px; margin: 0px;}
li{ background-image: url("images/blue-dot.png"); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; }
26
![Page 27: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/27.jpg)
Styles for List TagsLive Demo
![Page 28: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/28.jpg)
Creating a Menu-like List
In 5 minutes
![Page 29: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/29.jpg)
Creating a Menu-like List
What a menu has? Some buttons that are arranged
from right to left
We need to make it extensible
Create a list Adding new list item is easy
No worries when disabling the styles
29
![Page 30: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/30.jpg)
Creating a Menu-like List
30
ul.menu{ list-style-type: none; padding: 0px; margin: 0px;}
li.menu-item{ float: left; margin: 10px; }
Menu-example
![Page 31: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/31.jpg)
Creating a Menu-like List
Live Demo
![Page 32: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/32.jpg)
Other CSS Properties
![Page 33: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/33.jpg)
Other CSS Properties cursor: specifies the look of the mouse cursor when placed over the element Values: crosshair, help, pointer, progress, move, hair, col-resize, row-resize, text, wait, copy, drop, and others
white-space – controls the line breaking of text. Value is one of: nowrap – keeps the text on one line normal (default) – browser decides
whether to brake the lines if needed33
![Page 34: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/34.jpg)
Other CSS PropertiesLive Demo
![Page 35: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/35.jpg)
Maintenance Example
35
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
Title
Some random text here. You can’t read it anyway! Har har har! Use Css.
CSS
file
![Page 36: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/36.jpg)
форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно
програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки
уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop
уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC
безплатен курс "Разработка на софтуер в cloud среда"
BG Coder - онлайн състезателна система - online judge
курсове и уроци по програмиране, книги – безплатно от Наков
безплатен курс "Качествен програмен код"
алго академия – състезателно програмиране, състезания
ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NETкурсове и уроци по програмиране – Телерик академия
курс мобилни приложения с iPhone, Android, WP7, PhoneGap
free C# book, безплатна книга C#, книга Java, книга C#Дончо Минков - сайт за програмиранеНиколай Костов - блог за програмиранеC# курс, програмиране, безплатно
?
? ? ??
?? ?
?
?
?
??
?
?
? ?
Questions?
?http://academy.telerik.com
CSS Presentation
![Page 37: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/37.jpg)
Homework
37
1. Add a border to all the exercises from the previous presentation (CSS Overview)
![Page 38: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/38.jpg)
Homework (2)
38
2. Implement the following video player Use tables for the layout List tags for the playlist items and the
controls
![Page 39: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/39.jpg)
Homework (3)
3. Create a web page that looks like the Windows calculator in Programmer view It should look exactly
the same Implement hover effects
for the buttons The calculator should
not have any functionality
39
![Page 40: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/40.jpg)
Homework (4)
40
4. Implement the following with using tables for the layout and CSS for the styles
![Page 41: 6. CSS presentation - Web Front-End](https://reader033.vdocument.in/reader033/viewer/2022051616/5541bd86b4c905c54c8b457b/html5/thumbnails/41.jpg)
Free Trainings @ Telerik Academy
"Web Design with HTML 5, CSS 3 and JavaScript" course @ Telerik Academy html5course.telerik.com
Telerik Software Academy academy.telerik.com
Telerik Academy @ Facebook facebook.com/TelerikAcademy
Telerik Software Academy Forums forums.academy.telerik.com 41