CSS____4563276__HTML___________0989.pptx
Ajanya5
6 views
37 slides
Aug 19, 2024
Slide 1 of 37
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
About This Presentation
CASCADING STYLE SHEET
Slide Content
CSS Cascading Style Sheets Or Style sheets
Inline style < h1 style =" color : red ; font-size : 30px ;"> This is a heading </ h1 > < p style =" color : green ; font-size : 22px ;"> This is a paragraph. </ p > < div style =" color : blue ; font-size : 14px ;"> This is some text content. </ div > Using the inline styles are generally considered as a bad practice
Including CSS in HTML Documents Inline styles — Using the style attribute in the HTML start tag. Embedded styles/internal style — Using the <style> element in the head section of a document. External style sheets — Using the <link> element, pointing to an external CSS file.
Embedded Style Sheets Embedded or internal style sheets only affect the document they are embedded in. Embedded style sheets are defined in the <head> section of an HTML document using the <style> element. You can define any number of <style> elements in an HTML document but they must appear between the <head> and </head> tags.
<!DOCTYPE html> <html lang=" en "> <head> <title>My HTML Document</title> <style> body { background- color : YellowGreen ; } p { color : #ff0000; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph of text.</p> </body> </html>
External Style Sheets An external style sheet is ideal when the style is applied to many pages of the website. An external style sheet holds all the style rules in a separate document that you can link from any HTML file on your site. External style sheets are the most flexible because with an external style sheet, you can change the look of an entire website by changing just one file. You can attach external style sheets in two ways — linking and importing .
Linking External Style Sheets Before linking, we need to create a style sheet first. Let's open your favorite code editor and create a new file. Now type the following CSS code inside this file and save it as "style.css".
<!DOCTYPE html> <html lang=" en "> <head> <meta charset="utf-8"> <title>Example of CSS External Style Sheet</title> <link rel ="stylesheet" href ="/examples/ css /style.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph of text.</p> </body> </html>
CSS Syntax A CSS rule have two main parts, a selector and one or more declarations: A CSS declaration always ends with a semicolon " ; ", and the declaration groups are always surrounded by the curly brackets " {} ".
Writing Comments in CSS A CSS comment begins with /*, and ends with */, as shown in the example below: /* This is a CSS comment */ h1 { color: blue; text-align: center; } /* This is a multi-line CSS comment that spans across more than one line */ p { font-size: 18px; text-transform: uppercase; }
CSS Selectors Universal Selector Element Type Selectors Id Selectors Class Selectors
Universal Selector The universal selector, denoted by an asterisk (*), matches every single element on the page. <!DOCTYPE html> <html lang=" en "> <head> <meta charset="utf-8"> <title>Example of CSS universal selector</title> <style> * { margin: 10; padding:10; } </style> </head> <body> <h1>This is heading</h1> <p>This is a paragraph.</p> </body> </html>
Element Type Selectors An element type selector matches all instance of the element in the document with the corresponding element type name. p { color : blue ; } Id Selectors The id selector is used to define style rules for a single or unique element. The id selector is defined with a hash sign (#) immediately followed by the id value. #error { color : red ; }
Class Selectors The class selectors can be used to select any HTML element that has a Class attribute. All the elements having that class will be formatted according to the defined rule. The class selector is defined with a period sign (.) immediately followed by the class value. .blue { color : blue ; } p.blue { color : blue ; }
body { background- color : #f0e68c; } h1 { background- color : #46c79c; } a color name - like "red" a HEX value - like "#ff0000" an RGB value - like " rgb (255, 0, 0)"
<style> body { background-image: url ("/examples/images/tile.png"); } </style>
<style> body { background-image: url ("/examples/images/gradient.png"); background-repeat: repeat-x; } </style> background-repeat property allows you to control how a background image is repeated or tiled in the background of an element. You can set a background image to repeat vertically (y-axis), horizontally (x-axis), in both directions, or in neither direction.
Background-position property is used to control the position of the background image. If no background position has been specified, the background image is placed at the default top-left position of the element body { background-image : url ("images/robot.png") ; background-repeat : no-repeat ; background-position : right top ; }
Background-attachment property determines whether the background image is fixed with regard to the viewport or scrolls along with the containing block. body { background-image : url ("images/bell.png"); background-repeat : no-repeat ; background-attachment : fixed ; }
The Background Shorthand Property When using the background shorthand property the order of the property values should be. background : color image repeat attachment position ; body { background : #f0e68c url ("images/smiley.png") no-repeat fixed 250px 25px ; }
Css Link Css list Css text Css table CSS Box Model-border, margin,padding
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 6
- Slides 37
- Age 471 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
32 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
35 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
32 views
14
Fertility awareness methods for women in the society
Isaiah47
30 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
29 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
30 views