Ads Here

Friday, September 3, 2021

User Interface Design/ HTML 5 /Learning Material Styling

September 03, 2021 0 Comments

 

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”

 

 

               

 





















































Answer:

LearningMaterial.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;
    color: #FF4500;
    font-weight:bold;
}
em{
    color: #FF0000;
    font-weight: bold;
}

/*


        Write css code here with appropriate CSS Selectors  and CSS property/values.
        
        Refer specification details description for more information.


*/



<!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>

By at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)