SlideShare a Scribd company logo
1 of 14
Layout (CSS) Cascading Style Sheets
What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets are stored in CSS files
CSS Saves a Lot of Work! CSS defines HOW HTML elements are to be displayed. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
CSS Syntax A CSS rule has two main parts: a selector, and one or more declarations: The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value.
CSS Comments Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this: /*This is a comment*/p{text-align:center;/*This is another comment*/color:black;font-family:arial;}
CSS is the better half of HTML. And in coding, there is no equality of status: HTML takes care of the rough stuff (the structure), while CSS gives it a nice touch (layout).
One of the smart features of CSS is the possibility to manage your layout centrally. Instead of using the style attribute in each tag, you can tell the browser once how it must layout all the text on the page:
<html>  <head>  <title>My first CSS page</title>  	<style type="text/css">  		h1 {font-size: 30px; font-family: arial;}  		h2 {font-size: 15px; font-family: courier;}  	p {font-size: 8px; font-family: "times new roman";}  </style> </head>  <body>  <h1>My first CSS page</h1>  <h2>Welcome to my first CSS page</h2> <p>Here you can see how CSS works </p> </body>  </html>
What else can I do with CSS? CSS can be used for much more than specifying font types and sizes. For example, you can add colours and backgrounds. Here are some examples for you to experiment with.
<p style="color:green;">Green text</p>  <h1 style="background-color: blue;">Heading on blue background</h1>  <body style="background-image: url('http://www.html.net/logo.png');">
Is CSS nothing but colours and font types? CSS can also be used to control the page setup and presentation (margins, float, alignment, width, height etc.). By regulating the different elements with CSS you are able to layout your pages elegantly and precisely.
<p style="padding:25px;border:1px solid red;">I love CSS</p> Result I Love CSS
With the property float an element can either be floated to the right or to the left. <imgsrc="bill.jpg" alt="Bill Gates" style= "float:left;" />  <p>Loremipsumdolor sit amet, consectetueradipiscingelit, seddiamnonummynibheuismodtinciduntutlaoreetdolore magna aliquameratvolutpat. Utwisienim ad minim veniam, quisnostrudexercitationullamcorpersuscipitlobortisnislutaliquip ex ea commodoconsequat...</p>
CSS Layout Guide

More Related Content

What's hot

CSS- Cascading Style Sheet
CSS- Cascading Style SheetCSS- Cascading Style Sheet
CSS- Cascading Style SheetCodewizacademy
 
HTML- Hyper Text Markup Language
HTML- Hyper Text Markup LanguageHTML- Hyper Text Markup Language
HTML- Hyper Text Markup LanguageCodewizacademy
 
Boostrap basics
Boostrap basicsBoostrap basics
Boostrap basicsJTechTown
 
Web development using HTML and CSS
Web development using HTML and CSSWeb development using HTML and CSS
Web development using HTML and CSSSiddhantSingh980217
 
Introduction to web design discussing which languages is used for website des...
Introduction to web design discussing which languages is used for website des...Introduction to web design discussing which languages is used for website des...
Introduction to web design discussing which languages is used for website des...Aditya Dwivedi
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheetssanjay joshi
 
[Basic HTML/CSS] 0. introduction
[Basic HTML/CSS] 0. introduction[Basic HTML/CSS] 0. introduction
[Basic HTML/CSS] 0. introductionHyejin Oh
 
Creating your first web page
Creating your first web pageCreating your first web page
Creating your first web pagecachs_computing
 
Introduction to Html
Introduction to HtmlIntroduction to Html
Introduction to HtmlJoni
 
Basic Webpage
Basic WebpageBasic Webpage
Basic Webpagebmike06
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSSSyed Sami
 

What's hot (17)

Session 2 intro to Css
Session 2 intro to CssSession 2 intro to Css
Session 2 intro to Css
 
Css external style sheet
Css external style sheetCss external style sheet
Css external style sheet
 
CSS- Cascading Style Sheet
CSS- Cascading Style SheetCSS- Cascading Style Sheet
CSS- Cascading Style Sheet
 
HTML- Hyper Text Markup Language
HTML- Hyper Text Markup LanguageHTML- Hyper Text Markup Language
HTML- Hyper Text Markup Language
 
Css inclusion
Css   inclusionCss   inclusion
Css inclusion
 
Css introduction
Css   introductionCss   introduction
Css introduction
 
Boostrap basics
Boostrap basicsBoostrap basics
Boostrap basics
 
Web development using HTML and CSS
Web development using HTML and CSSWeb development using HTML and CSS
Web development using HTML and CSS
 
Html css
Html cssHtml css
Html css
 
Introduction to web design discussing which languages is used for website des...
Introduction to web design discussing which languages is used for website des...Introduction to web design discussing which languages is used for website des...
Introduction to web design discussing which languages is used for website des...
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
[Basic HTML/CSS] 0. introduction
[Basic HTML/CSS] 0. introduction[Basic HTML/CSS] 0. introduction
[Basic HTML/CSS] 0. introduction
 
Creating your first web page
Creating your first web pageCreating your first web page
Creating your first web page
 
Css
Css Css
Css
 
Introduction to Html
Introduction to HtmlIntroduction to Html
Introduction to Html
 
