Web Design/Embedded CSS
From Wikiversity
|
Web Design → Embedded CSS
|
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>
HTML: What is HTML, Advanced HTML Tutorial, HTML Challenges, Lists and Tables, The Structure of HTML, Pen and Paper HTML activities
CSS: Learning Basic HTML and CSS, CSS challenges, Embedded CSS, Basic HTML and CSS Tutorial, Inline CSS, Develop cascading style sheets
PHP: Simple functions in PHP, Dynamic websites, PHP challenges, Dynamic websites with PHP, Generating a receipt with PHP, Responding to HTML forms with PHP,
Javascript: An Introduction to Programming with Javascript, JavaScript Challenges, Getting to know Javascript events, Getting to know the Document Object Model with Javascript, JavaScript pen-n-paper activities, Web Programming Intro, Produce basic client side script for dynamic web pages
XML: XML challenges
Databases: Creating Database Tables
Projects: A small website project, A step-by-step web design project, Build a basic web page, Build a small website
Challenges: Web design challenges, HTML Challenges, AJAX Challenges, CSS challenges, JavaScript Challenges, PHP challenges, XML challenges, Information Architecture Challenges, Introductory algorithm challenges
Activities: Web design group learning activities, Pen and Paper HTML activities, A Web Design Quiz show, Ordering Tasks for a Web Project, Paired Bio Pages, Scoping a Small Project, Emerging Technologies Research Activities
Project management: An introduction to Project Management, Developing a Client Project
Design: Accessibility, Design Principles for Web Design, Design Suggestions
Testing: Testing Website performance, Website Performance Test Plan
Publishing: Getting Your Site On the Web
Certification and standards: Cert IV Websites Qualification in Australia, Australian Qualifications, Web design qualifications
Professional development: Developing your online portfolio, Contribute to personal skill development and learning, Useful Applications, Useful Books, Emerging Technologies, Using the Internet as a Learning Tool
Course meta-information: Web design, About the web design learning project, New Structure, Sample Timetable
