Habdul HazeezCSS properties are used to apply the desired effect on HTML Elements.
These properties are named in such way you'll know what's is going happen to the HTML Element that you are working on.
When you come across terms like background-color, you should get the feeling that this property will change the background color of your desired element.
Another property is the font-size which can be used to increase or decrease the font size of HTML Elements like Headers ( h1 to h6 ) and Paragraphs ( p ).
CSS contains lots of properties that can be used to achieve your desired effect on HTML Element, discussing each one of them will make this post way too long and you are likely to get bored before you learn anything.
So here is what we are going to do, we will list the properties i feel you will use and come across most of the time, and we'll explain each one with some examples and if need be we will consult the Specification. After that i will point you to resources to further your studies. The properties we will discuss are:
font-sizefont-familybackground-colorcolortext-decorationdisplaymarginpaddingborderwidth
font-size
As i mentioned before, this property is used to increase or decrease the font size of HTML element.
p {
font-size: 120%;
}
font-family
The specification states:
The property value is a prioritized list of font family names and/or generic family names. Unlike most other CSS properties, component values are separated by a comma to indicate that they are alternatives.
This translates to: When the font-family property is used on an HTML Element, you give it a value that you prefer the most and supply comma-separated values as alternatives. For example
body {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
From the code sample above, "Trebuchet MS" is the font-family you will like the browser to use, and if it's not available, the browser should use "Helvetica", if that's also not available it should use the system default font.
background-color
This property sets the background color of an element using either a color value or transparent
p {
background-color: red;
}
color
This is used to specify the color that a browser will use on an Element. The value can be in the form of:
- Keyword e.g orange
- Hexadecimal e.g
#ffffff - RGB (Red Green Blue) e.g
rgb(255,255,0) - RGBA (Red Green Blue Alpha) e.g
rgba(12, 12, 13, 0.1) - HSL (Hue Saturation and Lightness) e.g
hsl(356, 92%, 41%)
p {
color: #150bd6;
}
We will discuss this color formats in the section: CSS Colors.
text-decoration
This property describes decorations that are added to the text of an element using the element's color. It accepts values like underline, overline, line-through, blink and inherit.
p {
text-decoration: underline;
}
display
As the name suggest, this property can be used to control how elements are displayed in the browser. It accepts value like block, inline, none e.t.c
span {
display: block;
}
margin
This property is used to specify the spaces between a child element and its parent. Margins create extra space around an element. It's actually a shorthand of four properties which are margin-top, margin-right, margin-bottom, margin-left.
p {
margin-left: 2em;
}
padding
Padding is used to create extra space within an element.
h2 {
background-color: lime;
padding: 20px 50px;
}
border
This is a shorthand CSS property used to set an element's border. It sets the border-width, border-style, and border-color.
div {
border: 12px solid red;
}
width
This property can be used to specify how wide an element can be.
div {
width: 50%;
}
You can find a comprehensive list of properties on The Mozilla Developer Network.
The code snippet's used in this section have been applied to the element by selecting the tag name followed by curly braces and some properties. Now you might as ask yourself questions like:
- why are we using the HTML Elements name in CSS?
- what other ways can we use to select an element for styling?
This is will be discussed in much detail in the next topic, CSS Selectors.
