Udemy Python Bootcamp Day 043
CSS(Cascading Style Sheets)
Changing the Style
- Inline CSS : Simply injecting CSS code in the same line as our body HTML element.
<body style="background-color: #C1F4C5;">- Internal CSS : Injecting CSS code in the
<head>
<style>
body {
background-color: #C1F4C5;
}
hr {
border-color: #65C18C;
border-style: none;
border-top-style: dotted;
border-width: 5px;
width: 5%;
}
img {
height : 180px;
}
</style>- External CSS : Making CSS file and linking it to HTML file below the
<title>.
index.html
<link rel="stylesheet" href="css/styles.css">styles.css
body {
background-color: #FFE2E2;
}
hr {
border-color: #FFC7C7;
border-style: none;
border-top-style: dotted;
border-width: 5px;
width: 5%;
}
img {
height : 180px;
}
h1 {
color: #8785A2;
}
h3 {
color: #8785A2;
}For the same property in different places, the priority is given to the inline element. The next most important CSS rule is the one inside internal CSS.
And what it means in that you can apply a global CSS rule to all of your web pages, but on the individual web pages, you can apply more specific rules through using internal or inline CSS as more or less one-off changes for that specific page or that specific element on that page.
CSS Syntax
CSS syntax refers to is just the grammer of the CSS language.
selector{property:value;}
Changing the appearance of some property and give it a new value and ending with a semicolon at the end.
selector-who?property-what?value-how?
Make sure having all you properties in alphabetical order.
CSS Seletors
- The
classatrribute allows us to differentiate all of our different HTML elements.
.html
<img class="bacon" src="bacon.png" alt="bacon-img">.css
.bacon {
background-color: green;
}- The
idattribute
.html
<h1 id="heading">I Love Bacon</h1>.css
#heading {
color: blue;
}class, id seletors override tag selectors.
One of the big differences between the class and the id is that you can only have a single instance of one particular id name inside a single page.
So use classes when tou want to apply the same style to a group of related items and use the id to apply a specific style to a single element in your web page.
And we can add more than two classes to the same HTML element.
Pseudo Classes
Pseudo classes have a colon in front
And the one that you'll see the most often is the :hover qeudo class.
:hover: The:hoverpseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).
img:hover {
background-color: gold;
}