Basic Webpage
Basic WebpageBasic Webpage
Basic Webpage
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
 

Viewers also liked (13)

Css1
Css1Css1
Css1
 
What is css
What is cssWhat is css
What is css
 
Html styles
Html stylesHtml styles
Html styles
 
CSS
CSSCSS
CSS
 
Week 12 CSS - Review from last week
Week 12 CSS - Review from last weekWeek 12 CSS - Review from last week
Week 12 CSS - Review from last week
 
Casc Style Sheets Ii
Casc Style Sheets IiCasc Style Sheets Ii
Casc Style Sheets Ii
 
Css
CssCss
Css
 
Css ppt
Css pptCss ppt
Css ppt
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
 
Css types internal, external and inline (1)
Css types internal, external and inline (1)Css types internal, external and inline (1)
Css types internal, external and inline (1)
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 

Similar to CSS Layout Guide (20)

Css
CssCss
Css
 
CSS
CSSCSS
CSS
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Css
CssCss
Css
 
Css introduction
Css introductionCss introduction
Css introduction
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
 
Lecture-6.pptx
Lecture-6.pptxLecture-6.pptx
Lecture-6.pptx
 
INTRODUCTIONS OF CSS
INTRODUCTIONS OF CSSINTRODUCTIONS OF CSS
INTRODUCTIONS OF CSS
 
Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8
 
Workshop 2 Slides.pptx
Workshop 2 Slides.pptxWorkshop 2 Slides.pptx
Workshop 2 Slides.pptx
 
CSS
CSSCSS
CSS
 
Css introduction
Css  introductionCss  introduction
Css introduction
 
Css Basics
Css BasicsCss Basics
Css Basics
 
Css Best Practices
Css Best PracticesCss Best Practices
Css Best Practices
 
Html, CSS & Web Designing
Html, CSS & Web DesigningHtml, CSS & Web Designing
Html, CSS & Web Designing
 
AK css
AK cssAK css
AK css
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Welcome to css!
Welcome to css!Welcome to css!
Welcome to css!
 
Css
CssCss
Css
 
HTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptxHTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptx
 

More from Andz Bass

Working with html tables
Working with html tablesWorking with html tables
Working with html tablesAndz Bass
 
Working with tables
Working with tablesWorking with tables
Working with tablesAndz Bass
 
Basic webpage layout and design
Basic webpage layout and designBasic webpage layout and design
Basic webpage layout and designAndz Bass
 

More from Andz Bass (6)

Netiquette
NetiquetteNetiquette
Netiquette
 
Working with html tables
Working with html tablesWorking with html tables
Working with html tables
 
Working with tables
Working with tablesWorking with tables
Working with tables
 
Imagetag
ImagetagImagetag
Imagetag
 
Html links
Html linksHtml links
Html links
 
Basic webpage layout and design
Basic webpage layout and designBasic webpage layout and design
Basic webpage layout and design
 

CSS Layout Guide

  • 1. Layout (CSS) Cascading Style Sheets
  • 2. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work External Style Sheets are stored in CSS files
  • 3. CSS Saves a Lot of Work! CSS defines HOW HTML elements are to be displayed. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
  • 4. CSS Syntax A CSS rule has two main parts: a selector, and one or more declarations: The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value.
  • 5. CSS Comments Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this: /*This is a comment*/p{text-align:center;/*This is another comment*/color:black;font-family:arial;}
  • 6. CSS is the better half of HTML. And in coding, there is no equality of status: HTML takes care of the rough stuff (the structure), while CSS gives it a nice touch (layout).
  • 7. One of the smart features of CSS is the possibility to manage your layout centrally. Instead of using the style attribute in each tag, you can tell the browser once how it must layout all the text on the page:
  • 8. <html> <head> <title>My first CSS page</title> <style type="text/css"> h1 {font-size: 30px; font-family: arial;} h2 {font-size: 15px; font-family: courier;} p {font-size: 8px; font-family: "times new roman";} </style> </head> <body> <h1>My first CSS page</h1> <h2>Welcome to my first CSS page</h2> <p>Here you can see how CSS works </p> </body> </html>
  • 9. What else can I do with CSS? CSS can be used for much more than specifying font types and sizes. For example, you can add colours and backgrounds. Here are some examples for you to experiment with.
  • 10. <p style="color:green;">Green text</p> <h1 style="background-color: blue;">Heading on blue background</h1> <body style="background-image: url('http://www.html.net/logo.png');">
  • 11. Is CSS nothing but colours and font types? CSS can also be used to control the page setup and presentation (margins, float, alignment, width, height etc.). By regulating the different elements with CSS you are able to layout your pages elegantly and precisely.
  • 12. <p style="padding:25px;border:1px solid red;">I love CSS</p> Result I Love CSS
  • 13. With the property float an element can either be floated to the right or to the left. <imgsrc="bill.jpg" alt="Bill Gates" style= "float:left;" /> <p>Loremipsumdolor sit amet, consectetueradipiscingelit, seddiamnonummynibheuismodtinciduntutlaoreetdolore magna aliquameratvolutpat. Utwisienim ad minim veniam, quisnostrudexercitationullamcorpersuscipitlobortisnislutaliquip ex ea commodoconsequat...</p>