Css
- 1. CSS
- 2. What is CSS? • CSS stands for Cascading Style Sheets • Styles define how to display HTML elements • Styles are added to HTML 4.0 • External Style Sheets are stored in CSS files
- 3. Styles Solved a Big Problem • HTML was never intended to contain tags for formatting a document • When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. • To solve this problem, the World Wide Web Consortium (W3C) created CSS. • In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file. • All browsers support CSS today.
- 4. 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!
- 5. 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.
- 6. CSS Selectors • Three types of CSS Selectors • Element • Class • ID
- 7. CSS Element Selector Example • A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets: • p {color:red;text-align:center;} • To make the CSS more readable, you can put one declaration on each line, like this: • p { color:red; text-align:center; }
- 8. CSS Comments • Are used to explain code, and may help to edit the source code at a later • Are ignored by browsers • A CSS comment begins with "/*", and ends with "*/" • p{ text-align:center; /*This is another comment*/ color:black; font-family:arial; }
- 9. The id and class Selectors • In addition to setting a style for a HTML element, CSS allows you to specify our own selectors which are: • Id • Class
- 10. The id Selector • The id selector is used to specify a style for a single, unique element. • The id selector uses the id attribute of the HTML element, and is defined with a "#". • Example • Imagine within the body element of our html page, we have the following paragraph element <p id=”welcome”>Welcome to the wonderful world of HTML</p> • We can then create a CSS rule with the id selector: #welcome { text-align:center; color:red; }
- 11. The class Selector • Is used to specify a style for a group of elements • Unlike the id selector, the class selector is most often used on several elements • This allows you to set a particular style for many HTML elements with the same class. • The class selector uses the HTML class attribute, and is defined with a "."
- 12. • Example: • Imagine within the body element of our html page, we have the following header element <h2 class=”center”>Summary</h2> • We can then create a CSS rule with the class selector: .center {text-align:center;}
- 13. • Can also specify that only specific HTML elements should be affected by a class • In the example below, all p elements with class="center" will be center-aligned: • Example p.center {text-align:center;}
- 14. CSS Box Model
- 15. Three Ways to Insert CSS • External style sheet • Internal style sheet • Inline style
- 16. External Style Sheet • An external style sheet is ideal when the style is applied to many pages • With an external style sheet, you can change the look of an entire Web site by changing one file. • Each page must link to the style sheet using the <link> tag.
- 17. • An external style sheet can be written in any text editor. • The file should not contain any html tags. • Your style sheet should be saved with a .css extension. • Example:
- 18. Internal Style Sheet • An internal style sheet should be used when a single document has a unique style. • You define internal styles in the head section of an HTML page, by using the <style> tag
- 19. Inline Styles • An inline style loses many of the advantages of style sheets by mixing content with presentation. • To use inline styles you use the style attribute in the relevant tag. • The style attribute can contain any CSS property. • Example:
- 20. • Multiple styles are cascaded in to one style. • The order of priority is(first is of the least priority): • Browser default • External style sheet • Internal style sheet (in the head section) • Inline style (inside an HTML element)
- 21. CSS Background Properties • background-color • background-image • background-repeat
- 22. CSS Border Properties • border-style can have the following values: • none: Defines no border • dotted: Defines a dotted border • dashed: Defines a dashed border • solid: Defines a solid border
- 23. • border-width property is used to set the width of the border
- 24. • border-color property is used to set the color of the border. • The color can be set by: • name - specify a color name, like "red“ • RGB - specify a RGB value, like "rgb(255,0,0)“ • Hex - specify a hex value, like "#ff0000"
- 25. • color property is used to set the color of the text
- 26. • text-align property is used to set the horizontal alignment of a text
- 27. • text-decoration property is used to set or remove decorations from text
- 28. • text-transform property is used to specify uppercase and lowercase letters in a text • Can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word
- 29. • text-indent property is used to specify the indentation
- 32. What is CSS Float? • With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it • Float is very often used for images, but it is also useful when working with layouts
- 34. Navigation Bars • Having easy-to-use navigation is important for any web site • With CSS you can transform boring HTML menus into good-looking navigation bars • Navigation Bar = List of Links
- 37. Horizontal Navigation Bar • There are two ways to create a horizontal navigation bar • Using inline list items • Using floating list items • Both methods work fine, but if you want the links to be the same size, you have to use the floating method.
- 38. Inline List Items • One way to build a horizontal navigation bar is to specify the <li> elements as inline, in addition to the "standard" code above
- 39. Floating List Items • In the example above the links have different widths • For all the links to have an equal width, float the <li> elements and specify a width for the <a> elements