What is CSS?
- 2. What is CSS? O CSS stands for Cascading Style Sheets O CSS describes how HTML elements are to be displayed on screen or on a web page. O CSS is a style language that defines layout of HTML documents. For example, CSS covers fonts, colours, margins, lines, height, width, background images and many other things. O CSS files can help define font, size, colour, spacing, border and location of HTML information on a web page, and can also be used to create a continuous look throughout multiple pages of a website. By Hansa(Hansika) Halai
- 3. Why css? O Saves Your Time O Saves Your Visitors Time(less loading time) O Gives You Design Flexibility O Easier to maintain and update O Multiple Device Compatibility By Hansa(Hansika) Halai
- 4. How it works? O Syntax: property : value; O Ex: color: red; What is important to remember is that both properties and values are case-sensitive in CSS. The property and value in each pair is separated by a colon (:). By Hansa(Hansika) Halai
- 5. O CSS declaration blocks: • The declaration block contains one or more declarations separated by semicolons. • Each declaration includes a CSS property name and a value, separated by a colon. • A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces. O Syntax: Selector{property : value; property : value; } The selector points to the HTML element you want to style. By Hansa(Hansika) Halai
- 6. OEx : p { color: red; text-align: center; } By Hansa(Hansika) Halai
- 7. CSS Selectors O CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class and attribute. O The element Selector • The element selector selects elements based on the element name. Ex: You can select all <p> elements on a page like the example on next slide.. By Hansa(Hansika) Halai
- 9. O The id Selector • The id selector uses the id attribute of an HTML element to select a specific element. • The id of an element should be unique within a page, so the id selector is used to select one unique element! • To select an element with a specific id, write a hash (#) character, followed by the id of the element. • The style rule in example (next slide) will be applied to the HTML element with id="para1“ and also different with id=“para2”. By Hansa(Hansika) Halai
- 10. Note: An id name cannot start with a number! By Hansa(Hansika) Halai
- 11. O The class selector selects elements with a specific class attribute. O To select elements with a specific class, write a period (.) character, followed by the name of the class.(P sector in example) O You can also specify that only specific HTML elements should be affected by a class.(h1 sector in example) O You will see both method’s example on next slide.. By Hansa(Hansika) Halai
- 12. Note: A class name cannot start with a number! By Hansa(Hansika) Halai
- 13. O Grouping Selectors • If you have elements with the same style definitions. • It will be better to group the selectors, to minimize the code. • To group selectors, separate each selector with a comma. Instead of write like this, you can write in this sorter way By Hansa(Hansika) Halai
- 15. O CSS Comments • Comments are used to explain the code, and may help when you edit the source code at a later date. • Comments are ignored by browsers. • A CSS comment starts with /* and ends with */. Comments can also span multiple lines: O Ex: By Hansa(Hansika) Halai
- 16. How to insert CSS? O There are three ways of inserting a style sheet: • External style sheet • Internal style sheet • Inline style 1. External Style Sheet: • With an external style sheet, you just need to create separate css file where you manage entire look of your website. • Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section. By Hansa(Hansika) Halai
- 17. O An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension. O Ex: This is how test.css file look like Output By Hansa(Hansika) Halai
- 18. 2. Internal Style Sheet: • An internal style sheet may be used if one single page has a unique style. • Internal styles are defined within the <style> element, inside the <head> section of an HTML page. • The downside of using an internal stylesheet is that changes to the internal stylesheet only effect the page the code is inserted into. By Hansa(Hansika) Halai
- 20. 3. Inline Styles: • An inline style may be used to apply a unique style for a single element. • To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. • Ex: By Hansa(Hansika) Halai
- 21. Multiple Style Sheets O If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used. O Ex: • Assume that an external style sheet (mystyle.css)has the following style for the <h1> element: mystyle.css h1{ color: navy; } By Hansa(Hansika) Halai