Border
border properties allow you to specify the style, width, and color of an element’s border.
border: width style color;
<div class="row">
<div class="col-4">
<h4>Border 1</h4>
<div><strong>border:</strong> width color style</div>
<div><strong>style:</strong> none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;</div>
<div><strong>color:</strong> any color;</div>
<div><strong>width:</strong> px;</div>
</div>
<div class="col-8" id="border_1">
Hi my name is Folau
</div>
</div>
<style>
#border_1{
padding: 25px;
border: blue solid 2px;
}
</style>
Border radius
border-radius property defines the radius of the element’s corners. This property allows you to add rounded corners to elements.
<div class="row">
<div class="col-4">
<h4>Border radius</h4>
</div>
<div class="col-8" id="borderRadius">
Hi my name is Folau
</div>
</div>
<style>
#borderRadius{
border-radius: 25px;
border: blue solid 2px;
}
</style>
Padding is used to generate space around an element’s content, inside of any defined borders.
padding: top right bottom left;
padding: 10px 10px 25px 20px;
top has 10px padding
right has 10px padding
bottom has 25px padding
left has 20px padding
padding: top right/left bottom;
padding: 10px 25px 20px;
top has 10px padding
right and left have 25px padding
bottom has 20px padding
padding: top/bottom right/left;
padding: 25px 30px;
top and bottom have 25px padding
right and left have 30px padding
padding: top/bottom/right/left;
padding: 25px;
all four paddings are 25px
Text color
<div class="row">
<div class="col-4">
<h4>Text Color</h4>
</div>
<div class="col-8" id="textColor">
Hi my name is Folau. color property is used to set the color of the text
</div>
</div>
<style>
#textColor{
color: blueviolet;
}
</style>
Text alignment
<div class="row">
<div class="col-4">
<h4>Text Alignment</h4>
</div>
<div class="col-8" id="textAlignment">
Hi my name is Folau. text-align property is used to set the horizontal alignment of a text. A text can be left or right aligned, centered, or justified.
</div>
</div>
<style>
#textAlignment{
text-align: center;
}
</style>
Text decoration
<div class="row">
<div class="col-4">
<h4>Text Decoration</h4>
<div><strong>text-decoration:</strong> text-decoration-line text-decoration-color text-decoration-style</div>
<div><strong>text-decoration-line:</strong> none|underline|overline|line-through|initial|inherit;</div>
<div><strong>text-decoration-color:</strong> color|initial|inherit;</div>
<div><strong>text-decoration-style:</strong> solid|double|dotted|dashed|wavy|initial|inherit;</div>
</div>
<div class="col-8" id="textDecoration">
Hi my name is Folau. text-decoration property is used to set or remove decorations from text. It is not recommended to underline text that is not a link, as this often confuses the reader.
<p>This is paragraph 1 overline</p>
<p>This is paragraph 2 line-through</p>
<p>This is paragraph 3 underline</p>
<p>It is not <a>recommended</a> to underline text that is not a link, as this often confuses the reader.</p>
</div>
</div>
<style>
#textDecoration :nth-child(1){
text-decoration: overline;
}
#textDecoration :nth-child(2){
text-decoration: line-through red;
}
#textDecoration :nth-child(3){
text-decoration: underline lime wavy;
}
#textDecoration :nth-child(4) a{
text-decoration: none;
}
</style>
Text transformation
<div class="row">
<div class="col-4">
<h4>Text Transformation</h4>
<div><strong>text-transform:</strong> none|capitalize|uppercase|lowercase|initial|inherit;</div>
</div>
<div class="col-8" id="textTransformation">
Hi my name is Folau. text-transform property is used to specify uppercase and lowercase letters in a text.
</div>
</div>
<style>
#textTransformation{
text-transform: capitalize;
}
</style>
Text spacing indentation
<div class="row">
<div class="col-4">
<h4>Text Spacing indentation</h4>
</div>
<div class="col-8" id="textIndent">
Hi my name is Folau. text-indent property is used to specify the indentation of the first line of a text.
</div>
</div>
<style>
#textIndent{
text-indent: 30px;
}
</style>
Text spacing letter space
<div class="row">
<div class="col-4">
<h4>Text Spacing letter spacing</h4>
</div>
<div class="col-8" id="textLetterSpacing">
Hi my name is Folau. letter-spacing property is used to specify the space between the characters in a text.
</div>
</div>
<style>
#textLetterSpacing{
letter-spacing: 5px;
}
</style>
Text spacing line height
<div class="row">
<div class="col-4">
<h4>Text Spacing line height</h4>
</div>
<div class="col-8" id="textLineHeight">
Hi my name is Folau. line-height property is used to specify the space between lines. line-height property is used to specify the space between lines. line-height property is used to specify the space between lines.
</div>
</div>
<style>
#textLineHeight{
line-height: 2;
}
</style>
Text spacing word space
<div class="row">
<div class="col-4">
<h4>Text Spacing word spacing</h4>
</div>
<div class="col-8" id="textWordSpacing">
Hi my name is Folau. word-spacing property is used to specify the space between the words in a text.
</div>
</div>
<style>
#textWordSpacing{
word-spacing: 5px;
}
</style>
Text spacing white space
<div class="row">
<div class="col-4">
<h4>Text Spacing white space</h4>
<div>white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;</div>
<a href="https://www.w3schools.com/cssref/pr_text_white-space.asp">reference</a>
</div>
<div class="col-8" id="textWhiteSpacing">
Hi my name is Folau. white-space property specifies how white-space inside an element is handled. white-space property specifies how white-space inside an element is handled. white-space property specifies how white-space inside an element is handled. white-space property specifies how white-space inside an element is handled.
</div>
</div>
<style>
#textWhiteSpacing{
white-space: pre-line;
}
</style>
Text shadow
<div class="row">
<div class="col-4">
<h4>Text Shadow</h4>
<div>text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;</div>
</div>
<div class="col-8" id="textShadow">
Hi my name is Folau. text-shadow property adds shadow to text.
</div>
</div>
<style>
#textShadow{
text-shadow: 2px 2px 8px #FF0000;
}
</style>
Background Color
You can set the background color for HTML elements.
<div class="row">
<div class="col-3">
<h4>Background Color</h4>
</div>
<div class="col-9" id="backgroundColor">
Hi my name is Folau
</div>
</div>
<style>
#backgroundColor{
background-color: grey;
}
</style>
Text color
You can set the color of text.
<div class="row">
<div class="col-3">
<h4>Text Color</h4>
</div>
<div class="col-9" id="textColor">
Hi my name is Folau
</div>
</div>
<style>
#textColor{
color: green;
}
</style>
Border color
<div class="row">
<div class="col-3">
<h4>Border Color</h4>
</div>
<div class="col-9" id="borderColor">
Hi my name is Folau
</div>
</div>
<style>
#borderColor{
border:2px solid violet;
}
</style>
RGB color
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0. To display black, set all color parameters to 0, like this: rgb(0, 0, 0). To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
<div class="row">
<div class="col-3">
<h4>RGB Color</h4>
</div>
<div class="col-9" id="rgbColor">
Hi my name is Folau
</div>
</div>
<style>
#rgbColor{
background-color: rgb(255, 99, 71);
}
</style>
Hex color
#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).
For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).
<div class="row">
<div class="col-3">
<h4>Hex Color</h4>
</div>
<div class="col-9" id="hexColor">
Hi my name is Folau
</div>
</div>
<style>
#hexColor{
background-color: #ff6347;
}
</style>
HSL color
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color. Saturation can be described as the intensity of a color. 100% is pure color, no shades of gray. 50% is 50% gray, but you can still see the color. 0% is completely gray, you can no longer see the color.
Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white. The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).
<div class="row">
<div class="col-3">
<h4>HSL Color</h4>
</div>
<div class="col-9" id="hslColor">
Hi my name is Folau
</div>
</div>
<style>
#hslColor{
background-color: hsl(9, 100%, 64%);
}
</style>
A CSS selector is the part of a CSS rule that describes what elements in a document the rule will match. The matching elements will have the rule’s specified style applied to them.
There are 5 categories of selectors:
Simple selectors
id selector
<div id="logo">
Hello ID
</div>
<style>
#logo{
color: blue;
}
</style>
class selector
<div class="name">
Laulau
</div>
<div class="name">
Kinga
</div>
<style>
.name{
color: red;
}
/*or*/
div.name{
color: red;
}
</style>
element selector
<p>
Laulau
</p>
<p>
Kinga
</p>
<style>
p{
color: green;
}
</style>
Universal(*) selector
universal selector (*) selects all HTML elements on the page.
<style>
* {
text-align: center;
color: black;
}
</style>
Group selector
group selectors minimize how much code you have to write. To group selectors, separate each selector with a comma.
h3, h4, p, div {
text-align: left;
color: black;
}
Combinator selectors
A combinator is something that explains the relationship between the selectors.
Descendant selector (space)
descendant selector matches all elements that are descendants of a specified element.
<ul>
<li>
<div>List 1</div>
<ul>
<li>Name A</li>
<li>Name B</li>
</ul>
</li>
<li>
<div>List 2</div>
<ul>
<li>Name A</li>
<li>Name B</li>
</ul>
</li>
</ul>
<style>
li {
list-style-type: disc;
}
li li {
list-style-type: circle;
}
</style>
Child selector
child selector selects all elements that are the children of a specified element.
div > div > p{
background-color: red;
}
<div class="col-9">
<div>
<p>
Laulau
</p>
<p>
Kinga
</p>
</div>
</div>
Adjacent sibling selector(+)
Adjacent sibling selector matches the second element only if it immediately follows the first element, and both are children of the same parent element. This only applies to the first element found.
<div class="col-9">
<img src="superman.jpeg" alt="superman" />
<span>superman</span>
</div>
<style>
img + span {
font-weight: bold;
}
</style>
General sibling selector(~)
general sibling selector selects all elements that are siblings of a specified element.
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And this is a red span!</span>
<code>More code...</code>
<h2> that's all. </h2>
<span>And yet again this is a red span!</span>
<style>
/* general sibling */
p ~ span {
color: purple;
font-weight: bold;
}
</style>
Pseudo-class selector
A pseudo-class is used to define a special state of an element.
Examples:
<div class="row">
<div class="col-3">
Pseudo-classes Selector<br>
</div>
<div class="col-9">
<a>Hover here <span>man</span></a>
</div>
</div>
<style>
/* pseudo-classes selector */
a > span:hover {
background-color: blue;
}
</style>
Pseudo-class selector :first-child
:first-child represents the first element among a group of sibling elements.
<style>
/* first-child <p> under parent with id first-child */
#first-child p:first-child {
color: green;
background-color: blue;
font-weight: bold;
}
</style>
Pseudo-class selector :nth-child(n)
:nth-child(n) matches elements based on their position in a group of siblings.
<style>
/* second child under parent with id nth-child
#nth-child p:nth-child(2){
color: blue;
}
</style>
Pseudo-element selector ::before
::before pseudo-element can be used to insert some content before the content of an element.
<div class="row">
<div class="col-3">
Pseudo-element Selector<br>
<strong>::before</strong> pseudo-element can be used to insert some content before the content of an element.<br>
</div>
<div class="col-9" id="before">
<p>The first paragraph.</p>
<p>The second paragraph.</p>
</div>
</div>
<style>
#before p::before{
content: "->";
}
</style>
Pseudo-element selector ::after
::after pseudo-element can be used to insert some content after the content of an element.
<div class="row">
<div class="col-3">
Pseudo-element Selector<br>
<strong>::after</strong> pseudo-element can be used to insert some content after the content of an element.<br>
</div>
<div class="col-9" id="after">
<p>The first paragraph.</p>
<p>The second paragraph.</p>
</div>
</div>
<style>
/* add <- in front of <p> */
#after p::before{
content: "<-";
}
</style>
Attribute
attribute selector is used to select elements with a specified attribute.
<div class="row">
<div class="col-3">
Attribute Selector<br>
<strong>[attribute]</strong> selector is used to select elements with a specified attribute.<br>
</div>
<div class="col-9" id="attribute">
<p title="first-para">The first paragraph.</p>
<p title="second-para">The second paragraph.</p>
</div>
</div>
<style>
#attribute p[title]{
background-color: purple;
}
</style>
Attribute value
attribute value selector is used to select elements with a specified attribute and value.
<div class="row">
<div class="col-3">
Attribute Selector<br>
<strong>[attribute="value"]</strong> selector is used to select elements with a specified attribute.<br>
</div>
<div class="col-9" id="attributeValue">
<p title="first-para">The first paragraph.</p>
<p title="second-para">The second paragraph.</p>
</div>
</div>
<style>
#attributeValue p[title="first-para"]{
color: red;
}
</style>