What is CSS?
CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe
the look and formatting of a document written in markup language. It provides an additional feature
to HTML. It is generally used with HTML to change the style of web pages and user interfaces. It
can also be used with any kind of XML documents including plain XML, SVG and XUL.
What are the types of CSS?
There are 3 types of CSS:
• Inline CSS:
Inline CSS contains the CSS property in the body section attached with element is known
as inline CSS. This kind of style is specified within an HTML tag using the style attribute.
Syntax:
<htmltag style="cssproperty1: value; cssproperty2: value; "> </htmltag>
Example:
<h2 style="color: red; margin-left: 40px ;"> Inline CSS is applied on this heading. </h2>
• Internal or Embedded CSS:
It is used to add a unique style for a single document. It is defined in <head> section of the
HTML page inside the <style> tag.
Example:
<html>
<head>
<style>
body {
background-color: yellow;
}
h1 {
color: red;
margin-left: 80px;
}
</style>
</head>
<body>
<h1> The internal style sheet is applied on this heading. </h1>
<p> This paragraph will not be affected. </p>
</body>
</html>
• External CSS:
External CSS contains separate CSS file which contains only style property with the help
of tag attributes (like class, id, and heading).
Example:
The file given below contains CSS properties. This file save with .css extension. Like
mystyle.css
body {
background-color: lightblue;
}
.h1 {
color: navy;
margin-left: 20px;
}
What are the 7 rules of CSS?
Following are the rules of CSS:
1. Normal Rule
This rule is applied when we need to apply CSS property on a single selector (tag).
Example:
h1 {
font-weight: bold;
color: green;
}
2. Grouped Rule
This rule is applied when we need to apply CSS properties on multiple selectors (tags) via
comma (,).
Example:
h1, h2, h3 {
font-weight: bold;
color: green;
}
3. Nested Rule
This rule is applied when we need to apply CSS properties on a nested selector via
whitespace.
Example:
Nested rule is applied on all list items (li) of ordered list (ol).
ol li {
font-weight: bold;
color: green;
}
4. Property Rule
This rule is applied on the property of a selector which we select by using colon (:).
Example:
The CSS properties are applied on the hover property of the list item (li).
li:hover
{
background-color: green;
color: white;
}
5. Class Rule
A rule that is created with dot operator (.) is called class rule. This is used to create our
own rule which we can apply in any tag via class attribute.
Example:
. ruleforlist
{
background-color: orange;
color: black;
}
.ruleforfontcolor
{
color:green;
}
We can apply this class in any selector by using class attribute. Like,
<li class=” ruleforlist ruleforfontcolor”> abc </li>
We can apply this “ruleforlist” on multiple tags within a single page. We can apply multiple
classes in a single tag using class attribute.
6. Identity Rule
A rule that is created with hash operator (#) is called identity rule. This is used to create
our own rule which we can apply in any tag via id attribute.
Example:
#ruleforlist
{
background-color: orange;
color: black;
}
#ruleforfontcolor
{
color:green;
}
We can apply this rule in any selector by using id attribute. Like,
<li id=” ruleforlist”> abc </li>
<li id=” ruleforfontcolor”> abc </li>
We cannot apply this “ruleforlist” on multiple tags within a single page. We cannot apply
multiple rules in a single tag using id attribute.
7. Hybrid Rule
This is a mixture of all previous rules.
Example:
#ruleforfont, p, h1, ol li
{
color: green;
font-size: 14px;
}
This rule will be applied on paragraph, h1 heading, and list items of ordered list.
What is Bootstrap?
Bootstrap is a free and open source front end development framework for the creation of
websites and web apps. The Bootstrap framework is built on HTML, CSS, and JavaScript (JS) to
assist the development of responsive, mobile-first sites and apps.
Write 10 components of Bootstrap?
There are many components of bootstrap. Some of them are given below:
What is Grid System of Bootstrap?
Bootstrap's grid system allows up to 12 columns across the page.
If you do not want to use all 12 column individually, you can group the columns together to create
wider columns:
Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen
size: On a big screen it might look better with the content organized in three columns, but on a
small screen it would be better if the content items were stacked on top of each other.
Grid Classes
The Bootstrap grid system has four classes:
•
xs (for phones - screens less than 768px wide)
•
sm (for tablets - screens equal to or greater than 768px wide)
•
md (for small laptops - screens equal to or greater than 992px wide)
•
lg (for laptops and desktops - screens equal to or greater than 1200px wide)
The classes above can be combined to create more dynamic and flexible layouts.
Grid Rules
Some Bootstrap grid system rules:
•
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for
proper alignment and padding
•
Use rows to create horizontal groups of columns
•
Content should be placed within columns, and only columns may be immediate children
of rows
•
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
•
Columns create gutters (gaps between column content) via padding. That padding is offset
in rows for the first and last column via negative margin on .rows
•
Grid columns are created by specifying the number of 12 available columns you wish to
span. For example, three equal columns would use three .col-sm-4
•
Column widths are in percentage, so they are always fluid and sized relative to their parent
element
What is HTML and write about 10 tags of HTML?
•
HTML stands for Hyper Text Markup Language
•
HTML is the standard markup language for creating Web pages
•
HTML describes the structure of a Web page
•
HTML consists of a series of elements
•
HTML elements tell the browser how to display the content
•
HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.
HTML Tags:
There are many tags of HTML. Some of them are given below;
1. Headings Tag
HTML headings are titles or subtitles that you want to display on a webpage. HTML
headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading.
<h6> defines the least important heading.
Example:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
2. Paragraphs Tag
The HTML <p> element defines a paragraph. A paragraph always starts on a new line, and
browsers automatically add some white space (a margin) before and after a paragraph.
Example:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
3. Line Breaks Tag
The HTML <br> element defines a line break. Use <br> if you want a line break (a new
line) without starting a new paragraph.
Example:
<p>This is<br>a paragraph<br>with line breaks.</p>
4. Comment Tag
We can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
5. Links Tag
HTML links are hyperlinks. You can click on a link and jump to another document. The
HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
6. Images Tag
The HTML <img> tag is used to embed an image in a web page. The syntax is:
<img src="url" alt="alternatetext">
Where src is the source of the image and alt is the alternate text for the image.
7. Bold Text Tag
Make some text bold.
Example:
<p>This is normal text - <b>and this is bold text</b>.</p>
8. Strong Tag
Define important text in a document.
Example:
<strong>This text is important!</strong>
9. Title Tag
Define a title for your HTML document.
Example:
<title>HTML Elements Reference</title>
10.Video Tag
The <video> tag is used to embed video content in a document, such as a movie clip or
other video streams. The <video> tag contains one or more <source> tags with different
video sources. The browser will choose the first source it supports.
Example:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Write the code of given form?
Write the output of the given tags? (Draw)
What are Built-in Templates?
Templates are pre-made websites that can be fully customized to look unique and fresh,
yet familiar. Templates are created specially to make your website building experience easy and
fast. Where once building a website required expensive designers and coders, templates allow for
high-end quality at minimal to no cost.
Sites to download templates:
Following are the sites from where we can download the website templates:
•
www.nicepage.com
•
www.free-css.com
•
www.colorlib.com
Which templates we should download?
We download those templates that contains html pages, css files, and javascript files.
How can we edit a template?
We can edit a template by using Microsoft Visual Studio using MVC5 model (or any other).
It will create its models, controllers, and views. In views, we will create new pages, copy the code
of respective pages from template and paste them in new pages. In controllers, we will create
actions of new pages. In models, we will import database by creating it in Microsoft SQL Server
Management Studio 18 (or any version).
Why we use different templates for a project?
We can use multiple templates for a single project but it depends on the nature of the
project. Mostly, two templates are compulsory i.e. Customer Template and Admin Template. If
our project is an ecommerce site where we sell clothes. Then only two templates will be used i.e.
Customer and Admin. If our project is a Doctor Appointment Website. Then there will be more
templates like Patient Template, Admin Template, Doctor Template, and Receptionist Template.
Explain MVC Model?
