Three Ways to Insert CSS
-
External CSS
-
Internal CSS
-
Inline CSS
External CSS
With an external style sheet, you can change the look of an entire website by changing just one file!
Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.
An external style sheet can be written in any text editor, and must be saved with a .css extension.
The external .css file should not contain any HTML tags.
Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
Inline CSS
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
CSS Box Model
In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
Explanation of the different parts:
-
Content - The content of the box, where text and images appear
-
Padding - Clears an area around the content. The padding is transparent
-
Border - A border that goes around the padding and content
-
Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space between elements.
Width and Height of an Element
In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
CSS Backgrounds
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position -
background(shorthand property)
CSS background-image
The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
Note: When using a background image, use an image that does not disturb the text.
The background image can also be set for specific elements, like the <p> element:
CSS background-repeat
By default, the background-image property repeats an image both horizontally and vertically.
Some images should be repeated only horizontally or vertically, or they will look strange
CSS background-attachment
The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):
CSS Combinators
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS:
-
descendant后代 selector (space)
-
child selector (>)
-
adjacent/əˈdʒeɪsnt/ 毗邻的 sibling兄弟 selector (+)
-
general sibling selector (~)
What are Pseudo-classes?
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
-
Style an element when a user mouses over it
-
Style visited and unvisited links differently
-
Style an element when it gets focus
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.
CSS Attribute Selectors
Style HTML Elements With Specific Attributes
It is possible to style HTML elements that have specific attributes or attribute values.
CSS [attribute] Selector
The [attribute] selector is used to select elements with a specified attribute.
CSS [attribute="value"] Selector
The [attribute="value"] selector is used to select elements with a specified attribute and value.
CSS [attribute~="value"] Selector
The [attribute~="value"] selector is used to select elements with an attribute value containing a specified word.
CSS [attribute|="value"] Selector
The [attribute|="value"] selector is used to select elements with the specified attribute starting with the specified value.
The following example selects all elements with a class attribute value that begins with "top"
CSS [attribute^="value"] Selector
The [attribute^="value"] selector is used to select elements whose attribute value begins with a specified value.
CSS [attribute$="value"] Selector
The [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value.
CSS [attribute*="value"] Selector
The [attribute*="value"] selector is used to select elements whose attribute value contains a specified value.
CSS Specificity
What is Specificity?
If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out.
Think of specificity as a score/rank that determines which style declarations are ultimately applied to an element.
The universal selector (*) has low specificity, while ID selectors are highly specific!
Note: Specificity is a common reason why your CSS-rules don't apply to some elements, although you think they should.
Specificity Hierarchy
Every selector has its place in the specificity hierarchy. There are four categories which define the specificity level of a selector:
Inline styles - An inline style is attached directly to the element to be styled.
IDs - An ID is a unique identifier for the page elements
Classes, attributes and pseudo-classes - This category includes .classes, [attributes] and pseudo-classes such as :hover,
Elements and pseudo-elements - This category includes element names and pseudo-elements
What is !important?
The !important rule in CSS is used to add more importance to a property/value than normal.
In fact, if you use the !important