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

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)

Cascading Style Sheets (Layout)

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)

Cascading Style Sheets (Layout)

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

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

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

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)

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

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)

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)

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)

html CSS Code

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)

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

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

Styling lists with CSS

Cascading Style Sheets (Style)

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)

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

Cascading Style Sheets (Style)

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; }

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)

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

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

Cascading Style Sheets (Style)

Cascading Style Sheets (Style)

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

Cascading Style Sheets (Style)

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

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

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

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

CSS Code

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)

Cascading Style Sheets (Style)

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

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

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

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

The End Design Principles