Академический Документы
Профессиональный Документы
Культура Документы
Here's how you would set your h2element's text color to blue:
Another way
<style>
h2 {color: red;}
</style>
Another
<style>
.blue-text {
color: blue;
}
</style>
<h2 class="blue-text">CatPhotoApp</h2>
………………………………………………………………………………………………………………………………
for instance
<style>
.red-text {
color: red;
}
p {
font-size: 16px;
}
</style>
Set the Font Family of an Element
h2 {
font-family: sans-serif;
}
p {
font-family: Lobster;
}
</style>
For example, if you wanted an element to use the Helveticafont, but degrade to the sans-
seriffont when Helveticawasn't available, you will specify it as follows:
p {
font-family: Helvetica, sans-serif;
}
Generic font family names are not case-sensitive. Also, they do not need quotes because they
are CSS keywords.
Size Your Images
<style>
.larger-image {
width: 500px;
}
</style>
Larger-image is a class
For example, if we wanted to create a red, 5 pixel border around an HTML element, we could
use this class:
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
However, an id is not reusable and should only be applied to one element. An id also has a higher
specificity (importance) than a class so if both are applied to the same element and have conflicting
styles, the styles of the id will be applied.
Priority id style then class style
<p id=”cat-photo-element”>Text</p>
An element's paddingcontrols the amount of space between the element's content and
its border.
padding: 20px;
Here, we can see that the blue box and the red box are nested within the yellow box. Note that
the red box has a bigger margin than the blue box, making it appear smaller.
When you increase the blue box's margin, it will increase the distance between its border and
surrounding elements.
Margin:50px;
Margin: -15px
margin-top: 40px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 40px;
shortcut
These four values work like a clock: top, right, bottom, left
margin: 10px 20px 10px 20px;
These four values work like a clock: top, right, bottom, left
……………………………………………………………..
<style>
body {
background-color: black;
color:green;
font-family: monospace;
}
</style>
<h1>Hello World</h1>
………………………………………………………………
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 style="color: white;" id="orange-text" class="pink-text blue-text">Hello
World!</h1>
.pink-text {
color: pink !important;
}
Coloring
background-color: #000000;
background-color: rgb(0, 0, 0);
--penguin-skin: gray;
This will create a variable named --penguin-skin and assign it the value of gray
background: var(--penguin-skin);
Backup color
background: var(--penguin-skin, black);
Please check it
<style>
:root {
--red-color: red;
}
.red-box {
background:red;
background: var(--red-color);
height: 200px;
width:200px;
}
</style>
<div class="red-box"></div>
Cascading CSS variables
When you create a variable, it becomes available for you to use inside the element in which you
create it. It also becomes available within any elements nested within it. This effect is known
as cascading.
You can think of the :root element as a container for your entire HTML document, in the same
way that an htmlelement is a container for the bodyelement.
By creating your variables in :root, they will be available throughout the whole web page.
:root {
--penguin-belly:pink;
body {
background: var(--penguin-belly, #c6faf1);
}