10 simple CSS codes you can study in 10 minutes

When using HTML for web programming , you will probably be interested in making the site look more professional and convenient. CSS is the best way to do that. CSS allows you to apply changes across the entire site without using many inline HTML elements.

We will show you how to create an Inline Stylesheet so you can practice your CSS skills, then 10 simple examples to show you how to do some basic things. From there, you can do more on your site with CSS!

1. The most important programming languages ​​in the Internet of Things era
2. Should we learn many programming languages ​​or just one?

Inline Stylesheet

All HTML documents contain tags. The head part is where the Inline Stylesheet is located, it will look like this:

  Các khai báo CSS sẽ nằm ở đây. 

Put it at the beginning of the HTML file, add it to CSS, and everything is ready to start.

1. Easy format of paragraphs

The cool thing about styling with CSS is that you don't have to specify the style every time you create an element. You just need to say "apply this special type to all paragraphs" and everything will be completed. Here is an example of how to do it.

Suppose you want every segment (the ones start with the tag

) on your page will be slightly larger than usual, dark gray, instead of black. Here's how you will do it with CSS:

 p { font-size : 120% ; color : dimgray ; } 

Then, now any paragraph

Which appears on the browser will have a 20% larger font size and "dimgray" color.

2. Change the word

To apply changes to a certain paragraph, you can do the following:

First name the paragraph, here I want a paragraph in small letters, so set the name to always smallcaps:

 p .smallcaps { font-variant : small-caps ; 
 } 

To create a complete paragraph in small letters, we will use a slightly different HTML tag:

"smallcaps"> Your paragraph is here.

Thus, we add dots and class names to any specific element in the CSS to specify the sub-type of the element defined by the class. You can do this with text, images, links, and any other data type.

If you want to change the style of the text to a specific case, you can use the following CSS lines:

 text-transform : uppercase ; text-transform : lowercase ; text-transform : capitalize ;  text-transform : uppercase ; text-transform : lowercase ; text-transform : capitalize ;  text-transform : uppercase ; text-transform : lowercase ; text-transform : capitalize ;  

3. Change the link color

There are four different colors that can be assigned to a link: standard color, viewed color, hover color (hover) and its active color (displayed when you are clicking on it). This is how we can change those things:

 a:link { color : gray ; } a:visited { color : green ; } a:hover { color : rebeccapurple ; } a:active { color : teal ; } 

Note that each "a" will come with a colon (:), not a dot.

Each declaration will change the color of the link in a specific context. There is no need to change a link's class to make it change color. The color will be determined by the user and the status of the link.

4. Remove underline links:

To identify a certain piece of text as a link, it will often be accompanied by underlines, but sometimes it is better to underline it. This was done with the "text-decoration" attribute. Here's how to remove the underscore:

 a { text-decoration : none ; } 

Anything with the link tag ("a") will not be underlined. You want to emphasize it when users hover over it? Just add the following paragraph:

 a:hover { text-decoration : underline ; } 

You can also add this text-decoration to the active links to make sure that the underline does not disappear when the link is clicked.

5. Create a link button

If you want your links to get more attention then using link buttons is a great way to do that. It requires more lines of code, but not very complicated:

 a:link, a:visited, a:hover, a:active { background-color : green ; color : white ; padding : 10px 25px ; text-align : center ; text-decoration : none ; display : inline-block ; } 

By including four link states, the button will not disappear when the user hoveres or clicks on it. You can also set different parameters for hovering through links and active links, like changing buttons or text colors, to make it a bit more interesting.

Background color is set with background-color, text color with color. Padding defines the distance from the text to the border of the box, top and bottom is 10px and left, right is 25px. Text-align ensures that text is displayed in the middle of the button, instead of shifting to one side. text-decoration, as we saw in the above example, remove the underscore.

"Display: inline-block" is a bit more complicated. In short, it allows you to set the height and width of the object, and make sure it starts a new line when inserted.

6. Create a text box

A simple paragraph is not very interesting. If you want to highlight a call to action or another element on your page, you can create a border around it. Here's how to do that with a text string:

 p.important { border-style : solid ; border-width : 5px ; border-color : purple ; } 

This code creates a 5 px wide purple border, around any important paragraph. To create a paragraph that inherits these attributes, simply declare the following:

"important"> Insert your important text here.

The above code will be applied to every piece of text you want without depending on the number of lines of that paragraph.

There are many different types of borders to choose from. Instead of "solid", try "dotted" or "double". And the width can be "thin," "medium" or "thick". You can even define the thickness of each border separately as follows:

 border-width : 5px 8px 3px 9px ; 

As a result, the top border is 5 px, the right border is 8 px, the bottom part is 3 px and the left border is 9 px in size.

7. Align the elements on the page

In CSS there are 2 ways to center an element:

For block elements, like images, you can use margin properties:

 .center { display : block ; margin : auto ; } 

This code ensures that the element is displayed as a block, and that the margins on each side are set automatically (making them equal). If you want to center all images on a given page, you can add "margin: auto" to the img tag:

 img { margin : auto ; } 

What if the object needs to be centered is text? CSS does this like this:

 .centertext { text-align : center ; } 

If you want to use the "centertext" class to center text in a certain paragraph, all you need to do is add that class to the tag.

:

"centertext"> The text here will be centered.

8. Customize Padding

Padding of an element defines the space around that element. For example, if you add 25 px to the padding at the end of the image, the text below the image will be pushed down to 25 px. Many elements may have padding, but we will use an image for an example here.

Suppose you want each image to have 20 px padding on the left and right, 40 px above and below, there are several ways to do it. The most basic way:

 img { padding-top : 40px ; padding-right : 25px ; padding-bottom : 40px ; padding-left : 25px ; } 

Shorter:

 img { padding : 40px 25px 40px 25px ; } 

This sets the top, right, bottom and left margins to the right number you require. But we can make it even shorter:

 img { padding : 40px 25px } 

When you use two values, the first value is set to the beginning and the end, while the second is left and right.

9. Mark the rows in the table

CSS can do a lot of things to make the table more beautiful. Add color, adjust the outline, and make your table flexible to fit your mobile screen with ease. We'll look at a "cool" effect here: highlight the rows of the table when you hover over them. Its code here:

 tr:hover { background-color : #ddd ; } 

And now, when you hover over the rows in the table, it will look like this:

10 simple CSS codes you can study in 10 minutes Picture 1

10. Switch between transparent and transparent images

CSS can do many interesting things with images, for example, you can make the image blur and display fully when hovering over the code:

 img { opacity : 0.5 ; filter : alpha ( opacity=50 ) ; } 

Filter properties are similar to opacity but Internet Explorer 8 and newer versions do not recognize opacity, so the above code has added both properties.

And here is the code to switch from a slightly transparent image to a normal image:

 img.hover { opacity : 1.0 ; filter : alpha ( opacity=100 ) ; } 

Getting started with CSS can be a bit difficult, like learning any mark-up language, any other programming language. But CSS is really a fertile ground for creative lovers. The more you get used to it, the more ideas you will have to help your site flourish.