kyungmin-Earnest-Lim
commented
1 year ago Why Conflict Happens
there are three different types of style sheets (author-created, user-defined, and the default browser style sheet
CSS has a system to help the browser determine how to display elements when different style rules conflict
Cascade
how conflicting rules are handled. inheritance, specificity, location
inheritance
CSS properties affect not only themselves but their descendants as well
Font, color, list, and text properties are inheritable
Specificity
which style rule takes precedence when more than one style rule could be applied to the same element
Location
inheritance and specificity cannot determine style precedence, the principle of location will be used
when rules have the same specificity, then the latest are given more weight
The Box Model
In CSS, all HTML elements exist within an element box.
Background
The background color or image of an element fills an element out to its border (if it has one that is).
Borders provide a way to visually separate elements. You can put borders around all four sides of an element, or just one, two, or three of the sides
Margins and Padding
margin은 블록 간 간격 padding은 블록 안에서의 content와 block사이의 간격
TEXT STYLING
CSS is W3C standard for describing the apperance of html elements
has own syntax rules can add to any html elements, within the
elementbenefit -> more maintainable in web site cuz all formatting can be centralized into one -> more accessible
inline styles
An inline style only affects the element it is defined within and will override any other style definitions for the properties used in the inline style. increase bandwidth and decrease maintainability.
Embedded sytle sheet
While better than inline styles, using embedded styles is also by and large discouraged.
exernal style sheet
This is by far the most common place to locate style rules because it provides the best maintainability.
When you make a change to an external style sheet, all HTML documents that reference that style sheet will automatically use the updated version.
selector
When defining CSS rules, you will need to first need to use a selector to tell the browser which elements will be affected.
reset
Grouped selectors are often used as a way to quickly reset or remove browser defaults
class selector
A class selector allows you to simultaneously target different HTML elements regardless of their position in the document tree.
id selector
An id selector allows you to target a specific element by its id attribute regardless of its type or position.
id versus class selectors
Id selectors should only be used when referencing a single HTML element since an id attribute can only be assigned to a single HTML element. Class selectors should be used when (potentially) referencing several related elements.
attribute selector
Attribute selectors can be a very helpful technique in the styling of hyperlinks and images.
pseudo selector
The most common use of this type of selectors is for targeting link states.