When multiple CSS rules apply to the same element, the browser uses a system of precedence to determine which rule takes effect. This precedence is based on the location and specificity of the styles. More specific or closer styles override more general or distant ones.
Browser default styles
External CSS (linked stylesheets)
Imported CSS via @import
Internal CSS (within <style> tags in HTML)
Inline CSS (using style attribute directly on elements)
Styles marked with !important (overrides all others unless another !important is more specific)
Note that specificity (e.g., ID selectors vs. class selectors) and source order (last defined wins when specificity is equal) also influence which styles apply. However, inline styles and !important declarations usually dominate.