CSS styles are often in this format:
h1 {
color: maroon;
margin-left: 40px;
}
Now you might be thinking "What does this mean?" As you can see, the h1 tag (selector) is meant to be in a maroon colour (note the US english spelling in the code) and have a margin to the left side with a space of 40 pixels. The “color” and “margin-left” is the property, where the “maroon” and “40px” shows the value of the property. Together the two parts is called a declaration. This is the most basic format of css. There are many more kinds of CSS tags that can be used alter the look of the HTML tag.
| Tags | Definition |
|---|---|
color |
The color tag defines an what colour the selector should be. |
font-size |
The font-size tag defines how big the text of the selector should be |
font-family |
The font-family tag defines a list item. The li tag is tells what kind of font the selector will be. |
width |
The width tag adjusts the width of the selector.
|
height |
The height tag adjusts the height of the selector.
|
background |
The background sets you a nice background to your selector. Woa! |
border |
The border tag set up a neat boarder to your selector. |
Colours
CSS colours are found in many forms. They can be found in many forms; predefined color names, RGB, HEX, HSL, RGBA, HSLA values. We are going to be only working on the predefined color types as well as HEX (Hex triplet), which really is the only kinds of colours that you will really need to use. To find the right colour, you can use the W3schools colour picker.
Borders
Borders can be valued in many ways. They can have various sizes with px or names but also can be styled with border-style The following values are allowed:
- dotted - Defines a dotted border
- dashed - Defines a dashed border
- solid - Defines a solid border
- double - Defines a double border
- groove - Defines a 3D grooved border. The effect depends on the border-color value
- ridge - Defines a 3D ridged border. The effect depends on the border-color value
- inset - Defines a 3D inset border. The effect depends on the border-color value
- outset - Defines a 3D outset border. The effect depends on the border-color value
- none - Defines no border
- hidden - Defines a hidden border
The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).
Font Families
There are many values that can be used for font family. The most common families include san-serif, serif as well as calibri.
selector {
font-family: family-name|generic-family|initial|inherit;
}
Find your perfect font at Google Fonts that shows you the exact code for a neat-lookin' font. Google Fonts can be your second most helpful HTML resource to make your page look beastly. (Flow Coding is even better).
Font size values can be changed in two ways;
- Using a name e.g. large, small
- Using px (pixels) e.g. 40px
like this:
selector {
font-size: value;
}
Backgrounds
CSS background properties:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Background Colour can be added with the background-color: value; declaration.
Background image can be added with the background-image: url("urlofimage"); declaration. If you have a small image and a big page, the default HTML will repeat your backgroung image over and over. This can easily be changed with the background-repeat: no-repeat; function.
The background-attachment declaration sets whether a background image is fixed or scrolls with the rest of the page.
Sithum Dissanayake
@Coding_Flow