Scribd
Upload
26 views3 pages

CSS Practice for Beginners

Uploaded by

Syed Qamar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views3 pages

CSS Practice for Beginners

Uploaded by

Syed Qamar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

CSS (Part 3)

abbashashimsyed@gmail.com
Practice Solutions

Ans 1
Inside HTML, create
<div id="box">My Box</div>

Inside CSS, write


#box {
height: 150px;
width: 300px;
background-color: grey;
border: 5px dotted black;
margin: 20px 1em 40px 2em;
padding: 1em;
}

Ans 2
Inside HTML, create
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Inside CSS, write


.box {
height: 100px;
width: 100px;

abbashashimsyed@gmail.com
background-color: pink;
border: 2px solid black;
border-radius: 50%;
display: inline-block;
}

Ans 3
Inside HTML, create
<h1>Technologies</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>NodeJS</li>
<li>SQL</li>
<li>MongoDB</li>
<li>ReactJS</li>
<li>Java</li>
<li>C++</li>
<li>C</li>
<li>Python</li>
</ul>

Inside CSS, write


li {
display: inline;

abbashashimsyed@gmail.com
}

Li (list items) have their display property set to “list-item” by default which
makes them a bulleted list item.
When this property is reset by you to “inline”, then the bullet points also
disappear. In a way, we override the default settings with our CSS.

You might also like