Scribd
Upload
5 views4 pages

CSS Research BIS 22 SS 009

The document discusses CSS specificity, explaining how browsers determine which styles to apply when conflicting property values are present. It outlines the hierarchy of selectors and their specificity values, emphasizing that inline CSS has the highest precedence. Additionally, it covers CSS color values and the advantages and disadvantages of various image formats used in web technologies.

Uploaded by

bis22-pjimu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views4 pages

CSS Research BIS 22 SS 009

The document discusses CSS specificity, explaining how browsers determine which styles to apply when conflicting property values are present. It outlines the hierarchy of selectors and their specificity values, emphasizing that inline CSS has the highest precedence. Additionally, it covers CSS color values and the advantages and disadvantages of various image formats used in web technologies.

Uploaded by

bis22-pjimu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

MALAWI UNIVERSITY OF BUSINESS AND APPLIED SCIENCE

Department of Computer Science and Information Systems


BIS 3
SUBMITTED TO:
M. Nkonjo

NAME:
Prince Jimu BIS/22/SS/009

COURSE
Web Technologies (WEB-301)

DUE DATE
20 Feb 2025
CSS SPECIFICITY
Specificity is a feature of CSS that allows the browser to use an algorithm to determine the
styling value to be applied to an element if the element has been given conflicting property
values using different selectors. For example, if an element has been targeted in an external CSS
file using its class name (.card) and its id (#info-card), and the same property is given different
values in the selections, the algorithm determines which style to apply to the element.
There is a hierarchy of selectors that is used by the algorithm to determine which style to render.
According to Mozzilla (2025), the algorithm uses weight to determine the style block of higher
precedence. It calculates this weight by counting the number of “selectors of each weight
category”. The Order is as follows:
Selector Specificity value
ID e.g. #main-menu 1,0,0
Class name e.g. .menu 0,1,0
Tag Selector e.g. p, h1 0,0,1
No value Selectors e.g. * (all) N/A (Does not affect Specificity)

If multiple selectors are used, for example #wrapper .upper , the browser adds up the specificity
values of the selectors present. In this case, the browser will add the specificity value of one ID
(1,0,0) and one class (0,1,0) to get (1,1,0). If there is another styling block with a selector group
with a higher specificity value, that block will be prioritized. If not, then the styling in this given
block will take effect.
Apart from these precedence values, inline CSS has the highest Specificity and therefore will
always be rendered regardless of the values of the selectors in the internal or external CSS.
Examples Showing Specificity:
1. Inline Precedence:
Inline CSS Tag Selector Output
<h1 style="color: blue;"> h1{ color: red;
Testing Header }
</h1>

2. ID precedence:
ID Selector Class Selector Output
#top-title{ color: red; .main-title{color:
} grey;}
CSS Color Values
As described by MDN (2024), color codes and values are used to define color to the computer.
The values of different color codes represent amounts of variables like brightness, hue, saturation
or amounts of primary colors (Red, Blue, Green) mixed to create the color rendered to the
screen.
CSS also has in built color names such as “blue” and “orangered”.
Color Code Meaning Values Example
RGB (red, green, blue) From 0-255 representing (0,255,0) – green
each color or percentages.
RGBA (red, green, blue, Similar to rgb with alpha (0,0,255,255)-Blue
alpha) value representing opacity.
HEX #RRGGBB Hexadecimal values Ranging #0000FF - blue
from 00 to FF with two digits
representing one color
HSL (Hue, Saturation, Hue – defines the color, (147, 50%, 47%)-
Lightness) ranges from 0-360 shade of green
Saturation-is a percentage of
color saturation.
Lightness-the brightness of
the color
HSLA (Hue, Saturation, Similar to HSL with an alpha (147, 50%, 47%)-
Lightness, value green
Alpha)

IMAGE FORMATS ADVANTAGES AND DISADVANTAGES


Format Best Usage Scenario Advantage Disadvantage
JPEG (Joint Best used when Well supported by Does not support
Photographic Expertsdisplaying images Most Browsers. transparency and
Group) with complex colors animations.
such as gradients.
PNG(Portable Best used for images Allows image Usually larger file
Network Graphics) with transparent compression without size compared to
features. losing much quality JPG.
SVG(Scalable Vector Best used for Smaller File size Easily Loses quality
Graphics) illustrations or compared to other when resizing.
diagrams without formats.
complex coloring.
GIF(Graphics Best used for images Can be used to render Limited color depth
Interchange Format) with animated parts. simple animations
without third-party
apps
References
W3Schools.com. (2025). CSS Specificity. https://www.w3schools.com/css/css_specificity.asp

Attardi, J. (2020). Modern CSS. Berkeley, CA Apress, 1.

MDN. (2025). Specificity.

https://developer.mozilla.org/enUS/docs/Web/CSS/CSS_cascade/Specificity

Gupta. A. (2025). The Best Guide To Understand CSS Colors.

https://www.simplilearn.com/tutorials/css-tutorial/css-colors#css_colors

Gayathri. (2023). Which is the Best Image Format for Your Website?.

https://imagekit.io/blog/best-image-format-for-web/

You might also like