Web Development - Lecture 5
Download as PPTX, PDF1 like78 views
This document provides an introduction to CSS (Cascading Style Sheets). It defines CSS, explains why it is used, and describes the different ways to implement CSS styles including inline, internal, and external stylesheets. It also covers important CSS concepts like the syntax, selectors, grouping selectors, and comments. CSS is used to control the presentation and layout of HTML elements, separate styling from content, and allow styling to be applied across multiple pages from one stylesheet file.
![Continued…
• Child Selector
body > p {color: #000000;}
• Attribute Selector
• You can also apply styles to HTML elements with particular attributes
• input[type=“text”] {color: #000000;}](https://image.slidesharecdn.com/lecture5web-190826070722/85/Web-Development-Lecture-5-19-320.jpg)
Web Development - Lecture 5
- 1. Web Programming SYED SHAHZAIB SOHAIL
- 2. Lecture 5 Introduction to CSS
- 3. Contents • What is CSS? • Why use CSS? • Ways to use CSS • Big Problem • CSS Syntax • CSS Selectors and its types • Grouping Selectors • CSS Comments
- 4. What is CSS? • CSS stands for Cascading Style Sheets • CSS defines the presentation ofWeb Pages • CSS describes how HTML elements are to be displayed on screen, paper or in other media • CSS saves a lot of work. It can control the layout of multiple web pages at once
- 5. Why use CSS? • CSS is used to defines styles of your web pages, including the design, layout and variations in display for different devices and screen sizes.
- 6. Ways to use CSS • CSS can be used in 3 different ways. • Inline CSS • Internal CSS • External CSS
- 7. Continued… • Inline CSS • Inline CSS allows you to apply a unique style to one HTML element at a time. • You assign CSS to a specific HTML tag by using style attribute with any CSS properties defined within it. • Inline CSS style will always override style properties determined in internal or external files. <p style=“color: blue;”>This is a paragraph</p> This is a paragraph
- 8. Continued… • Internal CSS • The internal style sheet is used to add a unique style for a single document. • It is defined in <head> section of the HTML page inside the <style> tag.
- 9. Continued… • External CSS • The external style sheet is generally used when you want to make changes on multiple pages. • It is ideal for this condition because it facilitates you to change the look of the entire website by changing just one file. • It used the <link> tag on every pages and the <link> tag should be put inside the head section. <head> <link rel=“stylesheet” type=“text/css” href=“style.css”> </head> • The external style sheet may be written in text editor but must be saved with a .css extension.This file should not contain HTML elements
- 10. •What style will be used when there is more than one style specified for an HTML element?
- 11. Continued… • If there are multiple style sheets the priority level is defined as following: 1. Inline style sheet 2. Internal style sheet 3. External style sheet
- 12. Big Problem • HTML was never intended to contain tags for formatting a web page • HTML was created to describe the content of the web page • When tags like <font> and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process • To solve this problem, theWorld Wide Web Consortium (W3C) created CSS that removed the style formatting from the HTML page
- 13. CSS Syntax • A CSS rule-set consists of a selector and a declaration block: H1 {color:blue; font-size:12px;} Selector Declaration Declaration Property Value Property Value
- 14. Continued... • The selector points to the HTML element you want to style • The declaration block contains one or more declarations separated by semicolons • Each declaration includes a CSS property name and a value, separated by semicolon • A CSS declaration always ends with a semicolon and declaration blocks are surrounded by curly braces
- 15. CSS Selectors • CSS selectors are used to “find” (or select) HTML elements based on their element name, id, class, attribute and more
- 16. Types of CSS Selectors • There are 3 types of CSS selectors • Element Selector • Id Selector • Class Selector • Child Selector • Attribute Selector
- 17. Continued… • Element Selector • The element selector selects elements based on the element name. • Id Selector • The id selector used 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.
- 18. Continued… • Class Selector • The class selector selects elements with a specific class attribute. • To select elements with a specific class, write a period character, followed by the name of the class. .center {text-align: center; color: red;} • You can also specify that only specific HTML elements should be affected by a class. p. center {text-align: center; color: red;} • HTML elements can also refer to more than one class. <p class=“center large”>This paragraph refers to two classes</p>
- 19. Continued… • Child Selector body > p {color: #000000;} • Attribute Selector • You can also apply styles to HTML elements with particular attributes • input[type=“text”] {color: #000000;}
- 20. Grouping Selectors • If you have elements with the same style definitions, like • h1 {text-align: center; color: red;} • h2 {text-align: center; color: red;} • p {text-align: center; color: red;} • It will be better to group the selectors, to minimize the code. • To group selectors, separate each selector with a comma. • h1, h2, p {text-align: center; color: red;}
- 21. 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 */ • Single Line and Multiline Comments