Introduction to CSS
In the last lesson, HTML Lists and Tables , we introduced lists and expanded the knowledge of HTML tables. So far, we've successfully avoided page styling in our HTML online course, let's fix it now. In this tutorial, we'll explain what CSS is for and how it looks. To best explain the essence of CSS, let's take a very short break into the history of Internet and HTML development.
History of HTML
In short, the first Internet was called Arpanet and was created in the 1960s as a US military project during the Cold War. Later it was released to the public and joined by universities and research institutes. At that time he did not look like it was today, because only text files were transferred over it.
It wasn't until the 1990s that the European research institute CERN gave birth to HTML and the WWW standard, the web as we know it today. HTML was to be used for sharing internal documents in the Institute. HTML was created to distinguish individual parts of a document from plain text (for example, this is a title, this is a list, this is a table) and, most importantly, to link individual documents using links. The first web browsers were created.
As the web got into people, HTML developed and new and new tags were added. Unfortunately, not only those that assigned meaning, but also those that just styled the elements. Browsers were competing with how many tags they supported and spewed new and new tags. The problem was that 60% of the ballast suddenly appeared in HTML documents, which only used to color the text, center the headings or set the font. This problem grew until HTML version 4, when styling in HTML was deprecated and discontinued.
CSS
CSS (Cascading Style Sheets) is a language specially developed for HTML styling. Cascading because inheritance works in styles. For example, if you give a table cell a red font color, all paragraphs of the text in that cell automatically receive that font color. Of course, we can still change the color of a paragraph, the more specific style always applies. Best of all, we can apply the same CSS style to 100 pages, and they all look the same. When we decide to change something, we change one style line and the changes will take effect on all pages. CSS shifts all the styling of an HTML document, so the code is clean, clear, and no duplication.
I have taken care to show you that using CSS is a must and that HTML simply does not include styles. I write these tutorials as the modern website is written now, not as it was written X years ago and how you can misread the old and old instructions on the Internet.
Basic CSS selectors and properties
Of course, we will style our unfinished website from third chapter Images and links in HTML. Open PSPad and create a new file in it, select Cascading Style Sheet as the file type.
Like HTML, CSS is just a text file. (style.css)
Selectors
CSS is based on so-called selectors. As the name implies, selectors allow you to select (select = mark) elements on a page according to certain criteria, and then to style them. Unlike HTML, a CSS document has no header and there is no need to write anything more than selectors.
Type selector
The simplest is the type selector, which simply selects all elements of the type on the page. For example, to tag all h1 headings on a page, the code would look like this:
h1 {
}So we stylize elements of a certain type, here h1. The selector is followed by a block of curly braces, in which the properties of the elements to be styled are written.
text-align
Let's take the first CSS property, it will be text-align. Properties are inserted into curly brackets of the selector. The property name is followed by a colon and its value, followed by a semicolon. Let's center the text in the h1 headings on the page. The CSS code would look like this:
h1 {
text-align: center;
}We will try it on our HTML page immediately. Paste the above code into a new CSS file and save it as style.css in your site folder.
Now we need to link the page to this CSS style. Open index.html and add the following line to the <head> header:
<link rel="stylesheet" href="style.css" type="text/css" />Now this page will be styled according to what we write in CSS. You should get this result:
The first level heading has centered text. If we wanted to do the same for the second level heading, we do not have to rewrite the code, just add the selector to the h2 heading. Selectors are separated by commas:
h1, h2 {
text-align: center;
}Result:
So we can center the text. Of course, centering does not only work for headings, but works the same way for paragraphs, table cells, and other elements. Most CSS properties are not bound to a particular element type.
The following values can be entered in the text-align property:
left - Aligns the text to the left.
right - Aligns the text to the right.
center - Aligns the text to the center.
justify - Aligns the text to the block.
The last value of justify should be used only if the element with the text is sufficiently wide (at least around 800px), otherwise there are obscure gaps that are called in river typography. In print, this is handled by hyphenation, but unfortunately the browser does not simply divide the words in the text.
Color
Let's see how we would change the color of the text. You can use the CSS property color. There are several ways to specify a color value.
The first is to use a color constant. There are 16 of them available: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. Unfortunately, these are very ugly colors and it makes no sense to use them except black and white. CSS offers many other color constants (color names) that are unfortunately not valid and should not be used.
More often, you specify a color as RGB. You know that on your computer, each color has 3 components: red, green, and blue. By entering these 3 components we mix absolutely any color.
Let's say we want to enter a blue color. The first option is to use the constant "blue":
color: blue;You can try adding color settings to the properties in the selector for the h1 and h2 headings. The style will now look like this:
h1, h2 {
text-align: center;
color: blue;
}If there are more properties in the selector, we simply write them on separate lines. Save the style and refresh the page, you should see something similar:
Because we often want a different shade than the ugly 16 default colors, let's show you typing the same blue through the RGB function:
color: rgb(0, 0, 255);The first zero indicates that the red component is 0, the second that the green component is 0, the last that the blue component has the maximum value. That is 255.
The whole enrollment can be simplified by using a hexadecimal system. We would write the blue color as follows:
color: #0000FF;Hexadecimal color notation begins with a grid, followed by a pair of numbers for each of the RGB components (2 for red, 2 for green, and 2 for blue). The maximum value here is FF. You can try that both entries will color the title to the same color as the original blue constant.
The most used is the last type of notation, ie the one through hexadecimal system, because it is the shortest. Although the value is difficult to read for people, any better graphical editor (such as Gimp or Photoshop) will show you its HTML notation for a color.
Let's set a different shade of blue for our headings.
h1, h2 {
text-align: center;
color: #0a294b;
}It's kind of dark blue but still not black, it looks pretty nice:
This is all for today. In the next lesson, Class Selector and CSS text styling, we will continue styling and will not stop for a long time :) The code for today's lesson is again available as an attachment.