This short instructional article is intended for those who are clueless about the basic idea of CSS tutorial to style their web page. So, what is CSS, exactly?
CSS (Cascading Style Sheets) is utilized to style and lay out web pages — for instance, to modify the textual style, shading, size, and spacing of your content, split it into various sections, or include animations and other beautifying highlights. This article gives a gentle start to your way towards CSS mastery with how you can begin utilizing it to add styling to your HTML.
CSS Tutorial to Style HTML
1. Composing the HTML
HTML is the language where most websites are composed. HTML is utilized to make pages and make them useful.
For one thing, you have to open your HTML editor where you will locate a spotless white page on which to compose your code. From that point, you have to format your page with the accompanying tags:
- <!DOCTYPE html> — This tag indicates the language you will compose on the page.
- <html> — This tag indicates that from here on, you will write in HTML code.
- <head> — This is the place all the metadata for the page goes — stuff for the most part implied for web search engines and other PC programs.
- <body> — This is the place the content of the page goes.
Inside the <head> tag, there is one tag that is constantly included: <title>, yet there are others that are similarly as significant:
- <title> — This is the place you embed the page name as it will show up at the highest point of the program window or tab.
- <meta> — This is the place where information about the record is put away: character encoding, name (page setting), and description.
2. Adding Some Colors
You will begin with a template inserted inside the HTML record. Afterward, you have to place the HTML and the CSS in discrete documents.
Separate files is acceptable, since it makes it simpler to utilize a similar template for various HTML documents. In other words, you just need to compose the template once by adding a <style> component to the HTML file (the template will be inside that component).
3. Adding Fonts
Web fonts permit web designers to utilize textual styles that are not installed on the client’s PC. At the point when you have found or purchased the text style you wish to utilize, simply incorporate the textual style document on your web server, and it will be naturally downloaded to the client when required.
Your “own” textual styles are characterized inside the CSS @font-face rule. In the @font-face rule; you can characterize a name for the font (for example; Font1) and afterward point to the font file.
To utilize the text style for a HTML component, allude to the name of the font (Font1) through the font family property.
4. Adding a Navigation Bar
The menu is on the HTML page, the <ul> list at the top. However, the links in it do not work yet, since your “website” so far comprises just one page, yet that does not make a difference for now.
On a real website, there ought not be any messed up links, obviously. So, you have to move the rundown to one side and move the remainder of the content a little to one side, to account for it.
The CSS properties you should use for that are ‘padding-left’ (to move the body content) and ‘position’, ‘left’, and ‘top’ (to move the menu).
5. Styling the Links
The route menu will still resemble a rundown, rather than a menu. So, you need to add some style to it.
Try to remove the rundown bullets and move the things to one side, to where the slug was. You will also need to give each item its own white background and a frame.
You additionally have to decide what the shades of the links ought to be, so for example, include: blue for links that the visitor has not seen yet and purple for links visited
6. Adding a Horizontal Line
The last expansion to the template is a horizontal rule to isolate the content from the mark at the base. You can use ‘border-top’ to include a specified line over the <address> component.
7. Putting the Style Sheet in a Separate File
You already have a HTML document with an inserted template. Be that as it may, if your website develops, you most likely need numerous pages to have a similar style.
There is a better strategy than replicating the template into each page: in the event that you put the template in a different document, all pages can highlight it. To make a template document, you have to make another vacant content file.
You can pick “New” from the File menu in the editor to make a vacant window. Then, point reorder everything that is inside the <style> component from the HTML file into the new window.
Try not to duplicate the <style> and </style> themselves as they have a place with HTML, not CSS. In the new editor window, you should now have the complete template.
So, that is the basic idea of CSS tutorial to style HTML for beginners. Have you taken note yet?