1. Colors and backgrounds
color
background-color
background-image
background-repeat
background-attachment
background-position
Background
The color property describes the foreground color of
an element.
h1 {
color: #ff0000;
}

2. Colors and backgrounds
• The background-color property describes the
background color of elements.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}

3. Colors and backgrounds
The CSS property background-image is used to insert a
background image.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}

4. Repeat background image
background-repeat: repeat-x
The image is repeated horizontally
background-repeat: repeat-y
The image is repeated vertically
background-repeat: repeat
The image is repeated both horizontally and
vertically
background-repeat: no-repeat
The image is not repeated

5. body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}

6. background-attachment
• The property background-attachment specifies
whether a background picture is fixed or scrolls
along with the containing element.
• A fixed background image will not move with the
text when a reader is scrolling the page, whereas
an unlocked background image will scroll along
with the text of the web page.
• Background-attachment: scroll
The image scrolls with the page - unlocked
• Background-attachment: fixed
The image is locked

7. background-attachment
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}

8. background-position
• By default, a background image will be positioned in
the top left corner of the screen. The property
background-position allows you to change this
default and position the background image
anywhere you like on the screen.
• There are numerous ways to set the values of
background-position.
• For example, the value '100px 200px' positions the
background image 100px from the left side and
200px from the top of the browser window.
• The coordinates can be indicated as percentages of
the browser window, fixed units (pixels,
centimetres, etc.) or you can use the words top,
bottom, center, left and right.

10. body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}

11. Fonts
FONT-FAMILY
FONT-STYLE
FONT-WEIGHT
FONT-SIZE
FONT

12. Font family
• The property font-family is used to set a
prioritized list of fonts to be used to display a
given element or web page. If the first font on
the list is not installed on the computer used to
access the site, the next font on the list will be
tried until a suitable font is found.
An example
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}

13. Font style Font weight
• The property font-style defines the chosen font
either in normal, italic or oblique.
h2 {font-family: "Times New Roman", serif; font-
style: italic;}
• The property font-weight describes how bold or
"heavy" a font should be presented. A font can
either be normal or bold. Some browsers even
support the use of numbers between 100-900
(in hundreds) to describe the weight of a font.
td {font-family: arial, verdana, sans-serif; font-
weight: bold;}

14. Font size
• The size of a font is set by the property font-size.
• There are many different units (e.g. pixels and
percentages) to choose from to describe font
sizes. In this tutorial we will focus on the most
common and appropriate units.
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}

15. Font
• Using the font short hand property it is possible to cover
all the different font properties in one single property.
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Using the short hand property, the code can be simplified:
p {
font: italic bold 30px arial, sans-serif;
}

16. Text
CSS gives you to add layout to text.
The following properties will be described:
text-align
text-decoration
letter-spacing
text-transform

17. Text alignment
• The CSS property text-align corresponds to the attribute align
used in old versions of HTML. Text can either be aligned to the
left, to the right or centred. In addition to this, the value
justify will stretch each line so that both the right and left
margins are straight.
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}

18. Text decoration
• The property text-decoration makes it is possible to add
different "decorations" or "effects" to text. For example, you
can underline the text, have a line through or above the text,
etc.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}

19. Letter space
• The spacing between text characters can be
specified using the property letter-spacing. The
value of the property is simply the desired width.
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}

20. Text transformation
• The text-transform property controls the capitalization of a
text. You can choose to capitalize, use uppercase or lowercase
regardless of how the original text is looks in the HTML code.
• There are four possible values for text-transform:
capitalize
• Capitalizes the first letter of each word. For example: "john
doe" will be "John Doe".
uppercase
• Converts all letters to uppercase. For example: "john doe" will
be "JOHN DOE".
lowercase
• Converts all letters to lowercase. For example: "JOHN DOE"
will be "john doe".
none
• No transformations - the text is presented as it appears in the
HTML code.

21. Links
• A link can have different states. For example, it
can be visited or not visited. You can use
pseudo-classes to assign different styles to
visited and unvisited links.
• Use a:link and a:visited for unvisited and visited
links respectively. Links that are active have the
pseudo-class a:active and a:hover is when the
cursor is on the link.

22. Links
a {text-decoration:none;}
a:link {color: blue;text-decoration:none;}
a:visited {color: purple;text-decoration:none;}
a:active {background-color: yellow;text-
decoration:none;}
a:hover { color:red; text-decoration:none;}

23. Identification of element using id
• In addition to grouping elements, you might
need to identify one unique element. This is
done by using the attribute id.
• What is special about the attribute id is that
there can not be two elements in the same
document with the same id. Each id has to be
unique.
<h2 id="c1-1">Chapter 1.1</h2>
<h2 id="c1-2">Chapter 1.2</h2>
#c1-2 {
color: red;
}

24. Identification of element using class
• Sometimes you want to apply a special style to a particular
element or a particular group of elements.
• Let's say that we have two lists of links of different grapes used
for white wine and red wine. The HTML code could look like
this:
<p>Grapes for white wine:</p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>
<p>Grapes for red wine:</p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>

25. <p>Grapes for white wine:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>
<p>Grapes for red wine:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet
Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>

26. a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}

27. Grouping with <div>
• <div> is used to group one or more block-level
elements.
<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>

28. #democrats {
background:blue;
}
#republicans {
background:red;
}

29. Margin and Padding
• An element has four sides: right, left, top and bottom. The
margin is the distance from each side to the neighboring
element (or the borders of the document).
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
body {
margin: 100px 40px 10px 70px;
}

31. Padding
• Padding can also be understood as "filling". This
makes sense as padding does not affect the
distance of the element to other elements but
only defines the inner distance between the
border and the content of the element.
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}

32. Borders
border-width
border-color
border-style

33. Border-width
• The width of borders is defined by the property
border-width, which can obtain the values thin,
medium, and thick, or a numeric value, indicated
in pixels.

34. border-color, border-style
• The property border-color defines which color
the border has.

35. h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}

36. Floating elements
• An element can be floated to the right or to left
by using the property float. That is to say that
the box with its contents either floats to the
right or to the left in a document.

38. <div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
#picture {
float:left;
width: 100px;
}

39. Positioning of elements
• With CSS positioning, you can place an element
exactly where you want it on your page.

40. #d1 {
left: 350px;
bottom: 150px;
}
#d2 {
left: 150px;
bottom: 500px;
}
#d3 {
left: 50px;
bottom: 700px;
}