Downloaded 16 times
Uploaded byCK Yang
Web topic 15 1 basic css layout
This document discusses basic CSS layout and properties. It explains how to use class and ID selectors to style specific elements on a page. It also describes the differences between internal, external, and inline CSS styles. Finally, it covers the main CSS background properties including background-color, background-image, background-repeat, and background-position that control the aesthetics of a website.
Web topic 15 1 basic css layout
- 1. Web Authoring Topic 15 – Basic CSS Layout Part 1
- 2. Objectives Students should ableto: 1 Explain Cascading Style Sheet Class and ID Selector. 2 Identify internal and external Cascading Style Sheets. 3 Cascading Style Sheets background.
- 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. Class Selector In theCSS, a class selector is a name preceded by a full stop (.) Example: .intro { color: red; font-weight: bold; }
- 5. ID Selector In theCSS, an ID selector is a name preceded by a hash character (#). Example: #top { background-color: #ccc; padding: 1em } - Database
- 6. ID and ClassSelector CSS by using the attributes id and class could look 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. ID and Class Thedifference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.
- 8. Universal Selector The universalselector is an asterisk. When used alone, the universal selector tells the CSS interpreter to apply the CSS rule to all elements in the document. *{ border: 1 px solid black; }
- 9. SPAN AND DIV Thedifference between span and div is that a span element is in-line and usually used for a small 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 group larger chunks of code.
- 10. STYLES in CSS Thereare 3 ways to use styles in CSS: • internal (or embedded) • External • Inline
- 11. STYLES in CSS • Internal The following CSS STYLE declaration puts a border around every H1 element in the document and centers it on the page. <HEAD> <STYLE type="text/css"> H1 {border-width: 1; border: solid; text-align: center} </STYLE> </HEAD>
- 12. STYLES in CSS • External In this example, we first specify a persistent style sheet located in the file mystyle.css: <LINK href="mystyle.css" rel="stylesheet" type="text/css"> For optimal flexibility, authors should define styles in external style sheets.
- 13. STYLES in CSS • Inline This CSS example sets colour and font size information for the text in a specific paragraph. <P style="font-size: 12pt; color: fuchsia"> Aren't style sheets wonderful? In CSS, property declarations have the form "name : value" and are separated by a semi-colon.
- 14. CSS Background CSS backgroundsare an important part of web design. The property is where you add the colours and images that sit behind your content, which controls much of the aesthetics of your site. Remove CSS backgrounds and your site will probably be text on a white background.
- 15. CSS Background There are4 background properties you can apply to a CSS selector: background-colour background-image background-repeat background-position
- 16. Background-colour background-colour — setsthe background colour of an element. The colour can be specified as a hex value, an rgb value, or by one of the limited colour names. The background-colour can also be set as transparent or it can be set to inherit the background-colour of its parent element
- 17. Background-image background-image — setsan image as the background of an element and it’s value will look like url(“path-to-an-image”). The background-image property can also have values of none and inherit.
- 18. Background-repeat background-repeat — setshow a background-image is repeated. Values are repeat, no-repeat, repeat-x, repeat-y, and inherit.
- 19. Background-position background-position — setsthe starting position of the background image within the element. Images can be set to start vertically at the top, center, or bottom and horizontally at the left, center, or right. The background position can also be set to start a fixed amount or a % from the top left corner of the element.