Cascading Style Sheets (CSS)

1
Cascading Style Sheets (CSS)

• Bartosz Sakowicz

2
CSS syntax
Basic CSS syntax selector propertyvalue
E.g. P font-family Arial H1 font-size
20pt hr color sienna p margin-left
20px body background-image url("images/back40.g
if")
3
CSS syntax(2)
To separate properties and their values from
other properties, you use semicolon   ltp
style"font-size 20pt font-weight bold
background green color red"gtRed font 20pt,
bolded, on the green backgroundlt/pgt   To define
the same style for many elements, separate them
using comma H1, H2, H3 font-familyHelvetica
coloryellow
4
Inserting styles
Inline style ltp style"font-size 12pt
font-weight bold"gtSome textlt/pgt Internal style
 ltheadgt ltstyle type"text/css"gtlt!-- body
margin-left 2cm margin-right 2cm P
font-size 14pt font-family Arial, Helvetica
font-weight normal --gtlt/stylegtlt/headgt
5
Inserting styles(2)
External style sheet  ltheadgt ltlink
type"text/css" relstylesheet
href"/style.css"gt lt/headgt It is possible (and
quite usual) to use multiple style sheets on the
same page.
6
Document tree

• html
• head body
• title p form img
• input select textarea
• Document tree
• Child
• Descendant
• Parent
• Ascendant

7
Descendant selector
ul ul li colorgreen Second list will be
green. H1 H2 B color blue
8
Child and sibling selectors
Child selector PgtU color green Nested ltugt will
be green Sibling selector H1 Pmargin-left
30 mm)   If lth1gt and ltpgt has common parent .
9
Attributes selectors
General syntax element atrribute relation
value style definition e.g. P alignright
color blue   Simple attribute selector H3
title color 000000 title color 000000

10
Attributes selectors(2)
Attribute selector with defined value General
syntax element attribute"value" style
definition OR attribute"value" style
definition OR attribute"value" style
definition To match the criteria, the value
can be only a substring of the real value.
11
Classes
.class1 font-familyArial Example usage  ltp
classclass1"gt Some text in Arial
lt/pgt Different styles for the same tag P
font-family Arial font-size 12ptP.notice
font-family Arial font-size 12pt
font-weight boldP.exclamation font-family
Verdana font-size 12pt color redP.adds
font-family Arial font-size 8pt
12
Question

• What is the difference between following
• .menu li properties
• li .menu properties
• li,.menu properties
• li.menu properties

13
ID selector
label ID style definition  e.g.  H1title
color red   Example usage  lth1
id"title"gtSome textlt/h1gt  
14
Hyperlinks special selectors (pseudo classes)
15
Paragraphs special selectors (pseudo elements)
Selector first-line Ephasising first line of the
paragraph  Pfirst-line text-transform
uppercase Selector first-letter Ephasising
first letter of the paragraph  Pfirst-letter
font-size 300 colorblue
16
Inheritance
CSS inheritance is based on the Parent-Child
model each Child element inherits all of his
Parent element's styles. Attention the child
element will inherit all the parent element's
properties only if these properties are
inheritable. Inheritance does not work on all CSS
properties (margin, padding and other block
properties). lttable class"arial_font"gtlttrgt lttdgtS
ome text in Ariallt/tdgt lttd class"courier_font"gtSo
me text in Courierlt/tdgt lt/trgtlttrgt lttdgt Some text
in Arial lt/tdgt lttdgt Some text in Arial
lt/tdgt lt/trgtlt/tablegt
17
Cascading
If some properties have been set for the same
selector in different style sheets, the values
will be inherited from the more specific style
sheet. For example, an external style sheet has
these properties for the h3 selector h3 color
red text-align leftfont-size 8pt And an
internal style sheet has these properties for the
h3 selector h3 text-align right font-size
20pt If the page with the internal style sheet
also links to the external style sheet the
properties for h3 will be color red
text-align right font-size 20pt
18
Fonts
Font families, eg.  ltp style"font-family
Times, serif"gtSome textlt/pgt ltp style"font-family
Times, 'Times New Roman', 'Times New Roman CE',
serif"gtSome textlt/pgt Font styles, eg.  ltp
style"font-style normal"gtSome
textlt/pgt Available keywords italic, obligue.
19
Fonts(2)
Font size, eg. a) Defined as keywords  ltp style
"font-size keyword"gtSome textlt/pgt  Available
keywords xx-small, x-small, small, medium,
large, x-large, xx-large. Relative values
larger, smaller b) In metric units  ltp style
"font-size 1cm"gtlt/pgt  Available units cm, in,
mm, pt c) In percents (relative)  ltp style
"font-size 150"gtlt/pgt
20
Fonts(3)
Font weight, eg.  ltp style "font-weight
keyword"gtSome text lt/pgt Defines
boldness. Available keywords normal, bold,
bolder, lighter, 100, 200, 300, 400, 500, 600,
700, 800, 900
21
Fonts(4)
Putting many attributes into one
definition Eg. ltp style "font small-caps bold
14pt/18pt Times, 'Times New Roman', serif"gt Small
caps, bold, 14pt font size, 18 pt space between
lines, Times.lt/pgt   Attributes ordering   font-st
yle-gtfont-variant-gtfont-weight-gtfont-size-gtline-he
ight-gtfont-family
22
Text
Letter spacing, eg. ltp style"letter-spacing
3mm"gtSome text.lt/pgt Text decoration, eg.  lta
style "text-decoration none" href"http//www.dm
cs. pl"gtHyperlink not underlined.lt/agt   Available
keywords underline,overline,line-through.
23
Text(2)

