- How to add CSS to HTML
- Setting up CSS rules
- Selectors, Properties & Values
- Conflicting Styles
1. Inline styling
<body>
<main>
<section style="background:#ff1b68">
<h1>Welcome to shuyanonline.com</h1>
</section>
</main>
</body>
2. CSS rules
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
section{
background:#ff1b68;
}
</style>
</head>
<body>
<main>
<section>
<h1>Welcome to shuyanonline.com</h1>
</section>
</main>
</body>
3. use external style sheets
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS course</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<main>
<section>
<h1>Welcome to ShuyanOnline.com</h1>
</section>
<section>
<h1>Chose your course</h1>
</section>
</main>
</body>
</html>
main.css
section{
background: #ff1b68;
}
h1 {
color: white;
font-family: 'Anton', sans-serif;
}
More about selectors
Elements - Set equal style for these element
h1 {
color: white;
font-family: 'Anton', sans-serif;
}
Classes - Set equal style for elements within the same class
.post {
color: red;
}
Universal - Rarely use this one!
* {
color: red;
}
IDs - Set style to one specific element
#my-title {
color: red;
}
Attributes - Set equal styles to all elements with attributes
index.html
<button disabled>
Click
</button>
main.css
[disabled] {
color: red;
}
Notes: ID must be unique, classes can be reused.
Cascading Style Sheets & Specificity
Cascading Style Sheets & Specificity
Cascading - Multiple Rules can apply to the same element
Specificity - Resolve conflicts arising from multiple rules
priority from high to low:
Inline styles 》 #ID selectors 》 .class, :pseudo-class and [attribute] selectors 》 <tag> and ::pseudo-element selectors
Inheritance
An element inheritance some styles from the parent element
Combinators
(Over.)
font-family: inherit;
Combinators
- Adjacent sibling (elements share the same parent; second element comes immediately after first element)
div + p {
}
- General sibling (elements share the same parent; second element comes after first element)
div ~ p {
}
- Child (second element is a direct child of first element)
div > p {
}
- Descendant (second element is a descendant of the first element)
div p {
}
Summary:
- CSS works with Rules
- Different Types of Selectors
- Properties & Values
- Long list of available properties and values
- Check MDN or comparable references
- Different type of values, depending on properties
- Selectors with Combinators
- Inheritance & Specifity
- Parent styles are generally inherited
- Multiple rules can apply to one element
- Specifity resolves "multiple rules" conflicts
- Inheritance defaults can be changed
(Over.)
No comments:
Post a Comment