1. Cascading Style Sheets (Layout)
Unit 5:
Cascading Style Sheets (Layout)

2. Cascading Style Sheets (Layout)1
Learning Outcomes
Explain the essentials of CSS and its role in styling webpages
Explain the difference between selectors and declarations
Understand how HEX numbers work and its relation to colors
Contents
Apply the use of CSS to style and layout webpages
Cascading Style Sheets (Layout)

3. Cascading Style Sheets (Layout)

4. Cascading Style Sheets (Style)
Div tag
The div tag is opened and closed. Anything in between these tags is contained within the invisible box
HTML
CSS
Cascading Style Sheets (Style)

5. Cascading Style Sheets (Layout)

6. Cascading Style Sheets (Layout)
Activity
So far, they look the same. This is because you can’t see the div class that you created. We will now use CSS to add background colors
Cascading Style Sheets (Layout)
Page 150

7. Cascading Style Sheets (Layout)
html
CSS Code
Result
Cascading Style Sheets (Layout)

8. Cascading Style Sheets (Layout)
Add this style to div1
Result
CSS Code
Cascading Style Sheets (Layout)

9. Cascading Style Sheets (Layout)
What are floats used for?
Apart from the simple example of wrapping text around images, floats can be used to create entire web layouts. You can set a div to float left or right.
#sidebar {
float: left; }
After we float the sidebar left, the content would warp around it
Cascading Style Sheets (Layout)

10. Cascading Style Sheets (Layout)
Add float: left ; to div1
CSS Code
Result ?
Cascading Style Sheets (Layout)

11. Cascading Style Sheets (Style)
Make div1 float left.
Add an unordered list to div1 (the red box) listing the pages of a website.
In div2 give you page a title in a <h1> tag, enter a paragraph of text and an image.
Home
About Fujairah
Things to do in Fujairah
Contact us
Cascading Style Sheets (Style)

12. Cascading Style Sheets (Layout)
Add another DIV at the very top called header.
Result
html
CSS Code
What do you think width:100% means? Until we now we always used px to set the width and height.
Cascading Style Sheets (Layout)

13. Cascading Style Sheets (Layout)
Div inside a div
To be able to add this, we would need to add two divs side by side
Can you remember how to make a div appear side by side? What code do we use?
You know that we need to float the image to the left, so that the image and the heading can be side by side.
Cascading Style Sheets (Layout)

14. html
CSS Code

15. Cascading Style Sheets (Style)
Navigation Bar
This is the navigation bar we need to change it to look butter
we need to add the links to our HTML code
What will you do?
Home
index.html
About Fujairah
about.html
Things to do in Fujairah
thingstodo.html
Contact Us
contact.html
Cascading Style Sheets (Style)

16. Cascading Style Sheets (Style)
Styling hyperlink colors
Cascading Style Sheets (Style)

17. Cascading Style Sheets (Style)
Styling hyperlink colors
What will happen if I add
Cascading Style Sheets (Style)

18. Styling lists with CSS

19. Cascading Style Sheets (Style)

20. Cascading Style Sheets (Style)
The Box Model
Did you notice that when you added the header, the black and green did not line up? There is a white gap in between them. Why do you think this is?
The “CSS box model” is a set of rules that set the dimensions of every part in a web page. It gives each box (both inline and block) four properties:
Content – the text, image, or other media content in the element.
Padding – the space between the box’s content and its border.
Border – the line between the box’s padding and margin.
Margin – the space between the box and surrounding boxes.
Cascading Style Sheets (Style)

21. The order must be kept the same for it to work.
You can apply borders to any HTML elements such as images or divs themselves.
You can also add just one or more borders by using border-top, border-left, border-right or border-bottom to set specific borders

22. Cascading Style Sheets (Style)

23. h1{
border-top:5px solid #ff0000;
width:300 px; }
h1{
border-top:5px solid #ff0000;
border-left:5px solid #000000;
width:300 px; }
h1{
border-top:5px solid #ff0000;
border-left:5px solid #000000;
border-right:5px solid #0000ff;
border-bottom:5px solid #ff0000;
width:300px; }

26. Cascading Style Sheets (Style)
The reason why the gap is there is because there are default margins on the heading which is pushing the green up, creating a gap. To remove this, we need to remove the top margin from the heading one inside div2
Cascading Style Sheets (Style)

27. Cascading Style Sheets (Style)
Navigation bar continued
Cascading Style Sheets (Style)

28. Cascading Style Sheets (Style)
html
CSS Code
Result
Cascading Style Sheets (Style)

29. Cascading Style Sheets (Style)

30. Cascading Style Sheets (Style)

31. Cascading Style Sheets (Style)
CSS Code
html
Result
Cascading Style Sheets (Style)

32. Cascading Style Sheets (Style)

33. Cascading Style Sheets (Style)
You can use image instead of color for background
Cascading Style Sheets (Style)

34. Cascading Style Sheets (Style)
Making border for wrapper
Cascading Style Sheets (Style)

35. Cascading Style Sheets (Style)
Change header
CSS Code
html
Result
Cascading Style Sheets (Style)

36. Cascading Style Sheets (Style)
Change navigation
html
Result
Cascading Style Sheets (Style)

37. CSS Code

38. Cascading Style Sheets (Style)
to display the list inline i.e. side by side instead of underneath each other
Change navigation
CSS Code
html
Result
Cascading Style Sheets (Style)

39. Cascading Style Sheets (Style)

40. a:visited Essentials of HTML
To apply CSS to a hyperlink that has been visited, which CSS selector is used?
a:visited
Essentials of HTML

41. To apply CSS to a hyperlink that is hovered over (with the mouse cursor), which CSS selector is used?
a:hover
Essentials of HTML

42. Which CSS property can be used to add an outline to a HTML element?
<div>
Essentials of HTML

43. How would we center a div id called wrapper using floats?
Wrapper{ float: center;}
Essentials of HTML

44. The End
Design Principles