Scribd
Upload
70 views

Describe Types of CSS With Example and Their Properties

The document discusses responsive web design (RWD), which aims to create websites that display and function well on various devices and screen sizes. RWD utilizes fluid grids, flexible images, media queries, and mobile-first design to adapt a site's layout based on a user's device characteristics.

Uploaded by

gowolo4077
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
70 views

Describe Types of CSS With Example and Their Properties

The document discusses responsive web design (RWD), which aims to create websites that display and function well on various devices and screen sizes. RWD utilizes fluid grids, flexible images, media queries, and mobile-first design to adapt a site's layout based on a user's device characteristics.

Uploaded by

gowolo4077
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

1. Describe types of CSS with example and their properties.

CSS (Cascading Style Sheets) is a language used to control the


presentation of web pages. It is used to define the layout,
colors, fonts, and other visual elements of a web page. There
are different types of CSS, each with its own properties and
uses.

i. Inline CSS: It is used to apply a unique style to a single HTML


element. It is added directly to the element in the HTML
document, using the style attribute. For example:
<p style="color: red;">This is a red paragraph</p>
ii. Internal CSS: It is used to apply styles to multiple HTML
elements on a single webpage. The CSS is placed in the
<head> section of the HTML document, within a <style>
tag. For example:
<head>
<style>
p {
color: blue;
}
</style>
</head>
iii. External CSS: It is used to apply styles to multiple web
pages. The CSS is stored in a separate .css file, and is
linked to the HTML document using the link tag in the
<head> section. For example:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

CSS properties are the characteristics of an HTML element


that can be changed with CSS. Examples of CSS properties
include color, font-size, margin, padding, and more. Each
type of CSS has its own specific properties, by using them,
you can control the layout, colors, and other visual
elements of a web page.

2. What is creating styles and link tags?


Creating styles and linking stylesheets in HTML documents involves
using two main tags: the <style> tag and the <link> tag.
<style> tag:
• The <style> tag is used to define styles for elements in an
HTML document.
• It's placed inside the head of an HTML document, and
contains CSS rules inside of it.
• The styles defined inside of the <style> tag only apply to the
specific HTML document in which it appears.
<link> tag:
• The <link> tag is used to link external stylesheets to an HTML
document.
• It is typically placed in the head of an HTML document and
the href attribute is used to specify the location of the
external stylesheet.
• The styles defined in an external stylesheet apply to multiple
pages in a website.
• The rel attribute is set to "stylesheet" to indicate that this is a
stylesheet and the type attribute is set to "text/css" to
indicate that it's written in CSS.
Together, these tags allow developers to separate the
presentation of a web page from its structure and content, and
make it possible to control the layout and presentation of a
website or application by defining and linking styles.
3. What are CSS Properties?
CSS properties are the characteristics of an HTML element that can
be changed with CSS. There are a large number of properties
available, but some examples include:
• color: changes the text color of an element
• font-size: changes the size of the text
• background-color: changes the background color of an
element
• margin: changes the amount of space outside of an element
• padding: changes the amount of space inside of an element
• width: changes the width of an element
• height: changes the height of an element
• display: changes the display behavior of an element
• position: position an element on the page
• float: float an element to the left or right
CSS properties are used in CSS rules, which apply a set of styles to
a specific set of elements. To apply a property to an element, you
need to specify the CSS selectors that target that element, and
then include the property and the value you want to apply to it
inside curly braces {}. The general syntax of a css rule is like this:
selector {
property: value;
}
For example, to make all h1 headings red, we can use the
following css rule:
h1 {
color: red;
}
CSS provides many properties, the goal is to use them according to
the context of the project, keep in mind that the combination of
different properties can create visually pleasing designs or can
lead to accessibility issues if not applied correctly.
4. Explain Style Selector – id, class name with uses.
CSS selectors are used to select the HTML elements that a set of
CSS styles will be applied to. There are different types of
selectors, two of the most commonly used are the id and class
selectors.

1. id selector:
• The id selector is used to select a single element with a
unique id attribute.
• id attributes are assigned to an HTML element by using
the id attribute.
• An id attribute can only be used once on a page and it
should be unique across the entire document
• An id selector is represented by the "#" symbol followed by
the id name of an HTML element.
• For example:
<div id="myDiv">This is my div</div>

#myDiv {
color: blue;
}
2. class selector:
• The class selector is used to select multiple elements with
the same class attribute.
• class attributes are assigned to an HTML element by using
the class attribute.
• A class attribute can be used multiple times on a page
• A class selector is represented by a "." symbol followed by
the class name of an HTML element.
• For example:
<p class="myClass">This is a paragraph</p>
<p class="myClass">Another paragraph</p>

