CS 120: Introduction to Web Programming Lecture 10: Extra Features and Website Design Part 1 Tarik Booker CS 120 California State University, Los Angeles

What we will cover… Positioning (More) ◦ Columns ◦ Float ◦ Shorthand The CS1 Server ◦ Accounts ◦ Linux Basics

Positioning Review ◦ Box Model ◦ Floats

The Box Model HTML Displays Flow Content as a box ◦ Called the box model  Height, Width (content)  Margin  Between box and rest of page  Padding  Between box and content  Border  Perimeter of Box  Outline  Outside of Box

The Box Model (2) Some Sort of Content… Width Height Margin Padding BorderOutline Top RightLeft Bottom

The Box Model (3) Height / Width ◦ Set the height / width of content area  Values:  px  Absolute (defined) size in pixels  %  Percentage of containing block (relative size)  auto  Automatically resizes the box based on the height / width of its containing block (default)  See height/widthtest.html

Height / Width (2) ◦ Min-width / min-height  Sets the minimum values of the content area for a block (flow content)  Percent (%)  Absolute (pixels)  None (no minimum) ◦ Max-width / max-height  Sets the maximum values for the content area for a block  Relative (%)  Absolute (pixels)  None (no max)

Margins Set offsets from the containing block ◦ (No container = from the page) Can set from different sides:  margin-top, margin-right, margin-bottom, margin-left ◦ Values  Px (pixels)  em (relative to default text value)  Pt  Auto (center the block; define left and right margins)

Margins (2) Note: ◦ It’s good practice to set top and bottom margins for all your elements  Different browsers set different default margins ◦ Margins can collapse  When there is a bottom margin set for an element, and a top margin set for the element below it  The smaller margin is ignored!  Can use padding to take care of this See margintest.html

Padding Defines space between the border and content Can define different sides: ◦ padding-top, padding-right, padding-bottom, padding-left ◦ Values  Pixels (px)  Em (em) relative size

CSS Shorthand Setting Border, Margin, and Padding values can be simplified by using “shorthand” ◦ Set up to 4 values at once. ◦ Must perform in required order ◦ Use spaces in between to separate values

Border Shorthand Border ◦ Shorthand for border-width, border-style, border-color  In that order ◦ border:20px solid blue; ◦ There are other ways to use shorthands

Shorthand for Different Sides Border-style, border-color, border-width, Margin, Padding, can be specified for 4 different sides. ◦ Shorthand can be used to style up to 4 sides at once.  {margin: 50px 50px 5px 20px;}  {border-color: red green blue pink;}  {padding: 20px 10px;}

Shorthand for Different Sides (2) Different number of values style differently ◦ One value  Styles all sides ◦ Two values  First value: (Top and Bottom)  Second value: (Left and Right) ◦ Three values  First value: (Top)  Second value: (Left and Right)  Third value: (Bottom) ◦ Four values  Styles in order: Top, Right, Bottom, Left

Shorthands (3) Background shorthand: ◦ Order:  Background-color  Background-image  Background-repeat  Background-position ◦ Ex:  Background: #FF00FF url(something.jpg) no-repeat top right

Shorthands (4) Font shorthands  Font-style  Font-weight  Font-size  Line-height  Font-family ◦ Ex:  Font: italic bold.8em/1.2 Arial, sans-serif;

More on Float We used float to wrap phrasing content around images ◦ Float the image to a direction, text will flow to the opposite direction  Float (the image to the) right, text flows left ◦ If the image is large enough, other blocks will flow into the float!  We can use this to design pages.

Float (2) Consider floating something other than images! ◦ Floating other blocks of flow content ◦ Can use this to arrange parts of a page  Fixed layout  Liquid layout

Fixed Layout If you float two different blocks and let them line up together, they can be used to arrange different parts of your webpage. ◦ Specifically use absolute heights and widths ◦ Set sections in your page  Header, Section, Aside, Footer ◦ Have the total body width equal the section plus the aside (plus their borders)  See columntest.html

Fixed Layout (2) Float allows the elements to line up side by side. Clear stops other elements from floating into the space. ◦ clear  Stops a float from continuing past the element  Values: left, right, both

Liquid Layout Instead of using fixed widths, use relative widths (percentages of the page) to float with. ◦ See liquidlayouttest.html

CS 1 Server Accounts Linux Commands Importing a page ◦ SSH