In the previous article, you learned 3 ways of using CSS with HTML, i.e.,
- Inline CSS: Applying CSS within the opening tag of the element with the style attribute.
- Internal CSS: Defining the <style></style> tags inside <head>.
- External CSS: Creating and linking a separate CSS file.
In this article, I'll explain some basic concepts like CSS selectors, adding borders, comments, link actions, backgrounds, and text formatting. From the next article, we will continue styling our webpage.
Note: We'll use the external CSS for the examples in this article.
1. CSS Selectors
The selectors are used to identify the elements to apply CSS. There are 3 types of selectors:
i. Element Selector (Element's name)
You can use the element's tag name to apply CSS to it.
Example:
img{
width: 100px;
height: 100px;
}
ii. Class Selector (Defining a reusable class for the element)
We usually assign a name to the element and use it to apply CSS. CSS classes are reusable and can be applied to multiple elements.
Example:
.hero{
width: 100px;
height: 100px;
}
iii. ID Selector
Unlike class, ID must be unique for an element. Although you can reuse it, it is not a good practice.
Example:
#hero{
width: 100px;
height: 100px;
}
The hash (#) in the above example represents an ID.
2. CSS Comments
CSS comments are the lines of code that are not rendered.
#p{
/*This is a CSS comment*/
}
3. Setting Element Width and Height with CSS
The CSS width and height properties define the area inside the padding, borders, and margins. These are the most used properties in CSS.
Units for width and height
The width and height of the elements can be defined in any of the following units:
- auto – The browser calculates the width and height automatically.
- length – Use px, in, cm, or other units to define width and height.
- % - Use percentages to cover the containing block.
- initial – Set width and height to the default values.
- inherit – Inherit width and height from the parent element.
Example
#hero{
width: 100px;
height: 100px;
}
4. Margins
The margin is the distance between the border and the text. You can specify the margins of the 4 sides individually using the corresponding properties:
Example:
#hero{
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;
}
Alternatively, you can combine these properties into one as follows:
#hero{
margin: 10px 10px 10px 10px;
}
The first 10px is for the top, the second is for the right, the third is for the left, and the fourth is for the bottom margin.
Tip: You can also specify all 4 margins with a single value:
#hero{
margin: 10px;
}
5. CSS Borders
We can use CSS borders to define a boundary around elements.
Example:
#hero{
border-width: 2px;
border-style: solid;
border-color: black;
}
Alternatively, we can combine these properties into one as follows:
#hero{
border: 2px solid black;
}
The following are some border styles that you can use in CSS:
- 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
Border-radius Property
The border-radius property is used to add a rounded border around an element.
Example:
#hero{
border-radius: 10px;
}
6. CSS Backgrounds
To format the backgrounds, CSS offers numerous properties, as demonstrated in the following example:
#hero{
background-color: red;
background-image: url("Facebook.svg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;
}
The background-repeat property can have the following values:
- repeat: Repeats the image throughout the screen.
- no-repeat: Does not repeat the image.
- repeat-x: Repeats the image only on the x-axis.
- repeat-y: Repeats the image in the y-axis.
The background-attachment property can have the following values:
- fixed: Keeps the image fixed when the screen is scrolled. The image is always visible in this mode.
- scroll: Scrolls up or down the image with the screen. The image hides when you scroll.
7. Text Properties
There are numerous CSS properties that can be used to format the text.
i. Text Color
Change the color of the text.
Example:
#hero{
color: blue;
}
ii. Text Alignment
Set the alignment of the text.
Example:
#hero{
text-align: center;
}
iii. Decorating Text
The text-decoration property is used to add an underline, overline, or linethrough the text.
Example:
#hero{
text-decoration: underline;
}
iv. Transforming Text
You can use the text-transform property to convert lowercase text to uppercase or vice versa.
Example:
p{
text-transform: uppercase;
}
Other values for this property include lowercase and capitalize.
v. Indentation
To add indentation to your text, use text-indent.
Example:
p{
text-indent: 50px;
}
vi. Letter Spacing, Line Height, and Word Spacing
The space between the letters, words, and lines can be controlled with the following properties:
p{
letter-spacing: 10px;
word-spacing: 10px;
line-height: 20px;
}
vii. Text Shadow
Add shadow to your text as follows:
p{
text-shadow: 3px 3px green;
}
This property takes the width, height, and color of the shadow.
viii. Link Actions
You can make your HTML links more interactive by formatting them with the following events:
- link: When the user has not clicked on the link.
- hover: When the user points the cursor to the link.
- active: When the user clicks a link.
- visited: A link that the user has visited.
Here's how to use these events:
a:link{
color: red;
}
a:hover{
color: black;
}
a:active{
color: blue;
}
a:visited{
color: green;
}
Tip: You can use the hover event similarly to all the other elements.
We have covered the most widely used CSS properties in this article. Frankly speaking, there's no way we can learn it all at once. You have to put it all into practice to strengthen your skills and enhance your knowledge. You will find many more properties when you work on CSS yourself. Therefore, we will learn more properties while styling our Bellylicious home page in the next articles.
