Computation and Problem
Solving
Cascading Style Sheets (CSS)
Korzhumbayev Azamat
Values - Colors
• Colors
– is either a keyword (e.g. white, red), or a numerical RGB notation.
• A numerical RGB notation can be:
– An RGB value in hexadecimal notation, which is a ‘#’ immediately followed by a 6 digit or 3 digit hexadecimal number
E.g. #ff0000, #f00
– An RGB value in functional notation
E.g. rgb(255,0,0), rgb(100%,0%,0%)
Values - Lenghts
•Lengths can be
–Relative
em (font size of the relevant font), ex (x-height of the relevant font), % etc.
–Absolute
px *(pixels), in (inches), cm, mm, pt (points, =1/72 in), pc (picas, 1 pc = 12 pt)
Note: no space between number and length notation
CSS Background
•Background-color : color;
•Background-image : url (‘URL’);
•Background-repeat : repeat-x,repeat-y, no- repeat;
•Background-attachment : fixed, local
•Background-position : left top, left bottom, etc.
•Background: red url(‘smiley.jpg’) no-repeat fixed 50% 50%;
Box Properties
•margin : <length>
•border : <style> <width> <color>
•padding : <length>
•content width & height : <length>
•Example:
p{
margin: 50px; padding: 30px; float: right; height: 200px; width: 400px;
border: 5px solid #006633;
}
Box Model
Border property
Border-style : dotted ,dashed, solid, double, groove, ridge, inset, outset, none, hidden
Border-width : thin, medium, thick/px, etc.
Border-color : transparent/colors
Border : dashed 10px red;
Margin property
Margin-top : auto, length, %, inherit
Margin-right : auto, length, %, inherit
Margin-bottom : auto, length, %, inherit
Margin-left : auto, length, %, inherit
Margin :
Padding property
Padding-top : auto, length, %, inherit
Padding-right : auto, length, %, inherit
Padding-bottom : auto, length, %, inherit
Padding-left : auto, length, %, inherit
Padding :
Outline property
Outline-style : dotted ,dashed, solid, double, groove, ridge, inset, outset, none, hidden
Outline-width : thin, medium, thick/px, etc.
Outline-color : invert, colors
Outline : dashed 10px red;