Web topic 15 1 basic css layout


Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web topic 15 1 basic css layout

  1. 1. Web Authoring Topic 15 – Basic CSS Layout Part 1
  2. 2. ObjectivesStudents should able to:1 Explain Cascading Style Sheet Class and ID Selector.2 Identify internal and external Cascading Style Sheets.3 Cascading Style Sheets background.
  3. 3. DIV-based Layout- Example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <title>How to Build a Basic CSS Layout</title> </head> <body> <h1>How To Build a Basic CSS Layout</h1> <div id="main"></div> <div id="footer"></div> </body> </html>
  4. 4. Class SelectorIn the CSS, a class selector is a namepreceded by a full stop (.) Example: .intro { color: red; font-weight: bold; }
  5. 5. ID SelectorIn the CSS, an ID selector is a name precededby a hash character (#). Example: #top { background-color: #ccc; padding: 1em } - Database
  6. 6. ID and Class SelectorCSS by using the attributes id and class couldlook something like this: Example: <div id="top"> <h1>Chocolate curry</h1> <p class="intro">This is my recipe for making curry purely with chocolate</p> <p class="intro">Mmm mm mmmmm</p> </div>
  7. 7. ID and ClassThe difference between an ID and a class isthat an ID can be used to identify oneelement, whereas a class can be used toidentify more than one.
  8. 8. Universal SelectorThe universal selector is an asterisk.When used alone, the universal selector tellsthe CSS interpreter to apply the CSS rule to allelements in the document.*{border: 1 px solid black; }
  9. 9. SPAN AND DIVThe difference between span and div is that aspan element is in-line and usually used for asmall chunk of in-line HTML .Whereas a div (division) element is block-line(which is basically equivalent to having a line-break before and after it) and used to grouplarger chunks of code.
  10. 10. STYLES in CSSThere are 3 ways to use styles in CSS: • internal (or embedded) • External • Inline
  11. 11. STYLES in CSS • InternalThe following CSS STYLE declaration puts aborder around every H1 element in thedocument and centers it on the page.<HEAD><STYLE type="text/css"> H1 {border-width: 1;border: solid; text-align: center}</STYLE></HEAD>
  12. 12. STYLES in CSS • ExternalIn this example, we first specify apersistent style sheet located in the filemystyle.css: <LINK href="mystyle.css" rel="stylesheet" type="text/css">For optimal flexibility, authors shoulddefine styles in external style sheets.
  13. 13. STYLES in CSS • InlineThis CSS example sets colour and fontsize information for the text in a specificparagraph.<P style="font-size: 12pt; color: fuchsia">Arent style sheets wonderful?In CSS, property declarations have the form"name : value" and are separated by asemi-colon.
  14. 14. CSS BackgroundCSS backgrounds are an important part ofweb design. The property is where you addthe colours and images that sit behind yourcontent, which controls much of theaesthetics of your site.Remove CSS backgrounds and your site willprobably be text on a white background.
  15. 15. CSS BackgroundThere are 4 background properties you canapply to a CSS selector: background-colour background-image background-repeat background-position
  16. 16. Background-colourbackground-colour — sets the backgroundcolour of an element. The colour can bespecified as a hex value, an rgb value, or byone of the limited colour names. Thebackground-colour can also be set astransparent or it can be set to inherit thebackground-colour of its parent element
  17. 17. Background-imagebackground-image — sets an image as thebackground of an element and it’s value willlook like url(“path-to-an-image”). Thebackground-image property can also havevalues of none and inherit.
  18. 18. Background-repeatbackground-repeat — sets how abackground-image is repeated. Values arerepeat, no-repeat, repeat-x, repeat-y, andinherit.
  19. 19. Background-positionbackground-position — sets the startingposition of the background image within theelement. Images can be set to startvertically at the top, center, or bottom andhorizontally at the left, center, or right. Thebackground position can also be set to starta fixed amount or a % from the top leftcorner of the element.