Types of CSS: Inline, Internal, External
Uploaded by
mannasirsa.s440Types of CSS: Inline, Internal, External
Uploaded by
mannasirsa.s440Chapter 3
33. What is the full form of css, what are the types of css
explain with example code .
CSS stands for : Cascading Style Sheets
CSS is used to style and layout HTML elements — such as
changing colors, fonts, spacing, positioning, and responsiveness
— separately from the HTML content .
Type Where It's Written Scope/Use Case
Inside the HTML element
Inline CSS Quick, one-off styling
itself
Inside a <style> tag in
Internal CSS Used for styling a single HTML file
<head>
External Used for large websites with many
In a separate .css file
CSS pages
34. What is inline, internal, external css, explain each css
type with example code .
CSS
Location Use Case Pros Cons
Type
Inline Inside HTML tag Quick, one- Hard to
Simple, fast
CSS (style="") element styling maintain
CSS
Location Use Case Pros Cons
Type
Internal <style> in One-page Centralized in Can’t reuse
CSS <head> websites one file across pages
External In separate .css Multi-page Clean, reusable, Needs external
CSS file websites scalable file loading
35. What are the various types of css selectors are there,
explain the utility of using each types of css selectors .
Selector Type Syntax Example Selects...
1. Universal Selector * All elements
2. Element Selector p, h1, div All elements of a specific tag
3. ID Selector #id One unique element with a specific ID
4. Class Selector .class All elements with a specific class
5. Group Selector h1, p, .class Multiple elements at once
6. Descendant
div p All <p> inside <div>
Selector
7. Child Selector ul > li Direct child only (not nested further)
8. Adjacent Sibling h1 + p First <p> right after an <h1>
9. General Sibling h1 ~ p All <p> after an <h1> sibling
Elements with specific
10. Attribute Selector input[type="text"]
attributes/values
11. Pseudo-class a:hover, li:first-child Elements in a specific state
p::first-letter,
12. Pseudo-element Part of an element (e.g., first letter)
p::before
36. Write the code of css image gallery .
37. Explain with example code class selector, id selector,
tag selector, sub selector, attribute selector, group selector,
global selector, universal selectors .
Selector Type Syntax Description
Selects all elements with a
Class Selector .classname
specific class
Selects one unique element with
ID Selector #idname
a specific ID
Selects all elements of a given
Tag Selector tagname
tag (e.g. p, h1)
Sub Selector Selects <p> inside a <div> (any
div p
(Descendant) level deep)
Selects elements with specific
Attribute Selector input[type="text"]
attributes
Group Selector h1, p, .class1 Selects multiple elements at once
Global Selector html or body Selects the root HTML elements
Universal Selector * Selects all elements
38. What are the various available css properties are there,
back ground properties, box properties, list properties,
border properties, positioning properties .
🎨 1. Background Properties
Property Usage Example
Sets the background background-color:
background-color
color lightblue;
Adds an image as background-image:
background-image
background url('[Link]');
background- Repeats image (or background-repeat: no-
repeat not) repeat;
background- Positions background-position:
position background image center top;
Sets background
background-size background-size: cover;
image size
background- Scroll or fix background-attachment:
attachment background fixed;
📦 2. Box Model Properties
Property Usage Example
width,
Sets element size width: 300px; height: 150px;
height
padding Space inside the border padding: 10px;
Space outside the
margin margin: 20px;
border
Sets border around the
border border: 2px solid black;
element
box- Adds shadow to the box-shadow: 0 4px 8px
shadow box rgba(0,0,0,0.2);
box- Includes padding &
box-sizing: border-box;
sizing border in width
📝 3. List Properties
Property Usage Example
list-style- Bullet type (circle,
list-style-type: square;
type square, none)
list-style- Inside or outside the list-style-position:
position list marker inside;
list-style- Use an image instead list-style-image:
image of bullet url('[Link]');
Shorthand for all list
list-style list-style: square inside;
styles
🔲 4. Border Properties
Property Usage Example
border: 1px solid
border Sets full border
black;
border-width Sets only width border-width: 2px;
Dashed, solid, dotted,
border-style border-style: dashed;
etc.
border-color Border color border-color: red;
border-
Rounds the corners border-radius: 10px;
radius
📌 5. Positioning Properties
Property Usage Example
position Specifies positioning method position: relative;
top, left, right, top: 10px; left:
Offsets from respective sides 20px;
bottom
z-index Stack order (higher = front) z-index: 10;
float Float element to left/right float: right;
clear
Prevents elements from wrapping floated clear: both;
ones
display Controls layout mode (block, inline, etc.) display: flex;
39. How css can be applied to lists, tables and explain css menu
design with example code .
40. What is the syntax of commenting in css .
/* This is a comment in CSS */
💡 Rules:
Comments can span multiple lines.
CSS ignores comments—they don’t affect the layout or styling.
Used to explain code, disable parts temporarily, or add notes.