Learning Material Styling
Greenwood Training Company wants to present their Learning material Online. They also want to apply Styling to their Learning content.
Concepts covered: CSS3 Selectors - Element Type Selector, Id Selectors, Class Selectors and Grouping Selectors
The following is the screenshot of Learning Material Styling
Use the CSS Selectors with the given Properties and Values.
Provide the details as given in the table below.
CSS Selectors | Properties And Values |
body | · background color should be “#00FFFF” · font family should be “Arial” · font size should be “12px” |
h1 | · font size should be “2.5em”
|
dd | · font size should be “1.5em”
|
p[title] | · color should be “#FF0000” · font size should be “1.7em” · line height should be “1.5”
|
reasons | · color should be “#FF0F70” · font should be displayed in “bold” · line height should be “1.5” · font size should be “1.5em” |
description01 | · font style should be “italic” · color should be “#F500FF”
|
description07 | · font style should be “italic” · color should be “#FF4500” · font should be displayed in “bold”
|
em | · color should be “#FF0000” · font should be displayed in “bold” |
Solution:
LearningMaterial.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="LearningMaterial.css">
</head>
<body>
<h1>Why to Learn java Programming?</h1>
<div>
<p title="Java Programming">Java is a MUST for students and working professionals
to become a great Software Engineer specially when they are working
in Software Development Domain. I will list down some of the key
advantages of learning Java Programming:</p>
<dl>
<dt class="reasons">Object Oriented</dt>
<dd id="description01">In Java, everything is an Object. Java can be easily
extended since it is based on the Object model.</dd>
<dt class="reasons">Platform Independent</dt>
<dd id="description02">Unlike many other programming languages including C and C++,
when Java is compiled, it is not compiled into platform specific
machine, rather into platform independent byte code. This byte code
is distributed over the web and interpreted by the Virtual Machine
(JVM) on whichever platform it is being run on.</dd>
<dt class="reasons">Simple</dt>
<dd id="description03">Java is designed to be easy to learn. If you understand the
basic concept of <em>OOP Java</em>, it would be easy to master.</dd>
<dt class="reasons">Secure</dt>
<dd id="description04">With Java's secure feature it enables to develop virus-free,
tamper-free systems. Authentication techniques are based on
public-key encryption.</dd>
<dt class="reasons" >Architecture-neutral</dt>
<dd id="description05">Java compiler generates an architecture-neutral object file
format, which makes the compiled code executable on many processors,
with the presence of Java runtime system.</dd>
<dt class="reasons" >Portable</dt>
<dd id="description06">Being architecture-neutral and having no implementation
dependent aspects of the specification makes Java portable. <em>Compiler
in Java is written in ANSI C</em> with a clean portability boundary,
which is a POSIX subset.</dd>
<dt class="reasons">Robust</dt>
<dd id="description07">Java makes an effort to eliminate error prone situations by
emphasizing mainly on compile time error checking and runtime
checking.</dd>
</dl>
</div>
</body>
</html>
Learning Material.css
body{
background-color: #00FFFF;
font-family: Arial;
font-size: 12px;
}
h1{
font-size: 2.5em;
}
dd{
font-size: 1.5em;
}
p[title]{
color: #FF0000;
font-size: 1.7em;
line-height: 1.5;
}
.reasons{
color: #FF0F70;
font-weight: bold;
line-height: 1.5;
font-size: 1.5em;
}
#description01{
font-style: italic;
color: #F500FF;
}
#description07{
font-style: italic;
font-weight: bold;
color: #FF4500;
}
em{
color: #FF0000;
font-weight: bold;
}
