UNIT 5 - CSS, Inline, Internal and external CSS, Colors, Font, Sizes and Border, Padding and Margin, Linking to External CSS.
1. Introduction to CSS
CSS (Cascading Style Sheets) is used to style and design web pages. It controls the layout, colors, fonts, spacing and overall appearance of HTML elements. CSS helps separate content from presentation, making web pages more attractive and easier to maintain.
2. Types of CSS
There are three main types of CSS used to apply styles to HTML elements.
(a) Inline CSS
Inline CSS is written inside the HTML element using the style attribute.
Short Answer Questions
1. What is Inline CSS?
Inline CSS is used to apply CSS styles directly to a single HTML element.
2. Where is Inline CSS written?
Inline CSS is written inside the style attribute of an HTML tag.
Long Answer Question
Explain Inline CSS.
Inline CSS is used to apply style directly to a single HTML element using the style attribute.
It affects only that specific element.
Inline CSS has the highest priority among all types of CSS.
It is useful for quick styling but is not recommended for large websites because it makes the code lengthy and difficult to maintain.
(b) Internal CSS
Internal CSS is written inside the <style> tag within the <head> section of an HTML document.
Short Answer Questions
1. What is Internal CSS?
Internal CSS is used to apply CSS styles to a single HTML page.
2. Where is Internal CSS written?
Internal CSS is written inside the <style> tag, which is placed in the <head> section of an HTML document.
Long Answer Question
Explain Internal CSS.
Internal CSS is used to apply styles to a single web page.
It is written inside the <style> tag in the <head> section.
Internal CSS helps apply the same style to multiple elements on the same page.
It is better than inline CSS but still not suitable for large websites with multiple pages.
(c) External CSS
External CSS is written in a separate .css file and linked to the HTML document.
Short Answer Questions
1. What is External CSS?
External CSS is used to apply styles to multiple HTML pages using a separate CSS file.
2. Which file extension is used for External CSS?
The .css file extension is used for External CSS.
Long Answer Question
Explain External CSS.
External CSS is used to style multiple web pages using a single CSS file.
The styles are written in a separate file with a .css extension.
External CSS improves code reusability, consistency and easy maintenance.
It is the most preferred method for styling large websites.
3. Colors in CSS
CSS colors are used to set text color, background color and border color. Colors can be specified using color names, RGB values or hexadecimal values.
Short Answer Questions
1. What is the use of colors in CSS?
Colors in CSS are used to make web pages attractive and to style text, backgrounds, borders and other elements.
2. Name any two ways to define colors.
- Color names (example: red, blue)
- Hexadecimal values (example: #FF0000)
Long Answer Question
Explain colors in CSS.
Colors in CSS are used to enhance the appearance of web pages.
They can be applied to text, backgrounds, borders and other elements.
CSS supports different color formats such as color names, RGB and hexadecimal values.
Proper use of colors improves readability and visual appeal of a website.
4. Font in CSS
Fonts in CSS control the style and appearance of text. Common font properties include font-family, font-size and font-style.
Short Answer Questions
1. What is the use of fonts in CSS?
Fonts in CSS are used to change the style, size and appearance of text to make web pages readable and attractive.
2. Name any two font properties.
- font-family
- font-size
Long Answer Question
Explain font properties in CSS.
Font properties in CSS are used to change the appearance of text.
The font-family property specifies the typeface, font-size controls the size of text and font-style defines whether text is normal or italic.
Proper font selection improves readability and user experience.
5. Size and Border in CSS
CSS size properties control width and height of elements. Border properties are used to create borders around elements.
Short Answer Questions
1. What is the use of border in CSS?
Borders in CSS are used to draw a line around HTML elements to highlight or separate them.
2. Name any two border properties.
- border-style
- border-color
Long Answer Question
Explain size and border in CSS.
CSS size properties such as width and height control the size of elements on a web page.
Border properties are used to draw a boundary around elements.
Common border properties include border-width, border-style and border-color.
Borders help separate content and improve layout design.
6. Padding and Margin
Padding is the space inside the border of an element, while margin is the space outside the border.
Short Answer Questions
1. What is padding in CSS?
Padding is the space between the content of an element and its border.
2. What is margin in CSS?
Margin is the space outside the border of an element, used to create space between elements.
Long Answer Question
Explain padding and margin in CSS.
Padding and margin are spacing properties in CSS.
Padding creates space between the content and the border of an element.
Margin creates space outside the element, separating it from other elements.
Proper use of padding and margin improves layout structure and readability.
7. Linking to External CSS
External CSS is linked to HTML using the <link> tag inside the <head> section.
Short Answer Questions
1. How is an external CSS file linked?
An external CSS file is linked to an HTML page using the link tag with the href attribute specifying the CSS file path.
2. Which tag is used to link external CSS?
The <link> tag is used to link external CSS files.
Example:
<link
rel="stylesheet"
type="text/css"href="style.css">
Long Answer Question
Explain how to link external CSS to HTML.
To link an external CSS file to an HTML document, the <link> tag is used inside the <head> section.
The rel attribute is set to stylesheet and the href attribute specifies the path of the CSS file.
Linking external CSS allows consistent styling across multiple web pages.
