Learning Material Styling CTS

Learning Material Styling HTML & CSS Code

Bymadwithcode

Greenwood Training Company wants to present its 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 SelectorsProperties 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”

Learning Material.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

p[title]{
    color: #FF0000;
    font-size: 1.7em;
    line-height: 1.5;
}
body{
    background-color: #00FFFF;
    font-family: Arial;
    font-size: 12px;
}
h1{
    font-size: 2.5em;
}
.reasons{
    color: #FF0F70;
    font-weight: bold;
    line-height: 1.5;
    font-size: 1.5em;
}
em{
    color: #FF0000;
    font-weight: bold;
}
dd{
    font-size: 1.5em;
}
#description01{
    font-style:italic;
    color:#F500FF;
}
#description07{
    font-style: italic;
    color: #FF4500;
    font-weight: bold;
}

Similar Posts