Scribd
Upload
11 views

css

basic css

Uploaded by

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

css

basic css

Uploaded by

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

1. Define CSS. Why we use CSS with HTML? Explain with example.

Answer: CSS, or Cascading Style Sheets, is a style sheet language used for describing the
presentation of a document written in HTML or XML. CSS defines how elements on a webpage
should be displayed, including their layout, colors, fonts, and other visual properties. It allows web
developers to separate the structure and content of a document (HTML) from its presentation,
making it easier to manage and maintain a website.
Here are some key reasons why CSS is used with HTML:

Separation of Concerns: CSS enables a clear separation between the structure (HTML) and
presentation (CSS) of a web page. This makes it easier to update the design without affecting the
content or structure.

Consistency: CSS allows for consistent styling across multiple pages of a website. By defining
styles in a centralized manner, you can ensure a uniform look and feel throughout the entire site.

Reusability: Styles can be reused across multiple pages, making it more efficient to manage the
design of a website. Changes made to a single style rule can be automatically applied to all
elements that use that rule.

Adaptability: With CSS, you can create responsive designs that adapt to different screen sizes and
devices. This is crucial for providing a good user experience on various platforms, such as
desktops, tablets, and smartphones.

Now, let's look at a simple example of how CSS is used with HTML:
<html>
<head>
<style>
body {
font-family: Georgia, serif;
background-color: #eaeaea;
color: #555;
}

footer {
background-color: #555;
color: #fff;
padding: 10px;
}
</style>
<title>My Updated Stylish Website</title>
</head>
<body>

<section>
<p> Welcome to My Updated Website.</p>
</section>
<footer>
<p>&copy; 2023 My Website. All rights reserved.</p>
</footer>

</body>
</html>
In this example, the HTML file includes a link to an external CSS file. The CSS file contains style
rules that define the appearance of various elements on the webpage, such as the header, navigation
menu, main content section, and footer. The separation of HTML and CSS allows for a clean and
organized structure, making it easier to manage and update the design of the website.
2. What is CSS explain the syntax with an example?
Answer: CSS, or Cascading Style Sheets, is a style sheet language used to describe the
presentation of a document written in HTML or XML. CSS syntax consists of a set of rules
that define how elements should be styled on a web page. Each rule consists of a selector and
a declaration block, which contains one or more declarations.

Here's a breakdown of the basic syntax:


selector {
property: value;
/* Additional properties and values */
}
Selector: It targets the HTML element(s) to which the style rules should apply. For example,
you might target all <p> (paragraph) elements or elements with a specific class (e.g., .my-
class).

Declaration Block: It is enclosed in curly braces {} and contains one or more declarations.
Each declaration includes a property, a colon :, and a value. Multiple declarations are separated
by semicolons ;.

Property: It defines the aspect of the element you want to style, such as color, font-size, or
margin.

Value: It specifies the styling value for the corresponding property. For example, a color value
can be red, a font size can be 16px, and a margin can be 10px.

Here's a simple example:


/* Style paragraphs with the class "highlight" */
p.highlight {
color: blue;
font-size: 18px;
margin-bottom: 10px;
}
/* Style all unordered lists */
ul {
list-style: square;
padding-left: 20px;
}

/* Style the body background */


body {
background-color: #f0f0f0;
}
In this example:

The selector p.highlight targets paragraphs (<p>) with the class "highlight."

The corresponding declaration block sets the text color to blue, font size to 18 pixels, and
bottom margin to 10 pixels.

The selector ul targets all unordered lists.

The corresponding declaration block sets the list style to square and the left padding to 20
pixels.

The selector body targets the entire body of the HTML document.

