Question

Create CSS code

4.3. Change/update the CSS to display multiple blocks/courses per line, in a way that responds to the width of the browser window and reduces the number of elements per line appropriately.

4.3.1. You may add IDs or classes to the XML file as desired.

<InformationSystems>
   <Classes>
       <CourseHeader>
           <CourseNumber>CIS 145</CourseNumber>
           <CourseName>Introduction to Relational Database</CourseName>
           <Credits>5</Credits>
       </CourseHeader>
       <Description><![CDATA[Introduces relational database concepts and practices using business-related examples. OFTEC 111 or 108 recommended, or comparable competencies. Prerequisite: OFTEC 141 or MATH 097 with a "C" or better.]]></Description>
       <AdditionalInfo>Additional Notes</AdditionalInfo>
   </Classes>
   <Classes>
       <CourseHeader>
           <CourseNumber>CIS 160</CourseNumber>
           <CourseName>Programming Fundamentals</CourseName>
           <Credits>5</Credits>
       </CourseHeader>
       <Description><![CDATA[Introduces programming structures, concepts, techniques and terminology using visual studio development environment and the c# programming language.Prerequisite: MATH 097. Distribution: AA, AS, DTA.]]></Description>
       <AdditionalInfo>Additional Notes</AdditionalInfo>
   </Classes>
   <Classes>
       <CourseHeader>
           <CourseNumber>CIS 166</CourseNumber>
           <CourseName>Programming Business Objects</CourseName>
           <Credits>5</Credits>
       </CourseHeader>
       <Description><![CDATA[Introduces concepts and techniquies of object oriented programming,validation and storage of business data sets, and user interfaces. Prerequisite:CIS 160.]]></Description>
       <AdditionalInfo>Additional Notes</AdditionalInfo>
   </Classes>
   <Classes>
       <CourseHeader>
           <CourseNumber>CIS 169</CourseNumber>
           <CourseName>Requirements Analysis</CourseName>
           <Credits>5</Credits>
       </CourseHeader>
       <Description><![CDATA[Introduces planning,analysis and design of software with an emphasis on development methodologies, design process and communication techniques. Prerequisite: CIS: 145 and CIS 166.]]></Description>
       <AdditionalInfo>Additional Notes</AdditionalInfo>
   </Classes>
   <Classes>
       <CourseHeader>
           <CourseNumber>CIS 182</CourseNumber>
           <CourseName>SQL Fundamentals</CourseName>
           <Credits>5</Credits>
       </CourseHeader>
       <Description><![CDATA[Introduces Structured Query Language (SQL). Emphasizes techniques for writing efficient SQL queries using a common commercial implementation of SQL. Prerequisite: CIS 145 and CIS 160 or instructor's permission.]]></Description>
       <AdditionalInfo>Additional Notes</AdditionalInfo>
   </Classes>
   <Classes>
       <CourseHeader>
           <CourseNumber>CIS 185</CourseNumber>
           <CourseName>HTML, CSS, JavaScript</CourseName>
           <Credits>5</Credits>
       </CourseHeader>
       <Description><![CDATA[Introduces creating web pages with HTML5 and CSS. Covers JavaScript coding to create, test, debug, and document programs. Prerequisite: CIS 166.]]></Description>
       <AdditionalInfo>Additional Notes</AdditionalInfo>
   </Classes>
   <Classes>
       <CourseHeader>
           <CourseNumber>CIS 218</CourseNumber>
           <CourseName>PowerShell, Cybersecurity, Ethics</CourseName>
           <Credits>5</Credits>
       </CourseHeader>
       <Description><![CDATA[Introduces PowerShell scripting, basic cybersecurity concepts, and ethical issues for software development. Prerequisite: CIS 166 and "C" or better in ENGL& 101.]]></Description>
       <AdditionalInfo>Additional Notes</AdditionalInfo>
   </Classes>
   <Classes>
       <CourseHeader>
           <CourseNumber>CIS 245</CourseNumber>
           <CourseName>Business Information Systems</CourseName>
           <Credits>5</Credits>
       </CourseHeader>
       <Description><![CDATA[Introduces business information systems. Explores the role of software developers and database managers in developing, refining, and supporting these systems. Prerequisite: CIS 266.]]></Description>
       <AdditionalInfo>Additional Notes</AdditionalInfo>
   </Classes>
   <Classes>
       <CourseHeader>
           <CourseNumber>CIS 266</CourseNumber>
           <CourseName>Introduction to Business Applications</CourseName>
           <Credits>5</Credits>
       </CourseHeader>
       <Description><![CDATA[Explores how to edit, present, and store data using object-oriented programming and relational databases. Prerequisite: CIS 166 and CIS 182.]]></Description>
       <AdditionalInfo>Additional Notes</AdditionalInfo>
   </Classes>
   <Classes>
       <CourseHeader>
           <CourseNumber>CIS 282</CourseNumber>
           <CourseName>SQL Programming</CourseName>
           <Credits>5</Credits>
       </CourseHeader>
       <Description><![CDATA[Continues development of relational databases and associated services using Structured Query Language (SQL) in Microsoft SQL Server. Introduces transaction processing, stored procedures, indices, constraints, triggers, and views. Prerequisite: CIS 182 and CIS 166.]]></Description>
       <AdditionalInfo>Additional Notes</AdditionalInfo>
   </Classes>
   <Classes>
       <CourseHeader>
           <CourseNumber>CIS 284</CourseNumber>
           <CourseName>Web Application Development</CourseName>
           <Credits>5</Credits>
       </CourseHeader>
       <Description><![CDATA[Introduces development of interactive web pages using ASP.NET server-side programming. Web programming with SQL databases, addresses security issues, develops web services, and introduces deployment to cloud services. Prerequisite: CIS 166, CIS 182, and CIS 185.]]></Description>
       <AdditionalInfo>Additional Notes</AdditionalInfo>
   </Classes>
</InformationSystems>

Answer 1

CSS code :

CourseHeader{

background-color: blueviolet;

color: white;

font-size: larger;

font-weight: bold;

display: block;

border-bottom: 1px solid black;

}

CourseNumber, CourseName, Credits {

display: inline-block;

padding: 10px;

}

CourseNumber {

text-decoration: underline;

}

Credits::after {

content: '.0CR';

}

Description {

background-color: lightblue;

color: black;

display: block;

font-size: large;

padding: 10px;

border-bottom: 1px solid black;

}

AdditionalInfo {

background-color: lightgrey;

color: black;

display: block;

font-size: small;

padding: 10px;

border-bottom: 2px solid black;

}

Websites designed generally without using CSS responsively makes the website to invisible effectively either on a laptop or on mobile.

so, the CSS code that is used to display multiple blocks responsively is

display: inline-block;

To make the website responsive enter this code in the CSS file at the start

*

{

heading: 0;

padding: 0;

}

Then enter the code as

@media screen and (min-wdith: 601px)

{

.classes

{

font-size: 60px; // set the font size as you wish to get in your laptop

}

@media screen and (max-wdith: 601px)

{

.classes

{

font-size: 40px; // set the font size as you wish to get in your mobile

}

In the above code, you can keep the same text size if you wish and you can also change the font color, and so on by placing the text here.

in this way, the text will be responsive as per your requirement.