You can set a background image for an HTML element using the background-image property.
body {
background-image: url("trol.jpg");
}
This CSS code sets the background image of the HTML document body to an image file called "trol.jpg". The url() function is used to specify the path to the image file.
In other words, when this code is applied, the entire background of the HTML document will be filled with the image specified in the background-image property. This can be a useful way to add visual interest to a webpage or to reinforce its branding.
body {
background-image: url("trol.jpg");
background-repeat: repeat-x;
}
The background-repeat property specifies how the background image should be repeated if it doesn't fill the entire area. In this code, the value "repeat-x" is used, which means that the image will repeat horizontally (along the x-axis) to fill the width of the screen, but will not repeat vertically (along the y-axis).
So, in summary, this code sets the background image for the webpage's body element to "trol.jpg" and repeats it only horizontally to fill the width of the screen.
body {
background-image: url("trol.jpg");
background-repeat: repeat-y;
}
The background-repeat property is also set to repeat-y, which means that the background image will be repeated only vertically along the y-axis. This will result in the background image being displayed multiple times in the vertical direction, without repeating horizontally.
body {
background-image: url("trol.jpg");
background-repeat: no-repeat;
}
The CSS code background-repeat: no-repeat; sets the background image to be displayed only once and not to repeat in the horizontal or vertical direction.
Color Names: CSS provides predefined color names such as "red", "green", "blue", "yellow", etc. We can simply use the color name as a value for the CSS color property.
Hex Codes: Hexadecimal codes are a combination of six letters and numbers that represent the red, green, and blue values of a color. They are preceded by a "#" symbol. For example, "#FF0000" represents the color red.
RGB Values: RGB stands for Red, Green, and Blue. It is a color model used to define colors in terms of the intensity of the red, green, and blue light. We can define a color in CSS using RGB values as "rgb(red, green, blue)" where red, green, and blue are integers between 0 and 255.
All of these methods are equally valid and can be used depending on the requirements of the project. Color names are easy to remember and can be used for basic designs, while hex codes and RGB values provide more flexibility and control over the exact color required.
In this HTML code, the id attribute is used to uniquely identify three different h1 elements with the values name, hex, and rgb. These identifiers can be used to apply specific styles to each of the h1 elements using CSS.
The styles defined for each ID specify the background color and text color for that particular element. The three different ways of defining black color are used:
ID "name": The color is specified by the color name "black".
ID "hex": The color is specified by a six-digit hexadecimal code "#000000".
ID "rgb": The color is specified by an RGB color value in the format "rgb(0,0,0)".
In all three cases, the text color is set to white.
Comments are lines of code that are ignored by the compiler or interpreter and are used to describe the purpose or functionality of the code. Comments are an important aspect of programming as they help developers understand their own code and make it easier for other developers to read and modify the code.
In CSS, comments can be added using the following syntax:
/* This is a comment in CSS */
Anything written between the /* and */ symbols will be ignored by the browser and will not affect the styling of the page. Developers can use comments in CSS to explain why certain styles were applied or to make notes about future changes that need to be made.
Comments can also be used to temporarily disable or test styles without having to delete or modify the code.
/* Explanations for First Group*/
.first_group {
background: red;
color: white;
height: 20px;
}
/* Explanations for Second Group*/
.second_group {
/* Comment */
background: yellow;
color: blue; /* Comment */
height: 30px;
}
/* Comment */
The comment "Explanations for First Group" is used to explain that the following CSS rules apply to the first group of paragraphs. Similarly, the comment "Explanations for Second Group" is used to explain that the following CSS rules apply to the second group of paragraphs.
In the second group, there are additional comments after each property. These comments provide additional information about each property. For example, the comment "Comment" is used to explain that the background property is being set to yellow.
There is a comment at the end of the code, which is simply a comment and does not provide any additional information.
In CSS, classes are used to apply styles to one or more HTML elements. They are a way of grouping multiple HTML elements together and applying the same styles to all of them.
Classes are useful in situations where we want to apply a specific set of styles to multiple elements on a page. For example, if we have several buttons on a page that should all look the same, we can give them all the same class name and apply the desired styles to that class in our CSS file. This way, we don't have to repeat the same styles for each individual button.
IDs, on the other hand, are used to apply styles to a single HTML element. Each ID should be unique to a single element on the page. IDs are useful when we want to apply a specific set of styles to a single element on the page that should not be shared with any other element.
There may be situations where using IDs is appropriate, such as when we want to target a specific element with JavaScript. Ultimately, the choice between using classes and IDs depends on the specific requirements of the project and how the styles need to be applied.
Classes are created in CSS by using the period (.) symbol followed by a class name. For example:
.my-class {
/* CSS properties and values go here */
}
In this example, .my-class is the class selector, and any HTML element with the class attribute set to "my-class" will be targeted by these styles.
To apply this class to an HTML element, we simply add the class attribute to the element and set it equal to the class name:
<div class="my-class">This element will be styled with the .my-class styles</div>
We can also apply multiple classes to a single element by separating each class name with a space:
<div class="my-class another-class">This element will be styled with both the .my-class and .another-class styles</div>
In CSS, classes are a powerful way to apply styles to multiple HTML elements at once, and can greatly reduce the amount of redundant code needed in a stylesheet.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<p class="first_group">Default Sentence - First Group</p>
<p class="first_group">Default Sentence - First Group</p>
<p class="second_group">Default Sentence - Second Group</p>
<p class="second_group">Default Sentence - Second Group</p>
</body>
</html>
Classes are used here to apply styles to specific groups of paragraphs.
The CSS class selector is defined in the "mystyle.css" file, and the HTML paragraphs are assigned to the classes by using the "class" attribute.
For example, the first two paragraphs have the "first_group" class, while the next two paragraphs have the "second_group" class.
By using these classes in CSS, we can apply different styles to each group of paragraphs. This allows us to easily manage the styles of multiple elements that share a common attribute.
In CSS, an ID selector is used to target a specific HTML element based on its unique identifier. An ID is a unique identifier assigned to an HTML element using the id attribute.
IDs should be used sparingly and only for elements that require unique styling or functionality. It's best practice to use classes instead of IDs whenever possible, since classes can be reused on multiple elements and are more flexible. IDs should only be used when a specific element needs to be targeted in JavaScript or when there is a unique style or behavior that needs to be applied to a single element.
This line is an HTML tag that links to an external CSS file named "mystyle.css" and is placed inside the head section of an HTML document.
<link> is an HTML tag that is used to link an external resource to an HTML document. In this case, we're linking to a stylesheet.
rel="stylesheet" specifies the relationship between the HTML document and the linked resource. In this case, we're specifying that the linked resource is a stylesheet.
type="text/css" specifies the type of the linked resource, which is a stylesheet in this case.
href="mystyle.css" specifies the path or URL to the external CSS file that we want to link to. The href attribute should point to the correct location of the CSS file on the web server or in the same directory as the HTML file.
Overall, this line of code is linking an external stylesheet to the HTML document and allowing it to be used for styling the content of the HTML page.
<link rel="stylesheet" type="text/css" href="mystyle.css">: This tag links to an external CSS file called mystyle.css. This file contains CSS rules that can be applied to the HTML elements on the web page.
<h2 id="level_A">Heading Level 2 - A</h2>: This tag defines a level 2 heading with the text "Heading Level 2 - A". The id attribute is used to give the element a unique identifier that can be targeted by CSS rules.
<h2 id="level_B">Heading Level 2 - B</h2>: This tag defines another level 2 heading with the text "Heading Level 2 - B". It also has a unique id attribute.
<h2 id="level_C">Heading Level 2 - C</h2>: This tag defines a third level 2 heading with the text "Heading Level 2 - C". It also has a unique id attribute.
With the id attributes added to the headings, the web page can now be styled using CSS rules that target those specific elements.
In the given code, the CSS selectors use ID selectors to target specific HTML elements. The ID selector is indicated by the hash symbol (#) followed by the ID name.
The first CSS selector "#level_A" targets the h2 element with the ID "level_A" and sets the background color to yellow and the text color to navy.
The second CSS selector "#level_B" targets the h2 element with the ID "level_B" and sets the background color to light blue and the text color to red.
The third CSS selector "#level_C" targets the h2 element with the ID "level_C" and sets the background color to green and the text color to yellow.
So, this code will apply different background colors and text colors to the three h2 elements based on their unique IDs.
Using CSS from an external file is considered a smart idea for several reasons:
Separation of concerns: CSS is responsible for the presentation or styling of web pages. By separating CSS code into an external file, it is easier to maintain and manage the design and layout of the website separately from the content.
Consistency: An external CSS file can be linked to multiple HTML pages. By using the same external file, it ensures consistency in the design and layout of all web pages that use that CSS file.
Faster loading: External CSS files are cached by the browser, meaning that they don't need to be loaded every time a user visits a new page on the website. This can result in faster loading times for subsequent page views, improving the user experience.
Easier editing: By keeping CSS code in a separate file, it is easier to make changes and updates to the design and layout of the website. It is also easier to collaborate with other developers who may be working on the same project.
Using CSS from an external file promotes better organization, consistency, faster loading times, and easier maintenance and collaboration in web development.
There are three main components of CSS: selectors, properties, and values.
Selectors: CSS selectors are used to select HTML elements to apply styles to. They specify which elements on a webpage the styles should be applied to. There are many types of selectors, including element selectors, class selectors, ID selectors, attribute selectors, and more.
Properties: CSS properties define the style or behavior of an HTML element selected by a CSS selector. They specify what should be changed about the appearance or behavior of the selected element. Some common CSS properties include font-size, color, background-color, border, padding, margin, and more.
Values: CSS values are used to define the specific settings for a CSS property. They determine the exact appearance or behavior of the selected element. For example, a value for the color property might be "red," "#FF0000," or "rgb(255, 0, 0)".
In summary, CSS selectors are used to target specific HTML elements, CSS properties define the style or behavior of those elements, and CSS values determine the specific settings for those properties. By using selectors, properties, and values together, you can create custom styles for HTML elements that help to make your web pages more visually appealing and user-friendly.
<font color="red">Red Heading with Html Only</font>
This is an old school way of applying styles to text within an HTML document. The <font> tag was commonly used in earlier versions of HTML to specify the font, color, and size of text on a webpage.
In this example, the text "Red Heading with Html Only" is wrapped in a <font> tag with the attribute color="red". This sets the color of the text within the <font> tag to red.
However, the use of the <font> tag is now deprecated in favor of CSS styles, which provide more advanced and flexible ways to style HTML elements. Instead of using the <font> tag, it is recommended to use CSS styles within a <style> tag or an external CSS file to style text and other elements on a webpage.
So, while this old school HTML code still works in modern web browsers, it is no longer considered a best practice and should be replaced with CSS styles for better maintainability and flexibility.
h1 is the selector, which targets all <h1> elements in the HTML document. The curly braces {} that follow the selector enclose the CSS declarations for that selector.
background is the property, which sets the background color of the selected elements. The value yellow is the value assigned to that property, meaning the background color of all <h1> elements will be yellow.
color is another property, which sets the text color of the selected elements. The value black is the value assigned to that property, meaning the text color of all <h1> elements will be black.
The second block of code is very similar:
p is the selector, which targets all <p> elements in the HTML document.
background is the property, which sets the background color of the selected elements. The value green is the value assigned to that property, meaning the background color of all <p> elements will be green.
color is another property, which sets the text color of the selected elements. The value white is the value assigned to that property, meaning the text color of all <p> elements will be white.
In summary, these CSS styles will make all <h1> elements have a yellow background and black text, and all <p> elements have a green background and white text.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>
<h1><font color="red">Red Heading with Html Only</font></h1>
</body>
</html>
This HTML code create a simple webpage with a single red heading using old school pure html approach. Usage of CSS can make your website more organized and easier to update.
<!DOCTYPE html>
<html>
<head><title>Title</title>
<style>
h1 {
color: red;
}
p {
background: yellow;
}
</style>
</head>
<body>
<h1>Red Heading with Css</h1>
<p>Normal text - yellow background</p>
</body>
</html>
This HTML code creates a simple webpage with a red heading and a paragraph of text with a yellow background, using CSS styles applied within the <style> tags.
The first part of the code is standard HTML, with a DOCTYPE declaration, an <html> tag, a <head> section containing a <title> element, and a <body> section where the content of the webpage is defined.
The CSS styles are defined within the <style> tags in the <head> section. The styles apply to the <h1> and <p> elements, using selectors to target these specific tags. The color property is used to set the text color of the <h1> tag to red, while the background property is used to set the background color of the <p> tag to yellow.
Finally, the content of the webpage is defined within the <body> tags. The heading and paragraph of text are simply defined using standard HTML tags.
This code demonstrates the basic use of CSS to style HTML elements on a webpage, with the ability to change text color, background color, and other visual aspects of the content.
Internal CSS means we will have CSS code in HEAD section of our web page. A lot of people use that approach while testing CSS because there is no need to switch tabs in editors, if a web page is short.
But, when testing is done, the best way is to copy-paste that code in external CSS file.
CSS code from last tutorial just copy-paste into your already existing page, but put it into between style html tags. Don't forget that, otherwise CSS code will not be operational. Also, you can remove a link to CSS file from a previous tutorial.
Internal CSS will have priority over External CSS file, if you decide to have it.
CSS means Cascading Style Sheets. CSS files are plain text files, just as HTML files, but they have .css extension. It is up to you how you will name them.
To keep things simple, we will have our css file in same folder as our html file. You can create it using same editor you are using for html coding.
Today, HTML, CSS and JavaScript are a must for every serious Website out there. But there is no need to rush to learn all of those technologies in short period of time, because theres just a lot to learn. Give yourself a time. Even with minimal knowledge of those technologies you can make more than decent websites.
Once when you learn CSS, it will be smart to learn about Bootstrap and similar frameworks that are a bunch of predefined CSS options that will save you time, especially if you like to work more with backend technologies, using programming languages like Python or PHP, and working with databases like MySQL and SQLite.
Just as HTML, CSS is group of special, standardized codes we can use. With them we have a great deal of options to style fonts, paragraphs, tables, positions, sizes and other characteristics of our html elements. But for CSS to be useful, first we must structure our html pages right, because with CSS we will target specific HTML elements.
Basics of HTMl and CSS are easy to learn, but there's a lot of combinations, so there's no need to force ourselves to memorize all of it, because we have documentation and a lot of examples all over the internet.
There are 3 ways how to connect html elements with corresponding CSS options.
External CSS means there will be dedicated CSS file outside HTML.
Internal CSS means there will be CSS codes inside HTML file, inside HEAD section of web page.
Inline CSS means, we will have direct CSS codes inside HTML elements, inside BODY section of web page.
External CSS
Inside same folder where your html file is, create CSS file with this name: mystyle.css
Now, we will edit a head section of HTML file to connect that file with CSS file, so CSS file will become operational:
Now, inside mystyle.css file add these lines. We are targeting body sections setting background color to be white, and font color to be black.
Than, we are targeting h1 element, so that background color will be red, and font color for h1 will be white.
After that, p element will be targeted, background will be yellow, and a font will be black.
And than, h3 element background will be light blue, font will be navy color.
If you typed, or copy-pasted all correctly, when page is refreshed you will have new CSS styles applied.
If there is no changes, check that mystyle.css is in same folder as html file, and that you have link to CSS file included in HEAD section of web page.
You are strongly advised to watch corresponding YT video on how to create External CSS file.
It is extremely easy to insert YouTube video into html page. To do that, we will use iframes.
Youtube provide us code that we can grab below YT videos clicking on share button.
Next step, chose Embed (icon with left and right arrows).
When you see a source code that YT is offering you, just copy-paste it into html page you are coding, exactly into place where YT video need to be presented to end user.
There is no need fo advanced code right now, YT is offering us all we need.
If needed, we can set custom width and height of embedded video.
While creating forms in html, similar with tables, we need to have opening and closing form tag as generic border. Having forms means we also need to connect it to backend script in some programming language that will process inserted data.To do that you can use many programming languages. But don't worry for now about backend scripts.
This form is extremely simple. It just consists of a description what needs to be typed in specific fields.
Fields are delimited by 2 breaks.
After we are done constructing fields for data, don't forget to have submit button.
To create tables, we will use 3 new tags. Tag table is a general border. Cells will go between opening and closing table tag.
For every row we will use tr tag. And once inside row, we will use td tag to set values into cells. It's like Excel, but we are doing things manually here in html.
This is the most simplistic example of one table with two cells. Please note that there are no borders around cell by default:
To create a border around a table, we can use border attribute, in this case value is 1. Also, width of a table can be given in percentages. You can experiment with cellpading and cellspacing attributes to get a feel what those attribute means:
Sure, using bgcolor attribute on specific tr row, we can set background color using plain english:
It's easy to use image as link to other web pages on internet. But first, how to set textual link ? To do that we will use a tag. In this case we are pointing to Google:
<a href="https://google.com">Google</a>
Http stands for Hyper Text Transfer Protocol. Https means encrypted connection. Just http means unencrypted connection, that can be easily intercepted on internet. Today most of the sites provide https.
For example, this is how to point to Yahoo:
<a href="https://yahoo.com">Yahoo</a>
Ok, what about image as link. No problem. We will put image element inside a element, like this:
