Lab-10-Manual [Introduction to CSS-1] PDF

GIFT School of Engineering and Applied Sciences Fall 2023 CS-143L Application of Information and Communication Technology Lab-10 Manual Introduction to CSS -1 v1...

GIFT School of Engineering and Applied Sciences Fall 2023 CS-143L Application of Information and Communication Technology Lab-10 Manual Introduction to CSS -1 v1 13/12/2023  Lab- 10 Manual Introduction to Lab 10: In this Lab Student will be able to learn What is CSS? Types of CSS CSS Inline Styling How to Change Background Color Text Alignment CSS Internal Styling CSS Selector ID as a Selector Class as a Selector CSS External Styling CSS Selector Precedence Learning Outcomes At the end of this Lab student will get to know the following concepts HTML id. HTML Classes CSS inline Styling. CSS internal Styling. CSS external Styling. Page 1 of 9  Lab- 10 Manual CSS a) CSS stands for Cascading Style Sheets. b) CSS is used to style HTML elements. CSS Types We can apply CSS styles in three different ways: I. Inline Styling: We write the CSS properties inside HTML tags by using style attribute. II. Internal Styling: The CSS properties for HTML elements are defined at the top of page by creating separate tag of style III. External Styling: The CSS properties for HTML elements are defined in separate file with extension.css CSS Inline Styling This styling is used within HTML Tag with style attribute. Syntax: Inside HTML start tag use attribute named “style” In the value of style attribute we define style properties Text styling: 1. Create Paragraph tag and write your name. 2. Apply inline style as: style=”color:red;font-size:25px;font-family: sans-serif;” Page 2 of 9  Lab- 10 Manual Change Background Color: Background color property changes color for HTML elements. 1. Inside body tag, add style: style=”background-color:pink;” 2. Inside paragraph tag, add style: style=”background-color:yellow;” Text Alignment: 1. Add style to paragraph written above as: style=”text-align:center;” Page 3 of 9  Lab- 10 Manual CSS Internal Styling Syntax: We create a tag of style at the top of HTML document. Inside style tag we define style for HTML elements as: selector { Property: value; Property: value; } selector { Property: value; Property: value; } Example 1: 1. Create a Paragraph tag in body as: This is Paragraph. Page 4 of 9  Lab- 10 Manual 2. Create a style tag in the head section. 3. Write style for Paragraph inside style tag as: p{ text-align:center; color:red; text-size:20px; background-color:yellow; } CSS Selectors: In CSS, selectors are used to select elements for styling. You can have following selectors: HTML elements e.g. p selects all paragraph elements in page. id selects an element with the specific id. class selects group of elements having same class. Note: We can assign multiple classes to an HTML element but id is unique. An HTML element will have only one unique id. In above example we used HTML element as selector. Page 5 of 9  Lab- 10 Manual ID as Selector: we can define id for HTML elements using id attribute. 1. Create a new Paragraph and define its id: This is second paragraph. 2. In CSS to call id we use selector as: #idname 3. Define style for Paragraph as: #p2{ text-align:right; } Class as Selector: We define class for HTML elements using class attribute. Many HTML elements can have one class. Defining CSS styling for a class applies style to all elements having that class. 1. Create a new Paragraph and give a class name as: This is Paragraph 3 2. Create a heading and give it same class name: this is a heading. Page 6 of 9  Lab- 10 Manual Note: You can assign multiple classes separating by class names with space.Class=”class1 class2” 3. Define CSS style inside style tag for theclass: Style for a class is defined as:.classname.text { Text-align:center; Background-color:yellow; } CSS External Styling In external Styling, you define CSS styles in a separate file with.css extension and link that file to.html file. 1. Create a New Webpage with.html extension “index.html” 2. Create a Heading as: Heading Page 7 of 9  Lab- 10 Manual 3. Create a Paragraph as: This Paragraph 4. Save the html Webpage. 5. Create a new file with.css extension “style.css” 6. Write style for HTML elements in “index.html” as: body{ background-color:lightblue; } p{ font-family:verdana; font-size:20px; } h1{ color:white; text-align:center; } 7. Save the.css file. 8. Link.css file with.html file as: Open index.html Inside head tag write the following: Save the.html file and open in browser. Page 8 of 9  Lab- 10 Manual CSS Selectors Precedence. 1. Inline CSS (html style attribute) overrides CSS rules in style tag and CSSfile. 2. More specific selector takes precedence over a less specific one. (id has more precedence than class) 3. Rules that appear later in the code override earlier rules if both have thesame Precedence. Page 9 of 9