Learn HTML: A Comprehensive Tutorial for Beginners | Step-by-Step Guide
Learn HTML from scratch! Our tutorial covers basics to advanced concepts. Start coding websites today with step-by-step guidance.
- 49
- 12 Hours
Tutorial Playlist
49 Lessons1. HTML Tutorial
2. HTML Basics
3. HTML Syntax
4. HTML Elements
5. HTML Attributes
6. HTML Comments
7. HTML Semantic
8. HTML Form Elements
9. HTML Head
10. HTML Title
11. HTML Styles
Now Reading
12. HTML Paragraphs
13. HTML Symbols
14. HTML Emojis
15. HTML Formatting
16. HTML Entities
17. HTML Audio
18. HTML Images
19. HTML Lists
20. HTML Links
21. SVG in HTML
22. HTML Forms
23. HTML Video
24. HTML Canvas
25. Adjacency Lists
26. HTML Input Types
27. HTML Tables
28. HTML Table Border
29. Cell Spacing and Cell Padding
30. HTML Semantic Elements
31. HTML Layout
32. html blocks and inline
33. HTML Div
34. Difference Between HTML and CSS
35. Image Map in HTML
36. HTML Drag and Drop
37. HTML Iframes
38. Divide and Conquer Algorithm
39. Difference Between HTML and XHTML
40. HTML Code
41. HTML Colors
42. HTML CSS
43. HTML Editors
44. HTML Examples
45. Class in HTML
46. HTML Exercises
47. HTML ID
48. Understanding HTML Encoding: A Comprehensive Guide
49. HTML Table Style
HTML Styles
Designing a good website is a work of art, and requires adequate knowledge about both the front-end and back-end development aspects. As a developer, you have the full liberty to decide how a website you are designing should look. You may experiment with the font style, colors, and other elements to check which style looks the best!
Such variations in website designs can be brought about with the help of HTML styles, that is implemented through CSS or Cascading Style Sheets. While HTML decides the page structure, the primary task of HTML styles is to control the different aspects that can enhance the readability and enhance the visual appeal of the websites.
In this tutorial, we will learn how developers can apply different styles throughout a website, thereby enabling clearer visuals, responsive layouts, and adequate contrast.
The Style Attribute in HTML
Setting the style of an HTML element, can be done with the style attribute. The HTML style attribute has the following syntax:
style="property:value;"
The property is a CSS property. The value is a CSS value
<body style="background-color:lightgrey;">
<h1 style="color:blue;">This is a heading</h1>
<p style="color:#FF0088;">This is a paragraph.</p>
</body>
The style attribute in HTML helps in defining how an element should be rendered in a web browser. With the help of the style attribute, developers can set different properties such as font size, alignment, color, etc. with the HTML tag.
The syntax used for the style attribute in HTML is <tagname style=”property: value;”>, where property denotes a CSS property, and value denotes a CSS value.
Adding HTML Styles
You can either attach the style information as a distinct document, or you have to embed it in an HTML document. There are three ways in which a developer can insert styling information in an HTML document.
- Inline Styles: In this, the styling instructions are put directly into the start tag. Developers can attach inline styles to an element with the help of the style attribute.
This, however, may cause the presentation to be merged with the document’s content, and is therefore considered a bad practice.
- Embedded Style: They only affect the documents in which they are embedded. Developers define embedded style sheets in an HTML document’s <head> section with the help of the <style> tag.
- External Style Sheet: External HTML style sheet can be linked to HTML documents with the help of the <link> tag.
Working with Different HTML Style Properties
With so many options of HTML styles to work with, you can design your website the way you want. I’ll be listing down some of the wonders you can do using the HTML style types.
Setting the Background Color
Although this may seem pretty trivial, a website’s background color has an important role to play in creating a visual impact and conveying a message to the audience or viewers.
Colors can evoke feelings and guide the attention of the users, thereby enhancing their overall experience. For instance, red evokes a sense of urgency, whereas blue denotes a sense of serenity and calmness.
It is also important to choose the right color palette that aligns well with the identity of the brand. The color scheme used throughout a website helps in establishing a cohesive visual identity and increases the engagement of users. It also makes it easy for users to associate a brand with a particular color.
HTML styles attribute can help you decide the background color. The CSS background-color helps in defining the color of an HTML element. Let us say that you want to set the background color for a certain HTML element amber.
For this, you need to use the code:
|
After compilation:
If you want to set two different background colors for two different HTML elements, you will have to use the following code:
|
After compilation:
This HTML style background color code will create a heading that will have an amber color, and the <p> tag with the inline "background-color:turquoise;" will create a paragraph that will have a turquoise background color.
Determining the Right Text Color
While deciding text colors, as a developer, you need to be aware about the various factors like choosing colors that are in contrast and can ensure great readability to the audience. Text color is an important component in any website that enhances the overall appearance of the website.
The CSS color property in HTML styles is used to define the text color of an HTML element.
Here is how you can use the code:
|
When this HTML style element code is rendered in a web browser, your text will be returned with its heading in red color, and the paragraph in blue color.
Choosing the Right Fonts
I, personally, am very particular about the font style that a website is using.
While talking about text color, size, and fonts, the first and most important thing that we need to keep in mind is readability. It is important to make sure that the font that a website is using is easy on the viewers’ eyes.
Apart from that, fonts also help to establish brand identity. We often associate a font style with a certain brand.
The font should also align with the commodity or service that a brand is selling. Choosing the right font has a huge impact on the way a brand’s website communicates with the audience.
The HTML styles CSS property that defines the font that is to be used for an HTML element is font-family. Here is how you need to write the code:
|
This HTML style font size code will deliver the result in which the heading will appear in “Serif” font and the paragraph, that is the body of the text, will appear in “Arial”.
Text Size
Developers also need to pay attention to the text size to ensure readability across all devices. The CSS property font-size helps to define the text size for any HTML element.
This is how you can write this HTML styles code:
|
This code will return the result where the size of the font in the heading will be larger than the font in the paragraph.
Alignment of the Text
The right text alignment is essential as it ensures good readability and also guides the eyes of the audience through the content present in the website.
Use the code written below:
|
In response to this code, both the heading and the paragraph will be center aligned with their contents.
The Border of an HTML Element
While designing a website, borders are of the utmost importance as they help to define space and define the structure of the web page layout.
For the border HTML style, use the border-style property. Let me list down the different border values that developers can use.
Dotted | The border will appear dotted. |
Solid | The border will appear solid. |
Dashed | This will give a dashed border. |
Double | This syntax will give a double border. |
None | This indicates no border. |
Hidden | This indicates a hidden border. |
Groove | This denotes a 3D grooved border. |
Ridge | This denotes a 3D ridged border. |
Inset | This denotes a 3D inset border. |
Outset | This denotes a 3D outset border. |
Adding a Button in Your Webpage
HTML has a button tag that is used to define a clickable button that can trigger some action. While some buttons contain images like interesting emoticons denoting a specific action, the others may contain images or texts.
The syntax for button HTML style is <button type = "button"> Click Me </button>.
Here, button indicates an HTML element that can create a button that the audience can click. The element type=”button” specifies that it is a simple button that will not have any predefined behavior.
The Click Me is the text element that is to be displayed on the button thus created.
Summing Up
If a website is unorganized, viewers will automatically lose interest. A nice-looking and organized website persuades visitors to navigate through it and stay for longer. Therefore, web developers need to spend a fair lot of time in deciding how to go about the craftsmanship so that viewers decide to stick around.
You can pursue a course in web development to learn more about the nitty gritty details of designing a web page. upGrad has many courses that are designed for individuals who are looking forward to upskill in a given sector, or pursue a new interest to later seek it as a career opportunity.
Visit their website to learn more and choose a course that interests you!
Frequently Asked Questions
- What is the style tag in HTML?
With the help of the style tag in HTML, developers can declare a web document’s style information and define the aspects such as the font style, the text color, spacing, and so on.
- How can I apply styles to HTML elements?
Styles can be applied to HTML elements in different ways like:
- Inline styles
- Embedded styles
- External styles
- CSS selectors
- CSS frameworks
- CSS preprocessors
- What is the body style of HTML?
In HTML, the <body> tag contains all the elements that are contained in an HTML document, such as headings, paragraphs, lists, etc.
- How many types of styles are there in HTML?
There are three types of styles in HTML: Inline, internal, and external.
- Can you have 2 styles in HTML?
CSS is the shortened form for Cascading Style Sheets, which means being layered on top of one another. Therefore, developers can use various <style> tags and include more than one style declaration.
- What is inline style?
An inline style is one that is directly applied within the tag of an HTML element with the help of the style attribute. Using this method, developers can define certain styles for individual HTML elements within the HTML document and not in an external CSS file.
- Where is the style tag in HTML?
The <style> tag is placed within the <head> section of an HTML document.
- What are the 3 types of style in HTML?
The 3 types of styles in HTML are inline, internal, and external.
Rohan Vats
Passionate about building large scale web apps with delightful experiences. In pursuit of transforming engineers into leaders.
Get Free Career Counselling
upGrad Learner Support
Talk to our experts. We’re available 24/7.
Indian Nationals
1800 210 2020
Foreign Nationals
+918045604032
Disclaimer
upGrad does not grant credit; credits are granted, accepted or transferred at the sole discretion of the relevant educational institution offering the diploma or degree. We advise you to enquire further regarding the suitability of this program for your academic, professional requirements and job prospects before enrolling. upGrad does not make any representations regarding the recognition or equivalence of the credits or credentials awarded, unless otherwise expressly stated. Success depends on individual qualifications, experience, and efforts in seeking employment.
upGrad does not grant credit; credits are granted, accepted or transferred at the sole discretion of the relevant educational institution offering the diploma or degree. We advise you to enquire further regarding the suitability of this program for your academic, professional requirements and job prospects before enr...