CSS stands for Cascading Style Sheets and is one of the web’s three basic building blocks along with HTML and Javascript. It can be said that CSS is the face of the web, and thus handles everything that has to do with design. With the help of CSS, you can achieve everything from choosing fonts on text to making beautiful animations.
What can you do with CSS?
All possible ways to change the style of the text can be accomplished with CSS. You can make the text bold, pink or large. You can also make links different from other text by making the link text blue and underlined. CSS can also be used to determine what should happen to a user holding the mouse pointer over a text. For some reason, you may want the text to change color from green to purple when you hold the mouse pointer over the text and switch back to green when you move the mouse pointer again.
You can also do a lot that has nothing to do with text. Many types of geometric shapes or other shapes can be created with CSS. For example, a circle that becomes oval when you hold it
How to use CSS?
To be able to use CSS, you first need a basic understanding of how HTML works. The CSS code points out HTML elements to be able to choose what you want to apply a certain design to. We can start from a standard paragraph written like this with HTML:
<p> I’m a regular paragraph! </p>
You can change the color of the paragraph by entering CSS code correctly in the HTML element’s start tag. Here’s how to make the text blue:
<p style = “color: blue”>
I’m a regular paragraph! </p>
The attribute style is used here, where color is set to blue. Instead of “color: blue”, you could type “font-size: 20px” to resize the text to 20 pixels. The same pattern is consistently followed with “thing-to-change: change value”. However, using CSS in the HTML tags can make the HTML code messy and difficult to maintain. Therefore, you usually put the CSS code in a separate document and refer to that document from the HTML document.
Another option is to use the style tag. CSS code can be entered between <style> and </style>. To access all the paragraph elements in an HTML document and make the text color of the paragraphs blue, you can type as follows:
<p> I’m a regular paragraph! </p>
<style>
p {color: blue; }
</style>
Within the style tags it says p {color: blue; }, which means that all paragraphs should have blue text color. In this way, you have separated the CSS from the HTML code.
If you want to change the text color in a specific paragraph, you can use a class for that element. You can access the class in the CSS by typing a period followed by the class name. Like this:
<p class = “blue”> I’m a regular paragraph! </p>
<p> I’m a regular paragraph! </p>
<style>
.blue {color: blue; }
</style>
The first paragraph was thus given the class “blue”, while the second paragraph was not given any class. The CSS code .blue {color: blue} means that all elements with the class blue should have blue text color. Note that if an h1 element or a completely different element were to have the class blue, the contents of those elements would also have blue text color.
To make shapes, the HTML element div can be used. A blue square can be created as follows:
<div class = “square”> </div>
<style>
.square {
width: 50px;
height: 50px;
background-color: blue;
}
</style>
Note that the div element is “empty”, so there is no text between the start and end tags. Instead, a width, a height, and a background color are set for the div element. When there are several things to change, these are separated by a semicolon according to the example above.
A common use for CSS is content positioning.
Maybe you want the text to be right-aligned instead of left-aligned.
Right-alignment of a paragraph is accomplished as follows:
<p class = “right”> I’m a regular paragraph! </p>
<style>
.right {text-align: right; }
</style>
Note that the class name does not have to be “right”, but can be changed to anything, as long as the same class name is used in the CSS code for the design to be applied. However, it can be smart to give the classes logical names based on what you are trying to accomplish.
CSS can be tricky to use, especially when more complicated designs are to be achieved. Something that makes it easier is that many of the design problems you may face have already been solved by someone else and it is therefore often possible to find a solution just by googling.