• Text transformation, np
• There are four posiible transformations
• none,
• capitalize (first letter of each word will be
  big),
• uppercase (all letters will be big),
• lowercase (all letters will be small).
• Eg.
• ltp style "text-transform capitalize"gtThis is
  some text.lt/pgt
• In the browser we could see
• This Is Some Text.

24
Text(3)
Text align, np   ltp style "text-align
right"gtRight aligned line.lt/pgt   Available
keywords left, right, center, justify
25
Text(4)
Text indent, eg.  ltp style "text-indent
10"gtIn this paragraph first line will be
indented by 10 according to the page width. In
this paragraph first line will be indented by 10
according to the page width.lt/pgt   In the browser
we could see In this paragraph first line
will be indented by 10 according to the page
width. In this paragraph first line will be
indented by 10 according to the page width.
26
Colors and backgrounds
Text color, eg. lth3 style "color
00FF00"gtGreen title lt/h3gt lttablegt lttrgt lttd
style"color FF0000"gtRed textlt/tdgt lt/trgt lt/
table gt  Background color, eg.  ltp
style"background-color blue"gtParagraph on blue
backgroundlt/pgt
27
Image as a background
Backround can be defined as an image  lth3
style"background-image url(image.gif)"gtTitle on
image backgroundlt/h3gt  Background repeat (when
background is smaller than object)  lth3 style
"background-image url(image.gif)
background-repeat repeat-x"gt Title on image
background lt/h3gt   Available keywords repeat-x
(horizontally repeated), repeat-y (vertically
repeated), repeat (horizontally and vertically
repeated), no- repeat (not repeated).
28
Image as a background(2)

• Background attachment
• Background can be attached in two ways
• It can be motionless according to the page
  (default)
• It can be motionless according to the screen
  (fixed)
• Eg. 
• body background url(image.gif)
  background-attachment fixed

29
Image as a background(3)
Background position Useful, when image is smaller
that real background background-position
keyword Available keywords top, bottom, center,
left, right Or their proper (logical)
combination  background-position top right. It
is possible also to use measerments units or
percentages (counted from the left top corner of
the area)  background-position 2cm
3cm background-position 30 50
30
Toolbars
31
Margins
It is possible to define following margins
margin-top, margin-bottom, margin-left,
margin-right e.g. ltp style"margin-top
1cm"gtSome textlt/pgt  ltp style"margin 2cm"gt 2 cm
margin from each sidelt/pgt ltp style"margin 2cm
3cm"gt 2 cm margin from top and down and 3 cm
margin from left and right lt/pgt ltp style"margin
2cm 3cm 1cm 4cm"gt Different margins from
different sideslt/pgt It is possible to define
inside margins (called padding) by analogy to
margin padding-top, padding-bottom,
padding-left, padding-right  
32
Borders
border-x-width (x top, bottom, left,
right) border-color ffffff border-style none,
dotted, dashed, solid, double, groove, ridge,
inset, outset.
33
Lists
List style list-style-type Available keywords
disc, circle, square, decimal, lower-roman,
upper-roman, lower-alpha, upper-alpha, none
eg. ltul style"list-style-type
disc"gt ltligtFirst typelt/ligt ltligtSecond
typelt/ligt lt/ulgt Image instead of bullet,
eg. ltul style"list-style-image url(dot.gif)"gt
34
Width and height
a) width   ltp style"width 150px"gt Some text
lt/pgt   b) height   ltp style"height 150px"gt "gt
Some text. lt/pgt
35
Absolute positioning
  Eg Image placed in left top corner of the
page   ltdiv style"position absolute left0px
top0px"gt ltimg src"image.gif" border"0"
alt"Description"gt lt/divgt
36
Relative positioning
Relative positioning moves an element RELATIVE to
its original position  ltSPAN style"position
relative left 200px top 300px width 100px"gt
Some textlt/SPANgt  
37
Cursors
Eg ltimg src "image.gif" border"0"
style"cursorhelp" alt " Description"gt
Available keywords          crosshair
pointer          wait     text
         default          auto    x-resize
(x n,w,e,s or logical combination, eg ne)
38
Printing web pages
Two possibilities of breaking pages   page-break
-before always page-break-after
always  Eg.   lth1 style"page-break-before
always"gtChapter 7lt/h1gt