5.1 The style attribute of a tag
And a few more useful things about HTML. As the web began to gain popularity, there was a growing demand for web pages to be beautifully or very beautifully designed. This problem was solved by using the style
.
The general form of this attribute has the following format:
<tag style="name=value;name2=value2;nameN=valueN">
The attribute value, separated style
by a semicolon, lists all the "styles" that need to be applied to the tag.
Let's say you want to display an image as a square 100*100
and also make it half transparent. To do this, you need to add special styles to it:
- width=100px;
- height=100px;
- opacity=0.5;
Then the HTML code with this image will look like this:
<img src="logo.png" style="width=100px;height=100px;opacity=0.5">
There are hundreds, if not thousands, of styles. And browser developers are constantly coming up with new ones. It's good that you are studying to be a Java developer, not a web designer :)
5.2 Popular CSS Styles
It is unlikely that you will write a lot of HTML code or edit its styles in your life, but anything can happen. For example, you are writing a couple of small HTML pages to test the API
. Therefore, knowing the basic styles HTML
can be helpful.
Below are the 10 most common ones for backend developers:
# | Name | Example | Description |
---|---|---|---|
1 | width | width: 100px | element width in pixels |
2 | height | height: 50% | element's height as a percentage (of parent's width) |
3 | display | display: none | display element (do not display element) |
4 | visibility | visibility: hidden | element visibility (element is hidden, but space is reserved for it) |
5 | color | color: red; | text color |
6 | background color | background color: smoke | background color |
7 | border | border: 1px solid black; | border (width 1px, color black, solid line) |
8 | font | font: verdana 10pt | font: verdana, size 10pt |
9 | text-align | text-align: center; | text alignment horizontally |
10 | margin | margin:2px | padding outside the element |
You do not need to remember these tags, everything is on the Internet. Moreover, each "style" has its own set of valid values and its own format for describing the value. Look at least at border
or font
.