Doncho Minkov Telerik School Academy schoolacademy.telerik.com Technical Trainer

 Borders  Overflow  Margins and Paddings  The Box Model  Width and Height  Other CSS Properties 2

3

 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

 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:0 5 border: 1px solid red border-width:1px;border-color:red;border-style:solid;

Live Demo border-rules.html

 Defines an image to be used instead of the normal border of an element  Split up into a couple of properties  Example:  The border-image property has 3 parts:  More detailed description:  border-image/ border-image/ border-image/ 7 border-image: url(border-image.png) 25% repeat;

Live Demo

9

 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: [ | ][ | ]? border-radius: 15px; border-radius: 15px 20px; border-radius: 15px 15px 15px 10px;

Live Demo

 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 13

Live Demo overflow-rule.html

15

 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? 16

 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 17

18 Margin Border Padding Content

Live Demo margins-paddings-rules.html

 Determine whether you want an element to render it's borders and padding within its specified width, or outside of it.  Possible values:  box-sizing: content-box (default) box width: 288 pixels + 10 pixels padding and 1 pixel border on each side = 300 pixels  box-sizing: border-box box width: 300 pixels, including padding and borders 20

 Example: Box with total width of 300 px (including paddings and borders) 21 width: 300px; border: 1px solid black; padding: 5px; /* Firefox */ -moz-box-sizing: border-box; /* WebKit */ -webkit-box-sizing: border-box; /* Opera 9.5+, Google Chrome */ box-sizing: border-box;

 The flexible box model determines the way boxes are distributed inside other boxes and the way they share the available space.  New values for "display" property:  flexbox  inline-flexbox  This box model is still under development  Still not supported in major browsers 22

 flex-direction  Specifies how flexbox items are placed  flex-order  May be used to change the ordering of the elements. Elements are sorted by this value.  flex-pack  Defines the flexibility of packing spaces  flex-align  Changes the way free space is allocated 23

 The flex-direction property specifies how flexbox items are placed in the flexbox.  Possible values:  lr – Displays elements from left to right  rl – Displays elements from right to left  tb – Displays elements from top to bottom  bt – Displays elements from bottom to top  inline and inline-reverse  block and block-reverse 24

Live Demo flexible-box-model.html & box-sizing.html

 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 27

Live Demo size-rules.html

For Ordered and Unordered 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 : circle, square,…  Values for : upper-roman, lower-alpha  Values for both: none ul { list-style-type:none; } list-style-type:none; }

Live Demo 31

 We can set a image for the bullets of a list  With the property list-style-image  Does not work equally good for all browsers  IE puts less space between the bullet and the content  Shorthand property ul { list-style-image: url('images/blue-dot.jpg'); list-style-image: url('images/blue-dot.jpg');} ul { list-style: bullet url('images/blue-dot.jpg'); list-style: bullet url('images/blue-dot.jpg');}

 We can place a background in the left-most  It looks like a image-bullet ul{ list-style-type: none; list-style-type: none; padding: 0px; padding: 0px; margin: 0px; margin: 0px;}li{ background-image: url("images/blue-dot.png"); background-image: url("images/blue-dot.png"); background-repeat: no-repeat; background-repeat: no-repeat; background-position: 0px 5px; background-position: 0px 5px; padding-left: 14px; padding-left: 14px;}

Live Demo

In 5 minutes

 What is inside a navigation?  Some buttons that are arranged from right to left  Or top to bottom  We need to make it extensible  Create a list  Adding new nav item is easy  No worries when disabling the styles

37 ul.menu{ list-style-type: none; list-style-type: none; padding: 0px; padding: 0px; margin: 0px; margin: 0px;}li.menu-item{ float: left; float: left; margin: 10px; margin: 10px;} Menu-example

Live Demo

39

 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 needed 40

Questions? schoolacademy.telerik.com

42 1. Add a border to all the exercises from the previous presentation (CSS Overview)

43 2. Implement the following video player  Use tables for the layout  List tags for the playlist items and the controls

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 44

45 4. Implement the following with using tables for the layout and CSS for the styles