Complete CSS HSC Notes By Amit Sir's (SYJC & FYJC)

 

Quetion 1) What is CSS?

Answer :    

  1. CSS stands for Cascading Style Sheets.
  2. CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
  3. CSS saves a lot of work
  4. External stylesheets are stored in CSS files

Question 2) Why Use CSS?

Answer : CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

Example : 

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

Question 3) Explain CSS Syntax.

Example :

Selector

  1.  A CSS rule-set consists of a selector and a declaration block:
  2. The selector points to the HTML element you want to style.
  3. The declaration block contains one or more declarations separated by semicolons.
  4. Each declaration includes a CSS property name and a value, separated by a colon.
  5. Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

Example : In this example all <p> elements will be center-aligned, with a red text color:

Example Explained

p {
  color: red;
  text-align: center;
}

  • p is a selector in CSS (it points to the HTML element you want to style: <p>).
  • color is a property, and red is the property value
  • text-align is a property, and center is the property value

Question 4) What is CSS ID Selector?

Answer : 

  1. The id selector uses the id attribute of an HTML element to select a specific element.
  2. The id of an element is unique within a page, so the id selector is used to select one unique element!
  3. To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Example

The CSS rule below will be applied to the HTML element with id="para1": 

#para1 {
  text-align: center;
  color: red;
}

Question 5) Explain Type of CSS?

Answer : 

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

  • External CSS
  • Internal CSS
  • Inline CSS

Question 6) What is External CSS?

Answer : 

  1. With an external style sheet, you can change the look of an entire website by changing just one file!
  2. Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.

Example

External styles are defined within the <link> element, inside the <head> section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

An external style sheet can be written in any text editor, and must be saved with a .css extension.

The external .css file should not contain any HTML tags.

Here is how the "mystyle.css" file looks like:

"mystyle.css"

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Note: Do not add a space between the property value and the unit (such as margin-left: 20 px;). The correct way is: margin-left: 20px;

Question 7) How to set CSS background-color?

Answer : 

The background-color property specifies the background color of an element.

Example

The background color of a page is set like this:


  background-color: lightblue;
 

Question 8) How to set CSS background-image?

Answer : The background-image property specifies an image to use as the background of an element.

Example : background-image: url("paper.gif");

Question 9) How to set CSS Border Properties?

Answer :  The CSS border properties allow you to specify the style, width, and color of an element's border.

Border : 

 border: 1px solid;

  border-style: dotted;
  border-color: blue;

Question 10) How to set Margin of element?

Answer :

CSS has properties for specifying the margin for each side of an element:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Question 11) How to set CSS height and width of element?

Answer : 

The height and width properties are used to set the height and width of an element.

Set the height and width of a <div> element:

p {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

Question 12) Explain All CSS Fonts Properties.

Font Family : The font family of a text is set with the font-family property.

Example :  font-family: "Times New Roman", Times, serif;

Font Style

The font-style property is mostly used to specify italic text.

This property has three values:

  • normal - The text is shown normally
  • italic - The text is shown in italics
  • oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
  • p.italic {
      font-style: italic;
    }

Font Size

The font-size property sets the size of the text.

h1 {
  font-size: 40px;
}
Question 13) How to use Text Align Property of CSS?

Answer : This property is used to align the element to the left, right or center.

Example :  text-align: center;

text-align: left;

text-align: right;