Presentation is loading. Please wait.

Presentation is loading. Please wait.

Cascading Style Sheets

Similar presentations

Presentation on theme: "Cascading Style Sheets"— Presentation transcript:

1 Cascading Style Sheets

2 CSS CSS stands for Cascading Style Sheet. Typical CSS file is a text file with an extention.css and contains a series of commands or rules. These rules tell the HTML how to display. *To create a style sheet, create a file using Notepad save it as a .css document and start writing the CSS code. /* Styles for*/ body { font-family:Arial; background: #000; } #container { text-align:left; width:1020px; } #header { height:232px; } #footer { width: 100%; padding: 0 10px; margin-bottom: 10px; And so on….

3 Why use it? Used to control formatting Compatible with HTML and XHTML
Change text properties Control the spacing between elements on your page Draw borders Add images Etc. Compatible with HTML and XHTML

4 Benefits to Using CSS Separates structure from presentation
Provides advanced control of presentation Easy maintenance of multiple pages Faster page loading Better accessibility for disabled users Easy to learn Only downside… CSS does not work exactly the same way in all browsers. You should be able to ensure that your site is still accessible, useable, and attractive in any browser.

5 Without using CSS “HTML without CSS is like a piece of candy without a pretty wrapper.” Without CSS, HTML elements typically flow from top to bottom of the page and position themselves to the left by default. With CSS help, we can create containers or DIVs to better organize content and make a Web page visually appealing.

6 Box Model CSS works on the box model. A typical Web page consists of many boxes joined together from top to bottom. These boxes can be stacked, nested, and can float. Header Navigation Content Footer

7 HTML & CSS HTML and CSS work together to produce beautiful and functional Web sites HTML = structure CSS = style We have not given up HTML, we are only adding to it!

8 CSS Rule Structure declaration selector {property: value;}
A CSS RULE is made up of a selector and a declaration. A declaration consists of property and value. selector {property: value;} declaration

9 Selectors The name of the desired type of element, without any attributes. body { property: value; } h1 { property: value; } em { property: value; } p { property: value; }

10 Properties and Values body {background: purple;} h1 {color: green; } h2 {font-size: large;} p {color: #ff0000;} /*hexadecimal for red*/ Properties and values tell an HTML element how to display. body { background: purple; color: green; } *CSS code can be written in a linear format (above) or in a block format (left).

11 Properties Property is the name of the CSS property that describes the sort of formatting you would like to apply. Properties are basically the same as attributes used in html formatting. Some are the same; however, be careful! Some examples: Same: border, color, Different: font-size, line-height, text-align, font- family, background-color

12 Values Many values are the same as when you used them in html. Some of the rules may change slightly. Some examples: Same: colors, font styles, size (aside from stating how you are using the size #), Different: border values (html=”0” vs. css: none), if using pixels, you must state it as px In css, values are not surrounded by quotation marks

13 Grouping Selectors Example of grouping selectors (both are correct):
Group the same selector with different declarations together on one line. h1 {color: black;} h1 {font-weight: bold;} h1 {background: white;} Example of grouping selectors (both are correct): h1 { color: black; font-weight: bold; background: white; } Cascading Style Sheets: Pixel-Level Control with HTML Ease

14 Grouping Selectors h1 {color: yellow;} h2 {color: yellow;}
Group different selectors with the same declaration on one line. h1 {color: yellow;} h2 {color: yellow;} h3 {color: yellow;} Example of grouping selectors (both are correct): h1, h2, h3 {color: yellow;} Cascading Style Sheets: Pixel-Level Control with HTML Ease

15 Quick Review Write out a rule structure (4 parts)
_________{______________} (then name what the information is between the curly brackets. Write out a rule structure using elements for each part Group selectors with a common declaration Group a selector with 2 or more elements within a declaration Next day added 2/7/13

16 Review Answers Rule structure: Selector {property: value;} Declaration
h2 {color: blue;} h1, h2, h3 {font-weight: bold;} p {text-align: center; font-style: “times new roman” arial;}

17 Comments You can add comments to your html (xhtml) documents in order to remind yourself what you were trying to achieve with your html tags They only appear when the document is opened with an editor (they are invisible to the end user)

18 Comments: Tips Useful for describing why you used a particular tag and what effect you were hoping to achieve Useful to remind yourself to include, remove, or update certain sections You should view your commented page with a browser before publishing to avoid sharing your private comments with the public Comments may not be nested within other comments!

19 p {color: #ff0000;} /*Company Branding*/
Comments Continued… Different when using html and css: Html: One tag, no closing tag: <!--My comments that I want to state--> Css: /*My comments that I want to state*/ p {color: #ff0000;} /*Company Branding*/ Either way is correct depending on your purpose.

20 Let’s play with it a little
Go to Click on “Learn CSS” to the left of the page. Work through the introduction to ID and Class.

21 Attaching a Style Sheet
Attach a style sheet to a page by adding the code to the <head> section of the HTML page. There are 3 ways to attach CSS to a page: 1. External Style Sheet: Best used to control styling on multiple pages. <link rel="stylesheet" type="text/css" media="all" href="styles.css" /> 2. Internal Style Sheet: Best used to control styling on one page. <style type=“text/css”> h1 {color: red) </style> 3. Inline Style Sheet*: CSS is not attached in the <header> but is used directly within HTML tags. <p style=“color: red”>Some Text</p>

22 Begin a new page Set up a new html document
Save it as personal.html in a new folder called “personal pages” Create a heading using h1 tags (do not format!) Add a comment after your h1 tag that states an image should be placed there. Create 2 paragraph tags with some content within it Make sure you are closing ALL appropriate tags!

Download ppt "Cascading Style Sheets"

Similar presentations

Ads by Google