1. Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, 2013. All rights reserved.

2. What are Style Sheets? The purpose of HTML is to define content What the level 1 heading is What the paragraph is Sections of the document HTML can format the content, but it is restrictive 2Copyright © Texas Education Agency, 2013. All rights reserved.

3. What are Style Sheets? Style sheets allow the designer to separate the content and structure from the document’s style and layout The HTML document would just define which block of text is a level 2 heading The style sheet can define what the level 2 heading looks like, the color of the text, etc. define where the level 2 heading is placed on the web page 3Copyright © Texas Education Agency, 2013. All rights reserved.

4. The Style Sheet The style rule is a single style definition that is applied to one or more elements on your web page A style sheet consists of one or more style rules A designer can create a print style sheet that controls how the web page looks when it’s printed create an additional style sheet that determines how to display the page in a presentation 4Copyright © Texas Education Agency, 2013. All rights reserved.

5. The Style Sheet Style sheets can be applied to an entire web site, to a single web page, or an individual element on a web page External – Applied to an entire website Embedded – Applied to a single web page Inline – Applied to a single page element Style sheets are referred to as Cascading Style Sheets because of their ability to be applied at the three different levels 5Copyright © Texas Education Agency, 2013. All rights reserved.

6. The Style Rule External & Embedded Style Sheet All style rules are going to follow the same basic structure selector {property: value; property :value} Selector – The element in which the style rule is to be applied Property -- What characteristic you are adding to, or modifying, on the element Value – What you are changing the property to 6Copyright © Texas Education Agency, 2013. All rights reserved.

7. The Style Rule Sample style rule applied to a level 2 heading: h2 {color: #009900; text-align: center} If applied as an external style sheet, every level 2 heading in the website would take on this style If applied as an embedded style sheet, every level 2 heading on the page would take on this style 7Copyright © Texas Education Agency, 2013. All rights reserved.

8. The Style Rule Inline Style Sheet Style rules are applied as an attribute to an individual tag The style would only be applied to the one with the style rule Can be used to add additional styles or to override an existing style 8Copyright © Texas Education Agency, 2013. All rights reserved.

9. External Style Sheet The external style sheet is used to create general styles that are used throughout the entire web site Background colors Heading styles Paragraph styles Content positioning & layout 9Copyright © Texas Education Agency, 2013. All rights reserved.

10. External Style Sheet The external style sheet is nothing more than a list of style rules to be applied There should not be any HTML tags on the external style sheet The external style sheet should be saved with the.css file extension Example: myStyle.css 10Copyright © Texas Education Agency, 2013. All rights reserved.

11. External Style Sheet body {background-color: #ff6699} h1 {font-family: Arial; text-align: center} h2 {color: #009900; text-align: center} p {text-align: justify} 11Copyright © Texas Education Agency, 2013. All rights reserved.

12. External Style Sheet Attaching the External Style Sheet Your web pages will not automatically know that the style rules on the external style sheet should be applied You will need to attach the style sheet The following code should be placed in the heading of your HTML document 12Copyright © Texas Education Agency, 2013. All rights reserved.

13. Embedded Style Sheet The embedded style sheet is defined within the heading of a web page The styles are only applied to the page containing the style rules The style rules are placed in the heading of the document between and 13Copyright © Texas Education Agency, 2013. All rights reserved.

14. Embedded Style Sheet body {background-color: #ff6699} h1 {font-family: Arial; text-align: center} h2 {color: #009900; text-align: center} p {text-align: justify} 14Copyright © Texas Education Agency, 2013. All rights reserved.

15. Style Properties There are specific properties that are used by style sheets For the most part, any property can be applied to any tag There are exceptions if the tag does not use the property; for example, a font style would have no affect on the img tag Look at the property reference guide The styles can be grouped by category 15Copyright © Texas Education Agency, 2013. All rights reserved.

16. Font Properties PropertyDescription font-family Sets the font of the text, i.e. Arial, Script, etc. font-variant Allows the text to be set to small-caps or normal font-weight Defines the level of bold that is applied to the text font-size Specifies the size of the font 16Copyright © Texas Education Agency, 2013. All rights reserved.

17. Background Properties PropertyDescription Background-image Imports an image as the background to an object Background-repeat Will repeat the background along a row or column Background-attachment Specifies whether a background image scrolls or is fixed Background-position Specifies where the background image is placed on the screen 17Copyright © Texas Education Agency, 2013. All rights reserved.

18. Background Properties 18 background-image: url(backgrnd.gif); Used to add a background image to an element Will tile the image to fill the entire background background-repeat: repeat-x; Specifies how a background image should be repeated repeat-x Repeats along a single row repeat-y Repeats along a single column norepeat Places a background image once repeat Repeats as tiles to fill the element background background-position: top; Specifies where the background image should be positioned Copyright © Texas Education Agency, 2013. All rights reserved.

19. Units of Measure Percent50% – Relative size of its parent Pixels10px – Smallest unit of measure Inches2in, 2.5in Centimeters1cm, 1.5cm Point12pt – Used by word processors Millimeters5mm Picas1pc – 1 pica is equivalent to 12pt 19Copyright © Texas Education Agency, 2013. All rights reserved.

20. Content Containers The HTML tag creates a virtual container onto your webpage Content can be placed inside the containers The containers are very easy to manipulate using style sheets With style sheets, you can give the container a specific height & width position the container in a specific location on your page 20Copyright © Texas Education Agency, 2013. All rights reserved.

21. Content Containers IDs Each container will be assigned a specific identification style (id) Each “id” will have a specific style defined in the style sheet Example: #myBox1 { } Notice instead of a tag name, we are starting with the # sign and assigning an id name of myBox1 The style of the myBox1 id will be defined within the curly braces 21Copyright © Texas Education Agency, 2013. All rights reserved.

22. Content Containers Assigning the id to a div tag The ids are assigned to the tag as an attribute Example: Notice that the # sign is NOT used when assigning the id The # sign is only used when defining the id, so your browser understands that you are defining an id and not a style for a specific HTML tag 22Copyright © Texas Education Agency, 2013. All rights reserved.

23. Content Containers Positioning Properties position: Possible Values absolute – Specifies that the container should be positioned starting from the screen edge, and other objects should ignore it relative – Specifies that the container should be positioned starting from its natural position, and other objects should act as if it is still in its original location 23Copyright © Texas Education Agency, 2013. All rights reserved.

24. Content Containers position: relative; Notice only the green box moved from its original position. The red and blue boxes are in their original location. 24Copyright © Texas Education Agency, 2013. All rights reserved.

25. Content Containers position: absolute; With absolute, the blue box should be repositioned based on the edges of the screen, and the red and blue box should move to the green box’s original position as if it’s not there. 25Copyright © Texas Education Agency, 2013. All rights reserved.

26. Content Containers Positioning Properties top: how far from the top starting point the container should be placed left: how far from the left starting point the container should be placed width: specifies the width of the container height: specifies the height of the container 26Copyright © Texas Education Agency, 2013. All rights reserved.

27. Content Containers 27 #myBox1 { position: absolute: top: 50px; left: 50px; width: 100px; height: 100px; background-color: #009900; } Copyright © Texas Education Agency, 2013. All rights reserved.

28. Content Containers 28 #myBox1 { position: absolute: top: 50px; left: 50px; width: 100px; height: 100px; background-color: #009900; } Copyright © Texas Education Agency, 2013. All rights reserved.