CSS EXERCISE.

CSS EXERCISE

Add an external style sheet with the URL: "mystyle.css".
<html> <head> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Add an external style sheet with the URL: "mystyle.css".
<html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Set "background-color: linen" for the page, using an internal style sheet.

Set "background-color: linen" for the page, using an internal style sheet.
<html> <head> <style> body { background-color: linen; } </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Set "background-color: linen" for the page, using an inline style.

Set "background-color: linen" for the page, using an inline style.
<html> <head> </head> <body style="background-color: linen"> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Remove all styles, except the external style sheet "mystyle.css".
<html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <style> p { color: red; } </style> </head> <body style="background-color: lightcyan"> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

<html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Change the color of all <p> elements to "red".
<!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Change the color of all <p> elements to "red".
<!DOCTYPE html> <html> <head> <style> p { color: red; } </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Change the color of the element with id="para1", to "red".
<html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p id="para1">This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Change the color of the element with id="para1", to "red".
<html> <head> <style> #para1 { color: red; } </style> </head> <body> <h1>This is a Heading</h1> <p id="para1">This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html> >

Change the color of all <p> and <h1> elements, to "red"
Change the color of all <p> and <h1> elements, to "red". Group the selectors to minimize code. <html> <head> <style> </style> </head> <body> <h1>This is a heading</h1> <h2>This is a smaller heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Change the color of all <p> and <h1> elements, to "red"
Change the color of all <p> and <h1> elements, to "red". Group the selectors to minimize code. <html> <head> <style> h1, p { color: red; } </style> </head> <body> <h1>This is a heading</h1> <h2>This is a smaller heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Set the background color for the page to "linen" and the background color for <h1> to "lightblue". <html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Set the background color for the page to "linen" and the background color for <h1> to "lightblue". <html> <head> <style> body { background-color: linen; } h1 { background-color: lightblue; </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Set "paper.gif" as the background image of the page.
<html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Set "paper.gif" as the background image of the page.
<html> <head> <style> body { background-image: url("paper.gif"); } </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Set "gradient_bg_vertical
Set "gradient_bg_vertical.png" as the background image of the page, and repeat it vertically only. <html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Set "gradient_bg_vertical
Set "gradient_bg_vertical.png" as the background image of the page, and repeat it vertically only. <html> <head> <style> body { background-image: url("gradient_bg_vertical.png"); background-repeat: repeat-y; } </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Specify that the background image should be shown once, in the top right corner.
<html> <head> <style> body { background-image: url("img_tree.png"); } </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Specify that the background image should be shown once, in the top right corner.
<html> <head> <style> body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: top right; } </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Set the text color for the page to "red", and the text color for <h1> to "blue".

Set the text color for the page to "red", and the text color for <h1> to "blue".
<html> <head> <style> body { color: red; } h1 { color: blue; </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Center align the <h1> element.

Center align the <h1> element.
<html> <head> <style> h1 { text-align: center; } </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Underline the link. <html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p><a href="css_text.asp">CSS text tutorial</a></p> </body> </html>

Underline the link. <html> <head> <style> a { text-decoration: underline; } </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p><a href="css_text.asp">CSS text tutorial</a></p> </body> </html>

Style text in <h1> to uppercase letters, and text in <p> to capitalized letters.

Style text in <h1> to uppercase letters, and text in <p> to capitalized letters.
<html> <head> <style> h1 { text-transform: uppercase; } p { text-transform: capitalize; </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Indent the first line of the <p> element with 20px.
<html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </body> </html>

Indent the first line of the <p> element with 20px.
<html> <head> <style> p { text-indent: 20px; } </style> </head> <body> <h1>This is a Heading</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </body> </html>

Set the font family for the page to "Courier New", and the font family for <h1> to "Verdana".

Set the font family for the page to "Courier New", and the font family for <h1> to "Verdana".
<html> <head> <style> body { font-family: "Courier New"; } h1 { font-family: Verdana; </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Show <p> elements as "italic" text.

Show <p> elements as "italic" text.
<html> <head> <style> p { font-style: italic; } </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Set the font size for the page to "20px", and the font size for <h1> to "3em"

Set the font size for the page to "20px", and the font size for <h1> to "3em"
<html> <head> <style> body { font-size: 20px; } h1 { font-size: 3em; </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Show <p> elements as "bold" text.

Show <p> elements as "bold" text.
<html> <head> <style> p { font-weight: bold; } </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

With the font property: Set the <p> to "italic", "20px" and "Verdana".

With the font property: Set the <p> to "italic", "20px" and "Verdana".
<html> <head> <style> p { font: italic 20px Verdana; } </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Set<p> elements font variant to "small-caps" text.

Set<p> elements font variant to "small-caps" text.
<html> <head> <style> p { font-variant: small-caps; } </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Give 3px spacing between the letters in a text paragraph <p> and 6px between letters in headlines <h1> <html> <head> <style> </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

Give 3px spacing between the letters in a text paragraph <p> and 6px between letters in headlines <h1> <html> <head> <style> h1 { letter-spacing: 6px; } p { letter-spacing: 3px; </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

This is a Heading

This is a Heading

CSS EXERCISE.

Similar presentations

Presentation on theme: "CSS EXERCISE."— Presentation transcript:

Similar presentations

About project

Feedback

This is a Heading

This is a Heading

Log in

Auth with social network:

CSS EXERCISE.

Similar presentations

Presentation on theme: "CSS EXERCISE."— Presentation transcript:

Similar presentations

About project

Feedback