Web Design/Embedded CSS

From Wikiversity
Jump to navigation Jump to search
Web Design Embedded CSS
DeliciousFruitFromOSWD.png
This page is part of the Web Design project.
CSSZenGardenLikeTheSea.png

Example 1

As you can see the style information is placed between the <head> & </head> tags, inside the <style> & </style> tags

The CSS code below should make the:

  • Background color = yellow
  • Text inside a <p> tag = green & a font size of 10 pixels
  • Text inside a <h2> tag = blue

Type the code below into your favorite code editor and save the file as cssexample.html

<html>
<head>
<style type=text/css>
body { background-color: yellow; }
p { color: green; font-size:10px; }
h2 { color: blue; }
</style>
</head>
<body>
<h2>Internal CSS</h2>
<p>This page uses internal CSS.  Using the style tag we are able to modify
the appearance of HTML elements.</p>
</body>
</html>




Exercise 2 – Changing the font family and font style using CSS.

The CSS code below should make the:

  • Text within the <p> tag, appear as helvetica, impact, sans-serif font.
  • Text within the <p> tag, appear as italic.
  • Text within the <h2> tag, appear as gill sans, new baskerville, sans-serif font.

Paste the code below into your code editor, create a new page called cssexample2.html

<html>
<head>
<style>
p { 
font-family: helvetica, impact, sans-serif;
font-style: italic;
}
h2 { 
font-family: "gill sans", "new baskerville", sans-serif; 
}
</style>
</head>
<body>
<h2>This is a Heading</h2>
<p>This is some text, which is being affected by CSS.</p>
</body>
</html>




Exercise 3 – Changing the border and aligning the text using CSS.

The CSS code below should make the:

  • Background within the <p> tag, appear as pink.
  • Border around the <p> tag, appear as solid green.
  • Text within the <p> tag, aligned in the center.
  • Border around the <h2> tag, to appear as dotted red.

Paste the code below into your code editor, create a new page called cssexample3.html



<html>
<head>
<style>
p { 
background: pink;
border: solid green;
text-align: center; 
}
h2 {
border: dotted red;
}
</style>
</head>
<body>
<h2>This is a Heading</h2>
<p>This is some text, which is being affected by CSS.</p>
</body>
</html>




Exercise 4 – Changing the margin padding using CSS.

The CSS code below should make the:

  • The text within the

    tag will have a left margin of 2cm.

Paste the code below into your code editor, create a new page called cssexample4.html

<html>
<head>
<style type="text/css">
p {margin-left: 2cm}
</style>
</head>

<body>
<h2>This is a heading with no margin specified</h2>
<p>This is a paragraph with a specified left margin</p>
</body>

</html>



Exercise 5 – Changing the color of a Horizontal Rule using CSS.

The CSS code below should make the:

  • The hortizontal rule <hr> tag will appear as blue (instead of grey).

Paste the code below into your code editor, create a new page called cssexample5.html

<html>
<head>
<style>
hr { 
color: blue;
}
</style>
</head>
<body>
<h2>This is a Heading</h2>
<hr>
<p>This is some text, which is being affected by CSS.</p>
</body>
</html>