CSS is a language used to style and lay out web pages. There are three ways to insert CSS - external, internal, and inline stylesheets. CSS rules use selectors to find elements and declarations to style them with properties and values. Common selectors include element, ID, class, universal, and grouping selectors.
CSS is a language used to style and lay out web pages. There are three ways to insert CSS - external, internal, and inline stylesheets. CSS rules use selectors to find elements and declarations to style them with properties and values. Common selectors include element, ID, class, universal, and grouping selectors.
CSS is a language used to style and lay out web pages. There are three ways to insert CSS - external, internal, and inline stylesheets. CSS rules use selectors to find elements and declarations to style them with properties and values. Common selectors include element, ID, class, universal, and grouping selectors.
CSS is a language used to style and lay out web pages. There are three ways to insert CSS - external, internal, and inline stylesheets. CSS rules use selectors to find elements and declarations to style them with properties and values. Common selectors include element, ID, class, universal, and grouping selectors.
Download as PPTX, PDF, TXT or read online from Scribd
Download as pptx, pdf, or txt
You are on page 1/ 13
CSS- Cascading Style Sheets
• CSS is the language we use to style an HTML
document. • CSS describes how HTML elements should be displayed. • CSS saves a lot of work. It can control the layout of multiple web pages all at once. • CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. Three Ways to Insert CSS
• A CSS rule consists of a selector and a declaration
block. • Each declaration includes a CSS property name and a value, separated by a colon. CSS Selectors
• CSS selectors are used to "find" (or select) the
HTML elements you want to style. • We can divide CSS selectors into below mentioned categories: - Element Selector - Id Selector - Class Selector - Universal Selector - Grouping Selector CSS element Selector
• The element selector selects HTML elements
based. • Here, all <p> elements on the page will be center-aligned, with a red text color: p { text-align: center; color: red; } 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. • Note: An id name cannot start with a number! 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> 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. • HTML elements can also refer to more than one class. • Note: A class name cannot start with a number! CSS class Selector:Example 1 • In this example all HTML elements with class="center" will be red and center-aligned: <!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> CSS class Selector:Example 2 • In this example only <p> elements with class="center" will be red and center-aligned: <!DOCTYPE html> <html> <head> <style> p.center { text-align: center; color: red; } </style> </head> <body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body> </html> CSS class Selector:Example 3 • In this example the <p> element will be styled according to class="center" and to class="large": <!DOCTYPE html> <html> <head> <style> p.center { text-align: center; color: red; }
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p> <p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p> CSS Universal Selector • The universal selector (*) selects all HTML elements on the page. <!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>
• The grouping selector selects all the HTML elements with the same style definitions. • In this example, the h1, h2, and p elements have the same style definitions: h1 { text-align: center; color: red; }
