Css summary

CSS box model, Text Formatting, Table Formatting
CS141L – Session 2016 BSCS RCET

HTML defines Contents of document
Style Define Appearance
Benefits
 Beautification
 Look control
 Change layout of pages just by adding a new style sheet
 Users bored with your style, change under an hour
 Layout control
 Show different on different devices (e.g. cellphone, desktop,
printer etc)
 Less Work

 Be creative, imagine things
 Do you know his biting power is 4670 N/Sq in

 Three Ways
 Inline
 Add an attribute style to element
 Mention all the style rules as value to this attribute
 Today we will be doing that
 Embedded
 Write style rules separate in style tag (may be in head tag)
 External
 Write style rules in a separate file
 2nd and third are mostly used
 Style rules are most likely the properties

 Your Properties
 Name
 Age
 Reg No
 Height
 Just like so
 Example
 color:red;
 Write the style for which element you want to apply
 <p style=“color:red;”>This is a paragraph</p>
Omaar
19
2016-CS-15
5ft 9in

 Browser says every element is a rectangular box
 Have border, margin, padding, background
 demo
 Width: 100px
 Margin: 20px
 Padding: 10px
 Border:1px
 What is visible width?
 20+1+10+100+10+1+20
 = 162px

 Open the provided document in brackets & firefox
 Open Developer tools & inspect
 What you see? Discussion
 Put important things in new div
 We are going to create following layout
 discussion

 Width of any element
 width: value;
 Padding of any element
 padding: value;
 padding: T R B L;
 padding: TB RL;
 Margin of any element
 margin: value;
 margin: T R B L;
 margin: TB RL;
 Value can be in length unit, %. Unit (px, in, cm, pt, em etc)
 Create the layout shown above

 Any color formed by RGB (each 0-255, 8bit)
 Color name
 Red, green, blue (see figure 13.1, 13.2 form book)
 RGB format
 rgb(120, 245, 190);
 rgb(10%, 50%, 50%);
 rgba(123, 145, 30,0.6);
 Hex format
 #RRGGBB
 #0A3B90
 #F0C
 Means #FF00CC
 Don’t know color value
 Go to MS paint
 Bracket let you choose form color picker

 Foreground color (or Font color)
 color:value;
 Background color
 background-color:value;
 Value can be RGB, color name, HEX, transparent, inherit
 Apply Colors As given
 Content back color pure white using hex, font black
 Body tag back color gray using rgb
 Header font color black using color name
 Heading of content font color orange (adjust using color picker)
 Footer font color of gray shade (must visible)
 Change opacity of heading
 Remove padding, margin applied from developer tool
 Do you see a difference

 Every box can have a border at any side
 border-top-width, border-right-width, border-bottom-width, border-left-
width or border-width
 Value: length units | thin | medium | thick | inherit
 Each side border can have a different style
 border-top-style, border-right-style, border-bottom-style, border-left-
style or border-style
 Value: none, dotted, dashed, solid, double, groove, ridge, inset | outset |
inherit
 Border Color
 border-top-color, border-right-color,
 border-bottom-color, border-left-color, or border-color
 Value: color, transparent, inherit
 Apply bottom dotted border to footer
 Color matched to gray shade
 Apply gray matched full border to content

 Every border corner can be rounded
 border-top-left-radius, border-top-right-radius, border-bottom-
right-radius, border-bottom-left-radius or border-radius
 Value: length measurement, percentage
 Apply border radius 30px to content

 font-family: font, font, ..;
 font-family:Courier, Times;
 font-size:value;
 Value: length unit, percentage, xx-small, x-small, small, medium,
large, x-large, xx-large, smaller, larger, inherit
 font-style:value;
 Value: normal, italic, oblique, inherit
 line-height:value;
 Value: number, length measurement, percentage, normal, inherit
 Go to ms word select a beautiful font style for Header text
 Change line height of list

 Horizontal alignment
 text-align:value;
 Value: left, right, center, justify
 Text indentation
 text-indent:value;
 value:length unit, percentage, inherit
 text-decoration:value;
 Value: none, underline, overline, line-through, blink
 letter-spacing:value;
 Value: length measurement, normal, inherit
 Justify content first paragraph, right align second one, indent
30px
 Align footer to right
 Blink footer text (most browser do not support it)
 Increase letter spacing of list to 5px
 Resize browser, can be viewed on smartphone cool!

 Text Shadow
 text-shadow:value;
 Value: h-offset v-offset blur-radius| none
 Give a shadow to content heading
 You can create different affects
 Book Page 256

 Book Reading
 Chapter 11 (intro only)
 Chapter 12
 Chapter 13 (till page 275)
 Chapter 14
 Assignment
 Create the following invoice, use inline styles
 It uses table for content arrangement
 Show in the office on 3-Jan-2017

Css summary

More Related Content

Similar to Css summary (20)

More from maamir farooq (20)

Recently uploaded (20)

Css summary