.myClass {
font-size: 20px;
}
The id selector and class selector are important for creating
specific styles for specific HTML elements, by using an id selector
we can target a unique element, and using a class selector we can
target multiple elements that share the same class. With these
selectors, you can achieve a great deal of control over the layout,
presentation and interactivity of your web page.
5. Steps of linking with bootstrap?
6. What are container classes?
In Bootstrap, the container class is used to create a container
for the main content of a web page. This container acts as a
wrapper for the content and is used to set the width and
alignment of the content. Here are some key points about the
container class in Bootstrap:
1. Width: The container class sets a fixed width for the container,
which is based on the size of the viewport (the width of the web
page). By default, the container has a width of 1170px on large
screens and 940px on medium screens and below.
2. Alignment: The container class is used to center the content
inside the container. The content is horizontally centered within
the container, which is useful for creating a consistent layout
across different screen sizes.
3. Responsiveness: The container class is designed to be
responsive, which means it will adapt to the size of the
viewport. On smaller screens, the container will take up a larger
percentage of the screen to ensure the content is still readable.
4. Multiple containers : You can use multiple container class to
create different sections of the layout and different styling,
depends on the design requirements.
5. Nesting: You can also nest multiple container classes inside
each other to create more complex layouts with different
widths and alignments.

The container class is a core part of the Bootstrap layout


system and is used in conjunction with other Bootstrap classes
to create a responsive and visually pleasing layout. It helps to
keep the main content of the page aligned and consistent
across different screen sizes.
7. What are grids?

8. Explain the steps of inserting tables and images.


9. What is button in html, explain its role in web pages?
10. Explain in detail with tags and properties
a. Typography
b. Jumbotron
c. Glyphicons
d. Pseudo class
11. Give the uses of CSS in HTML.
12. Explain responsive web design?
Responsive web design (RWD) is a method of web design that aims
to make web pages look and function well on a variety of devices
and screen sizes. The goal of RWD is to create a seamless
experience for users, regardless of whether they are accessing a
website on a desktop computer, tablet, or smartphone.
To achieve this goal, responsive web design utilizes a number of
techniques, including:
1. Fluid grids: This allows the layout of a web page to adapt to the
size of the screen it is being viewed on. By using a fluid grid,
elements on a web page can be automatically resized and
repositioned to fit within the available space.
2. Flexible images: This ensures that images automatically adjust
to the size of the device or screen they are being viewed on. This
prevents images from being too small to see on a large screen
or taking up too much space on a small screen.
3. Media queries: Media queries are used to apply different styles
and layouts to a web page depending on the characteristics of
the device or screen it is being viewed on. Media queries can be
used to target different screen sizes, resolutions, and
orientations.
4. Mobile-first design: This approach to responsive web design
starts by designing for small screens and then progressively
enhancing the design for larger screens. This approach ensures
that the site will work well on small screens, then it will be
enhanced for larger screens.
The primary advantage of RWD is that it allows web pages to be
viewed on a variety of devices, with a seamless user experience.
And it also improves the page performance, accessibility, and SEO
by having a single codebase that adapt to different devices instead
of having multiple codebase.

What is Bootstrap?
• Bootstrap is a free front-end framework for faster and easier web
development
• Bootstrap includes HTML and CSS based design templates for
typography, forms, buttons, tables, navigation, modals, image
carousels and many other, as well as optional JavaScript plugins
• Bootstrap also gives you the ability to easily create responsive designs

Why Use Bootstrap?


Advantages of Bootstrap:

• Easy to use: Anybody with just basic knowledge of HTML and CSS can
start using Bootstrap
• Responsive features: Bootstrap's responsive CSS adjusts to phones,
tablets, and desktops
• Mobile-first approach: In Bootstrap 3, mobile-first styles are part of
the core framework
• Browser compatibility: Bootstrap is compatible with all modern
browsers (Chrome, Firefox, Internet Explorer, Edge, Safari, and Opera)

Create First Web Page With Bootstrap


1. Add the HTML5 doctype

Bootstrap uses HTML elements and CSS properties that require the HTML5
doctype.

Always include the HTML5 doctype at the beginning of the page, along with
the lang attribute and the correct character set:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>

2. Bootstrap 3 is mobile-first

Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles


are part of the core framework.

To ensure proper rendering and touch zooming, add the following <meta> tag
inside the <head> element:

<meta name="viewport" content="width=device-width, initial-scale=1">

The width=device-width part sets the width of the page to follow the screen-
width of the device (which will vary depending on the device).

The initial-scale=1 part sets the initial zoom level when the page is first
loaded by the browser.

3. Containers

Bootstrap also requires a containing element to wrap site contents.

There are two container classes to choose from:

1. The .container class provides a responsive fixed width container


2. The .container-fluid class provides a full width container,
spanning the entire width of the viewport

.container
.container-fluid

Two Basic Bootstrap Pages


The following example shows the code for a basic Bootstrap page (with a
responsive fixed width container):

Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstra
p/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquer
y.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/boots
trap.min.js"></script>
</head>
<body>

<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>

The following example shows the code for a basic Bootstrap page (with a full
width container):

Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstra
p/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquer
y.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/boots
trap.min.js"></script>
</head>
<body>

<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>

You might also like