SlideShare a Scribd company logo

Web topic 15 1 basic css layout

•Download as PPTX, PDF•
•
CK Yang
CK Yang

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.

Related slideshows

Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
 
Css.html
Css.htmlCss.html
Css.html
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
 
1 of 19
Web Authoring Topic 15 – Basic CSS Layout Part 1
Objectives Students 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.
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>
Class Selector In the CSS, a class selector is a name preceded by a full stop (.) Example: .intro { color: red; font-weight: bold; }
ID Selector In the CSS, an ID selector is a name preceded by a hash character (#). Example: #top { background-color: #ccc; padding: 1em } - Database
ID and Class Selector 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>
ID and Class The difference 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.
Universal Selector The universal selector 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; }
SPAN AND DIV The difference 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.
STYLES in CSS There are 3 ways to use styles in CSS: • internal (or embedded) • External • Inline
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>
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.
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.
CSS Background CSS backgrounds are 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.
CSS Background There are 4 background properties you can apply to a CSS selector: background-colour background-image background-repeat background-position
Background-colour background-colour — sets the 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
Background-image background-image — sets an 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.
Background-repeat background-repeat — sets how a background-image is repeated. Values are repeat, no-repeat, repeat-x, repeat-y, and inherit.
Background-position background-position — sets the 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.

More Related Content

Web topic 15 1 basic css layout

  • 1. Web Authoring Topic 15 – Basic CSS Layout Part 1
  • 2. Objectives Students 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. 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 the CSS, a class selector is a name preceded by a full stop (.) Example: .intro { color: red; font-weight: bold; }
  • 5. ID Selector In the CSS, an ID selector is a name preceded by a hash character (#). Example: #top { background-color: #ccc; padding: 1em } - Database
  • 6. ID and Class Selector 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 The difference 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 universal selector 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 The difference 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 There are 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 backgrounds are 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 are 4 background properties you can apply to a CSS selector: background-colour background-image background-repeat background-position
  • 16. Background-colour background-colour — sets the 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 — sets an 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 — sets how a background-image is repeated. Values are repeat, no-repeat, repeat-x, repeat-y, and inherit.
  • 19. Background-position background-position — sets the 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.