The corresponding declaration block sets the background color to a light gray (#f0f0f0).

When this CSS is linked to an HTML document, it will style the specified elements according
to the rules defined in the stylesheet. For instance, paragraphs with the class "highlight" will
have the specified color, font size, and margin, and unordered lists will have square bullets and
left padding.

3. Define CSS selector. What are the main 4 kinds of CSS selectors?
Answer: A CSS selector is a pattern or a set of rules that specifies which elements in an
HTML document should be styled by the accompanying CSS rules. Selectors target HTML
elements based on their type, attributes, relationships with other elements, or position
within the document structure.

There are several types of CSS selectors, but four main categories are commonly used:

1. Type or Element Selectors:


Syntax: elementname { /* styles */ }
Example: p { color: blue; }
Targets all instances of the specified HTML element (e.g., <p>).
2. Class Selectors:
Syntax: .classname { /* styles */ }
Example: .highlight { background-color: yellow; }
Targets all elements with a specific class attribute (e.g., <div class="highlight">).

3. ID Selectors:
Syntax: #idname { /* styles */ }
Example: #header { font-size: 24px; }
Targets a single element with a specific ID attribute (e.g., <div id="header">).

4. Attribute Selectors:
Syntax: [attribute=value] { /* styles */ }
Example: input[type="text"] { border: 1px solid #ccc; }
Targets elements with a specific attribute and value (e.g., <input type="text">).
These selectors can also be combined to create more specific and targeted rules. For
example, you can use a combination of type and class selectors like h2.highlight to target
only <h2> elements with the class "highlight."

4. What are the three ways of inserting a style sheet to change the look of an entire
website?
Answer:
There are three main ways to insert a style sheet to change the look of an entire website:
External Style Sheet: An external style sheet is a separate file containing CSS rules that can
be linked to multiple HTML documents. This is the most recommended approach for styling
an entire website, as it promotes a clean separation of content and presentation.
How to Use:
Create a new file with a .css extension (e.g., styles.css).
Add your CSS rules to this file.
Link the external style sheet in the <head> section of each HTML document using the <link>
element.
Internal Style Sheet (Embedded Style): An internal style sheet is defined within the HTML
document itself, typically in the <head> section. It's useful when styles are specific to a single
document.
How to Use:
Place the CSS rules inside a <style> element within the <head> section of your HTML
document.
Inline Styles: Inline styles are applied directly to individual HTML elements using the style
attribute. This method is less recommended for styling an entire website, as it mixes content with
presentation and can make the HTML code less readable and maintainable.
How to Use:
Add the style attribute to an HTML element and specify the CSS rules directly.

5. Illustrate with an example of External style sheet or Internal style sheet or Inline style
or multiple style sheet insertion technique in a webpage to change the look of an entire
website.
Answer: Certainly! Let's go through examples for each method: External Style Sheet, Internal
Style Sheet, and Inline Styles.

1. External Style Sheet:


Create a file named styles.css with the following content:
/* styles.css */

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}

footer {
background-color: #333;
color: #fff;
padding: 10px;
}

Now, create an HTML file (e.g., index.html) and link the external style sheet:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>My Stylish Website</title>
</head>
<body>

<section>
<p> Welcome to My Website </p>
</section>

<footer>
<p>&copy; 2023 My Website. All rights reserved.</p>
</footer>
</body>
</html>
In this example, the index.html file links to the external style sheet (styles.css). The styles
defined in styles.css will be applied to the HTML elements, changing the overall look of the
website.

2. Internal Style Sheet:


Modify the index.html file to include an internal style sheet:
<html>
<head>
<style>
body {
font-family: Georgia, serif;
background-color: #eaeaea;
color: #555;
}

footer {
background-color: #555;
color: #fff;
padding: 10px;
}
</style>
<title>My Updated Stylish Website</title>
</head>
<body>

<section>
<p> Welcome to My Updated Website.</p>
</section>

<footer>
<p>&copy; 2023 My Website. All rights reserved.</p>
</footer>

</body>
</html>
In this example, the CSS rules are placed within a <style> element in the <head> section of
the HTML document. This defines an internal style sheet that applies styles directly to the
HTML elements in the document.

3. Inline Styles:
Modify the index.html file to include inline styles:
<html>
<head>
<title>My Inline Stylish Website</title>
</head>
<body>

<header style="background-color: #900; color: #fff; padding: 10px; text-align: center;">


<h1>Welcome to My Inline Stylish Website</h1>
</header>

<section>
<p style="font-family: 'Courier New', monospace; font-size: 18px; color: #333;">This is
a paragraph with inline styles.</p>
</section>

</body>
</html>
In this example, styles are applied directly to individual HTML elements using the style
attribute. While this method is less recommended for styling an entire website, it allows for
quick styling of specific elements within the HTML document.

Remember, the external style sheet method is generally preferred for managing the styles of
an entire website because it promotes a clean separation of content and presentation, making
it easier to maintain and update the design across multiple pages.

6. What style will be used when there is more than one style specified for an HTML
element?
Answer: When there are conflicting styles specified for an HTML element, the style that is
applied depends on the concept of specificity and the order of the styles. Here's how the priority
is determined:

1. Specificity: Styles with higher specificity take precedence over styles with lower
specificity. Specificity is a way of measuring the importance of a style rule based on the
selector's components (type, class, ID, etc.). For example, an ID selector has a higher
specificity than a class selector.
Specificity Hierarchy:
ID selectors (#example) have the highest specificity.
Class selectors (.example) and attribute selectors have medium specificity.
Type selectors (elementname), pseudo-classes, and pseudo-elements have the
lowest specificity.
2. Order of Styles: If two styles have the same specificity, the order in which they appear in
the document determines which one takes precedence. Styles defined later in the document
or in a more recently linked/loaded stylesheet will override styles defined earlier.

Here's an example to illustrate this:


<html>
<head>
<style>
/* Style 1 */
p{
color: red;
}

/* Style 2 */
#special-paragraph {
color: blue;
}
</style>
<title>Style Priority Example</title>
</head>
<body>

<!-- HTML Content -->


<p id="special-paragraph">This paragraph has conflicting styles.</p>

</body>
</html>
In this example, the paragraph with the ID special-paragraph will have a blue color because
the ID selector has higher specificity than the type selector (p). Even though both styles are
applied to the same element, the more specific style takes precedence.

Understanding specificity and the order of styles is crucial for managing and troubleshooting
styles in web development. It helps ensure that the desired styles are applied to HTML elements
as intended.

7. What are the different background properties in CSS? Explain any three of them
with an example.
Answer: CSS provides several background properties that allow you to control the background
appearance of elements. Here are three commonly used background properties along with
explanations and examples:

1. background-color:
Description: Sets the background color of an element.
Example:
body {
background-color: #f0f0f0;
}
In this example, the background color of the entire body of the document is set to a light gray
(#f0f0f0).

2. background-image:
Description: Sets one or more background images for an element.
Example:
.header {
background-image: url('header-background.jpg');
background-size: cover;
background-position: center;
}
In this example, the .header class has a background image set to 'header-background.jpg'.
The background-size: cover; property ensures that the image covers the entire background,
and background-position: center; centers the image within the element.

3. background-repeat:
Description: Specifies how a background image should be repeated.
Example:

.content {
background-image: url('content-background.png');
background-repeat: repeat-y;
}
Here, the .content class has a background image set to 'content-background.png', and
background-repeat: repeat-y; ensures that the image is repeated only along the vertical axis.

These are just a few examples of CSS background properties. By combining these properties
and others, you can achieve a wide variety of background effects to enhance the visual
presentation of your web pages.

8. How to easily change a font-sizing from px to em for a big, existing site? Explain with
an example.
Answer: Switching font sizing from pixels (px) to em units for an existing site can be done
relatively easily using a few steps. However, keep in mind that this process may require testing
and adjustments to ensure the new sizing works well across various elements and layouts.
Here's a step-by-step guide with an example:

1. Understand the Existing Styling:


Review the existing CSS styles to understand how font sizes are currently defined in pixels.
2. Set a Base Font Size:
Choose a base font size for your site. This will serve as the reference for converting pixel
values to em units. The default browser font size is typically 16px, so using this as a base is a
common practice.
3. Convert Pixel Values to Em Units:
Convert existing pixel values to em units using the formula: em = px / baseFontSize.
/* Before: */
body {
font-size: 16px; /* Example pixel value */
}

/* After: */
body {
font-size: 1em; /* Converted to em unit based on a 16px base font size */
}
4. Apply Changes Gradually:
Change font sizes gradually to avoid sudden visual changes. Start with a section or a specific
component and test how it looks.
5. Test Responsiveness:
Check the responsiveness of your site after the changes. Ensure that text remains readable and
elements maintain their intended layout on different devices.
6. Adjust Line Heights and Spacing:
Since em units are relative to the font size of their parent element, you may need to adjust line
heights and spacing as well.
/* Before: */
p{
line-height: 24px; /* Example pixel value */
margin-bottom: 16px; /* Example pixel value */
}

/* After: */
p{
line-height: 1.5; /* Converted to a unitless value relative to the font size */
margin-bottom: 1em; /* Converted to em unit */
}
Example Conversion:
Assuming you have the following CSS for your existing site:

body {
font-size: 16px;
}

h1 {
font-size: 24px;
}

p{
font-size: 14px;
}

You can convert these pixel values to em units based on a 16px base font size:
body {
font-size: 1em;
}

h1 {
font-size: 1.5em;
}

p{
font-size: 0.875em;
}

9. Let's a <div> element to have a total width of 350px or height 450px. How can you
calculate the width or height of this element to set it correctly in all browsers?
Answer: To ensure a consistent width or height for a <div> element across different browsers,
it's important to consider the following:

Box Model:
The total width (or height) of an element is influenced by its content width, padding, border,
and margin.
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left
margin + right margin

Box-Sizing Property:
The box-sizing property can be set to border-box to include padding and border in the specified
width, making calculations more straightforward.

Example for Total Width:


Let's say you want a <div> element with a total width of 350px, including padding and border.
div {
width: 300px; /* Adjust the content width as needed */
padding: 20px; /* Adjust the padding as needed */
border: 5px solid #333; /* Adjust the border width and style as needed */
box-sizing: border-box; /* Include padding and border in the specified width */
}
In this example, the content width is set to 300px, padding is 20px on each side, and the border
is 5px. The box-sizing: border-box; ensures that the specified width includes padding and
border, resulting in a total width of 350px.
Let's do the math:
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

The total height of an element should be calculated like this:


Total element height = height + top padding + bottom padding + top border + bottom border
+
top margin + bottom margin

Example for Total Height:


Let's say you want a <div> element with a total height of 450px, including padding and border.
div {
height: 400px; /* Adjust the content height as needed */
padding: 20px; /* Adjust the padding as needed */
border: 5px solid #333; /* Adjust the border width and style as needed */
box-sizing: border-box; /* Include padding and border in the specified height */
}
n this example, the content height is set to 400px, padding is 20px on each side, and the border
is 5px. The box-sizing: border-box; ensures that the specified height includes padding and
border, resulting in a total height of 450px.

10. How many types of CSS lists? Write down different list item markers in CSS with an
example.

In CSS, there are several types of lists, each with its own set of list item markers. The type of list
is determined by whether it's an ordered list (<ol>) or an unordered list (<ul>), and you can
customize the appearance of list item markers using the list-style-type property. Here are
examples of different list item markers for both ordered and unordered lists:

Unordered List Item Markers:

1. Disc (Default):

ul.disc {
list-style-type: disc;
}

Circle:

ul.circle {
list-style-type: circle;
}

Square:

ul.square {
list-style-type: square;
}

None (Removes Bullets):

ul.no-bullets {
list-style-type: none;
}

Ordered List Item Markers:


Decimal (Default):

ol.decimal {
list-style-type: decimal;
}

Lowercase Roman Numerals:

ol.lower-roman {
list-style-type: lower-roman;
}

Uppercase Roman Numerals:

ol.upper-roman {
list-style-type: upper-roman;
}

Lowercase Alphabetic:

ol.lower-alpha {
list-style-type: lower-alpha;
}

Uppercase Alphabetic:

ol.upper-alpha {
list-style-type: upper-alpha;
}

Custom List Item Marker (Image):

You can also use a custom image as the list item marker:

ul.custom-marker {
list-style-image: url('custom-marker.png');
}

In this example, replace 'custom-marker.png' with the path to your desired image file.

These examples demonstrate various ways to style list item markers in CSS. The list-style-
type property provides flexibility in choosing the appearance of markers, and you can use it to
achieve the desired visual effect for both ordered and unordered lists.
11. Consider the following HTML page. Explain how you would beautify the given
HTML in
order to make (i) the page background change to red (ii) the text-align set to "justify"
(iii) the
text-decoration set to add underline (iv) the text-transform change to specify
uppercase.
<html>
<head>
<title>Test Page</title>
</head>
<body>
<h1> The Department of Information and Communication Engineering (ICE)
Was founded in 2011. The goal of ICE Department is to cultivate highly motivated
and well-trained professionals who will lead the ICT arena. </h1>
</body>
</html>

Certainly! To beautify the given HTML page and apply the specified styles, you can use inline
styles or, better yet, an external CSS file. Below is an example using inline styles within the
HTML:

<html>
<head>
<title>Test Page</title>
<style>
body {
background-color: red; /* (i) Change background to red */
}

h1 {
text-align: justify; /* (ii) Set text-align to justify */
text-decoration: underline; /* (iii) Add underline */
text-transform: uppercase; /* (iv) Change text-transform to
uppercase */
}
</style>
</head>
<body>
<h1>The Department of Information and Communication Engineering (ICE)
was founded in 2011. The goal of ICE Department is to cultivate highly
motivated and well-trained professionals who will lead the ICT arena.
</h1>
</body>
</html>

In this example:
• (i) The background color of the entire page is set to red using the background-color
property in the body selector.
• (ii) The text-align property in the h1 selector is set to "justify" to align the text
justified.
• (iii) The text-decoration property in the h1 selector is set to "underline" to add
an underline to the text.
• (iv) The text-transform property in the h1 selector is set to "uppercase" to
transform the text to uppercase.

It's generally good practice to use an external CSS file for styling to separate the HTML structure
from the styling information, promoting better maintainability and reusability.

You might also like