Things I don't want to forget from the codecademy CSS Visual Rules lesson
-To style an HTML element you write CSS declarations inside CSS selectors.
-CSS declarations consist of a property (e.g. colour, size) and a value (e.g. blue, 200px) A colon separates the property and value and a semi-colon is used at the end.
-The entire thing - CSS selector and CSS declaration - is called a CSS rule or rule set.
-Font-family is used to set fonts. The default is Times New Roman if no other is selected. It seems that these are case sensitive (unless that is just codecademy)
h1 {
font-family: Garamond;
}
-Font-size sets the font size (obvs) and px is used to measure it.
p {
font-size: 18px;
}
-Font-weight can make things bold. It can also be set to normal (not bold!)
p {
font-weight: bold;
}
-Text-align can be used to align text to the element's parent. It can be set either to left, center or right.
h1 {
text-align: right;
}
-Colour properties can be used with CSS rules. Background-color changes the background of the element it is used in. Color changes the foreground colour of it. E.g. the h1 title below would have a blue background and the text would be red.
h1 {
color: red;
background-color: blue;
}
-Opacity allows you to set the opacity of an element. It is measured from 0-1.
.overlay {
opacity: 0.5;
}
-You can make the background of an element an image using CSS. It can either be a URL or relative file path (2nd example is of a pic called mountains.jpg in the main folder called images
.main-banner {
background-image: url("https://www.example.com/image.jpg");
}
or
.main-banner {
background-image: url("images/mountains.jpg");
}
Top comments (0)