CSS CASCADING STYLE SHEETS Introduction Form 1 MRSM KUALA KLAWANG Ts. Syahrul Affendi Bin Abdul Rahman 1
CSS INTRODUCTION 2
WHAT IS CSS? • CSS stands for Cascading Style Sheets • 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 all at once • External stylesheets are stored in CSS files 3
HTML PAGE DISPLAYED WITH FOUR DIFFERENT STYLESHEETS 4
CSS EXAMPLE 1 body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; } 5
ASSIGNMENT 1:CSS Create a Webpage using CSS that are display following attributes: Display light yellow background at the body Display “I Love to Learn CSS” as header (h1) with white color and text aligned to center. Display “Hello, my name is <<your name>>” paragraph as Helvetica font family with font size of 30 px 6
CSS SYNTAX 7
CSS SYNTAX ACSS rule consists of a selector and a declaration block. 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 a colon. Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces. 8
CSS EXAMPLE 2 p { color: red; text-align: center; } 9
ASSIGNMENT 2:CSS Assign a p selector with following properties and values: Property : color and value : red Property : text align and value : right 10
END OF CLASS 11
REFERENCE https://www.w3schools.com/css/default.asp 12
CSS SELECTOR 13
CSS SELECTOR A CSS selector selects the HTML element(s) you want to style. CSS selectors into five categories: 1. The CSS element Selector 2. The CSS id Selector 3. The CSS class Selector 4. The CSSUniversal Selector 5. The CSSGrouping Selector 14
1.THE CSS ELEMENT SELECTOR The element selector selects HTML elements based on the element name. Example Here, all <p> elements on the page will be center-aligned, with a red text color: p { text-align: center; color: red; } 15
THE CSS ELEMENT SELECTOR EXAMPLE <!DOCTYPE html> <html> <head> <style> p { text-align: center; color: red; } </style> </head> <body> <p>Every paragraph will be affected by the style.</p> <p id="para1">Me too!</p> <p>And me!</p> </body> </html> 16
ASSIGNMENT 3:CSS Add <p> elements on the page with right-aligned, and green text color: Extra reference: https://www.w3schools.com/cssref/css_colors.asp <!DOCTYPE html> <html> <head> <style> /* PUT YOUR CODE HERE*/ </style> </head> <body> <p>Every paragraph will be affected by the style.</p> <p id="para1">Me too!</p> <p>And me!</p> </body> </html> 17
2. THE CSS ID SELECTOR The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is 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. Example The CSS rule below will be applied to the HTML element with id="para1": #para1 { text-align: center; color: red; } 18
THE CSS ID SELECTOR EXAMPLE <!DOCTYPE html> <html> <head> <style> #para1 { text-align: center; color: red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html> 19
ASSIGNMENT 4:CSS Add HTML element with id="para5“ with right-aligned, and yellow text color: Extra reference: https://www.w3schools.com/cssref/css_colors.asp <!DOCTYPE html> <html> <head> <style> /* PUT YOUR CODE HERE*/ </style> </head> <body> <p id="para5">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html> 20
3. THE CSS CLASS SELECTOR The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name. Example In this example all HTML elements with class="center" will be red and center-aligned: .center { text-align: center; color: red; } 21
CSS CLASS SELECTOR EXAMPLE <!DOCTYPE html> <html> <head> <style> .center { text-align: center; color: red; } </style> </head> <body> <h1 class="center">Red and center-aligned heading</h1> <p class="center">Red and center-aligned paragraph.</p> </body> </html> 22
ASSIGNMENT 5:CSS Add <p> elements on the page with right-aligned, and gold text color: Extra reference: https://www.w3schools.com/cssref/css_colors.asp <!DOCTYPE html> <html> <head> <style> /* PUT YOUR CODE HERE*/ </style> </head> <body> <h1 class=“right">Gold and right-aligned heading</h1> <p class=" right ">Gold and right-aligned paragraph.</p> </body> </html> 23
4. THE CSS UNIVERSAL SELECTOR The universal selector (*) selects all HTML elements on the page. Example The CSS rule below will affect every HTML element on the page: * { text-align: center; color: blue; } 24
CSS UNIVERSAL SELECTOR EXAMPLE <!DOCTYPE html> <html> <head> <style> * { text-align: center; color: blue; } </style> </head> <body> <h1>Hello world!</h1> <p>Every element on the page will be affected by the style.</p> <p id="para1">Me too!</p> <p>And me!</p> </body> </html> 25
ASSIGNMENT 6:CSS Add universal selector on the page with left-aligned, and purple text color: Extra reference: https://www.w3schools.com/cssref/css_colors.asp <!DOCTYPE html> <html> <head> <style> /* PUT YOUR CODE HERE*/ </style> </head> <body> <h1>Hello world!</h1> <p>Every element on the page will be affected by the style.</p> <p id="para1">Me too!</p> <p>And me!</p> </body> </html> 26
END OF CLASS 30
REFERENCE https://www.w3schools.com/css/default.asp https://www.w3schools.com/cssref/css_colors.asp 31
CSS COLOR 32
CSS COLOR NAMES In CSS, Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values. In this topic we learn how to use CSS using predefined color names only. Example of color names as below: 33
CSS COLOR NAMES 34
CSS COLOR NAMES EXAMPLE 35 CSS COLOR NAMES