What is CSS?
CSS stands for Cascading Style Sheet, emphasizing the word "style."
While HTML (Hyper Text Markup Language) is a markup language used to build/create websites, CSS is used to describe the visual presentation of the HTML pages, and it is used to "style" the website. It makes your web page look attractive and catchy. In addition, it can boost the user experience on your web page.
NB; You must know HTML to enable you to use CSS.
So, why use CSS?
CSS is used to define/detail the styles for your web pages, such as the design, layout, and display variations for different devices and screen sizes.
Example:
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
Web developers found it challenging when font and color attribute tags were added to the HTML 3.2 specification. Creating large websites where fonts and color information were added to each page became time-consuming and costly.
CSS was created by the World Wide Web Consortium (W3C) to solve this problem.
CSS eliminated the style formatting from the HTML page!
Three ways to use CSS
These are the three types of CSS, and they are listed below:
- Inline CSS
- Internal or Embedded CSS
- External CSS
Inline CSS: Inline CSS is the inclusion of a CSS property in the body section attached to an element. The style attribute is used to specify this type of style within an HTML tag.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style = "color:purple; font-size:50px;
font-style:italic; text-align:center;">
Lianah's Blog
</p>
</body>
</html>
The result:
Internal or Embedded CSS: This is used when you want to style a single HTML document uniquely. The CSS set is placed within the HTML in the head section. That is, the CSS is embedded within the HTML file.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align:center;
}
.LG {
color:purple;
font-size:50px;
font-weight:bold;
}
.lianah {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="LG">Lianah's Blog</div>
<div class ="lianah">
A blog for everything tech
</div>
</div>
</body>
</html>
The result:
External CSS: External CSS is a separate CSS file that only contains style properties via tag attributes (for example, class, id, heading,... etc.). In addition, an external style sheet defines the style for many HTML pages.
To create the external style sheet, you can use any text editor. However, the file must be saved with a .CSS extension and must not contain any HTML code.
Example:
Here is what the separate CSS file (styles.CSS) should contain:
body
{
background-color:lavender;
}
.main {
text-align:center;
}
.LG {
color:purple;
font-size:50px;
font-weight:bold;
}
#lianah {
font-style:bold;
font-size:20px;
}
The HTML file that uses the created external style sheet is shown below.
<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class = "main">
<div class ="LG">Lianah's Blog</div>
<div id ="lianah">
A blog for everything tech
</div>
</div>
</body>
</html>
The result:
NB; you can try the codes and edit the color, text, size, and font however you like.
CSS Colors, Fonts, and Sizes
Here, I'll discuss the most used CSS properties: color, font-size, and font-family.
- The CSS color property specifies the text color to be used.
- The CSS font-size property specifies the text size to be used.
- The CSS font-family property specifies the font to be used.
Example:
Below is an example of how to use the CSS color, font-family, and font-size properties.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>Lianah's Blog</h1>
<p>A blog for everything tech</p>
</body>
</html>
The result:
I have listed the first three(3), which are the most commonly used properties. Now I will list the other basic properties you should know below.
- CSS Border: The CSS border property can create a border around an HTML element.
- CSS Padding: This is used to create padding (space) between the text and the border.
- CSS Margin: This property creates a margin (space) outside the border.
There are more CSS properties but these are the basic and the most commonly used. I hope this was helpful to you.
Top comments (0)