HTML colors 🖍️ #12

Summary

In this tutorial, the presenter teaches basic coloring techniques using the style attribute in HTML. They demonstrate how to change the background and font colors of a webpage and elements like headings and paragraphs. The video covers using both color names and hexadecimal values for more precise color control. The presenter also emphasizes the importance of readability and color contrast, providing a practical guide for beginners to enhance their HTML and CSS skills.

Takeaways

• 🌐 The HTML style attribute is used to apply inline styling to HTML elements, allowing for direct control over the appearance of webpages.
• 🎨 The style attribute can be used to change various aspects of styling, including background color and text color, using CSS properties.
• 💻 Hexadecimal color values offer more precise control over colors than standard color names, allowing for exact color matching and customization.
• 🖌️ The 'color' CSS property within the style attribute is used to change the text color of HTML elements, enhancing visibility against different backgrounds.
• 🌈 Background colors can be adjusted using the 'background-color' CSS property, with the option to use both color names and hexadecimal values.
• 📝 When using dark backgrounds, it's important to choose text colors that provide enough contrast to ensure readability.
• 🚫 Avoid using overly bright or clashing colors together, as it can lead to visual discomfort and difficulty in reading the content.
• 🔧 The script provides a practical demonstration of how to apply inline styles to different HTML elements, such as headings and paragraphs.
• 🔗 The video includes a call to action for viewers to engage with the content by liking, commenting, and subscribing, which helps in supporting the creator.
• 📝 The tutorial concludes with an offer to share the code used in the video, encouraging viewers to apply the lessons learned to their own projects.

Q & A

What is the HTML style attribute used for?

The HTML style attribute is an inline attribute that contains information about how to style an element or part of a webpage.

Why is the style attribute considered a hybrid HTML/CSS topic?

The style attribute is considered a hybrid HTML/CSS topic because it involves using CSS styling directly within HTML elements.

What is an example of using the style attribute to change the background color?

To change the background color using the style attribute, you can add 'style="background-color: green;"' within the opening tag of an HTML element.

How can hexadecimal color values be used with the style attribute?

Hexadecimal color values can be used with the style attribute by specifying the color value after the 'background-color' or 'color' property, preceded by a '#' symbol, such as 'style="color: #0000FF;"' for blue.

What is a drawback of using only color names with the style attribute?

A drawback of using only color names is that they can result in very sharp colors that may be difficult to read or cause eye strain when combined with certain other colors.

How can the font color of an element be changed using the style attribute?

The font color of an element can be changed using the style attribute by adding 'style="color: red;"' within the opening tag of the element.

Why might a developer prefer hexadecimal colors over color names?

Developers might prefer hexadecimal colors over color names because they offer more precision and allow for exact color matching, which is useful for maintaining a consistent color scheme or matching brand colors.

What is the process for adding both font color and background color to an element using the style attribute?

To add both font color and background color to an element, include both properties within the style attribute, separated by a semicolon, like 'style="color: red; background-color: blue;"'.

How can the style attribute be used to style multiple elements differently?

The style attribute can be used to style multiple elements differently by applying unique style attribute values to each element's opening tag, specifying different colors or styles as needed.

What is the recommendation for using colors that don't clash and are easier on the eyes?

To avoid clashing colors and ensure readability, it's recommended to use contrasting colors and consider the brightness and hue when choosing font and background colors.

Outlines

00:00

🎨 Basic HTML Coloring Techniques

This paragraph introduces basic coloring techniques using the style attribute in HTML. It's a blend of HTML and CSS topics, marking a transition towards learning CSS. The focus is on applying styles to text and background colors. The tutorial starts by creating sample text and headings within the body tags of an HTML document. It then demonstrates how to use the style attribute to change the background color of the webpage, initially using color names and then hexadecimal color values for more precise control. The importance of visibility is highlighted by adjusting the font color to ensure text stands out against the background.

05:03

🖌️ Advanced Color Customization with Hexadecimal

The second paragraph delves into more advanced color customization using hexadecimal values. It explains how to apply the inline style attribute to change the font and background colors of text elements. The presenter experiments with different colors, emphasizing the use of hexadecimal codes for precise color selection. The paragraph also addresses the issue of color clashing and the importance of readability, suggesting simpler color schemes for better visual appeal. The tutorial concludes with an offer to share the code used in the lesson and encourages viewers to engage with the content by liking, commenting, and subscribing.

Keywords

💡HTML

HTML stands for HyperText Markup Language, which is the standard markup language for creating web pages and web applications. It is used to structure content on the web and is the foundation of all web development. In the video, HTML is used to create a basic structure for the webpage, including body tags and heading tags, to demonstrate how to apply styles using the style attribute.

💡Style Attribute

The style attribute in HTML is an inline attribute that allows for the direct application of CSS (Cascading Style Sheets) styles to an HTML element. It is used to define the appearance of a specific element, such as its color, font, or background. In the video, the style attribute is used to change the background color and text color of various elements on the webpage, illustrating how to apply basic coloring techniques.

💡CSS

CSS is a stylesheet language used for describing the presentation of a document written in HTML or XML. It is used to style the look and formatting of web pages, including layout, colors, and fonts. The video is a hybrid HTML/CSS topic, indicating a transition from HTML to learning CSS, which is essential for advanced web design and styling.

💡Background Color

The background color property in CSS is used to set the background color of an element. In the video, this property is applied to the body tag using the style attribute to change the overall background color of the webpage, demonstrating how to manipulate the visual appearance of a web page.

💡Color Names

Color names are predefined color values in CSS that represent specific colors, such as 'red', 'blue', or 'green'. The video uses color names to change the text and background colors of web page elements, showing a straightforward method for applying colors without needing to use hexadecimal values.

💡Hexadecimal Color Values

Hexadecimal color values are a method of specifying colors in HTML and CSS using hexadecimal numbers. They offer a broader range of colors compared to color names and allow for more precise color selection. In the video, hexadecimal values are used to change the background color of the webpage, providing a more detailed control over the color scheme.

💡Font Color

The font color property in CSS is used to set the color of the text within an element. In the video, the font color is changed for the h1 heading to ensure visibility against the dark background, highlighting the importance of text readability in web design.

💡Paragraph Tags

Paragraph tags in HTML are used to define sections of text, typically a paragraph. In the video, paragraph tags are added to the body of the webpage to demonstrate how to apply styles to text content, such as changing the font color and background color of the paragraphs.

💡Inline Style

An inline style is a CSS style that is applied directly to an HTML element using the style attribute. It is a way to style individual elements without using external or internal stylesheets. The video focuses on inline styles to teach basic coloring techniques, showing how to apply styles to various elements within the HTML document.

💡Color Scheme

A color scheme is a set of colors that work well together and are used for the visual design of a webpage or application. The video discusses the importance of choosing colors that are not only appealing but also ensure readability and visual comfort. The example of changing colors to avoid eye strain illustrates the practical considerations in selecting a color scheme.

Highlights

Introduction to using the style attribute in HTML for basic coloring techniques.

Explanation of the HTML style attribute as an inline attribute for styling webpage elements.

Transition from HTML to CSS as the tutorial series progresses.

Creation of sample text and headings for demonstration purposes.

Use of Sublime Text's lorem feature for generating sample text.

Adding paragraph tags to structure the sample content.

Applying inline styles to change the background color of the webpage.

Demonstration of changing background color using color names.

Introduction to hexadecimal color values for more precise color selection.

Practical example of changing the webpage's background to a dark blue using a hex code.

Discussion on the importance of text visibility against dark backgrounds.

Changing the font color of the title to improve visibility against the dark background.

Adding a background color to the title for contrast with the font color.

Using inline styles to change the font and background colors of paragraph elements.

Experimenting with different color combinations for paragraphs using inline styles.

Highlighting the importance of color harmony to avoid eye strain and improve readability.

Providing a copy of the code used in the tutorial for reference.

Encouraging viewers to like, comment, and subscribe for more tutorials.

Transcripts

hey it's you bro I hope you're doing well and in this video we're going to be

covering some basic coloring techniques using the style attribute in HTML let's

get into it

the HTML style attribute is an in line attribute that contains some information

about how to style a whole or part of a webpage this is going to be more of a

hybrid HTML slash CSS topic because it's about time we begin to pivot towards

learning CSS since we are nearing the end of this HTML tutorial series we're

only going to be covering basic color is using styling there's way more that we

can do with styles but we'll save it for the CSS series to begin let's create

some sample text for our web page between the body tags let's type some

sample text let's add a heading I'll use an h1 heading since it's the largest and

perhaps for a title I will type I like colors and then let's close this alright

let's save refresh I like colors alright let's add a sample paragraph to work on

if you're using sublime text you can just type in lorem and then hit tab and

then you'll have all the sample text to work with otherwise you can type in

whatever you want here it doesn't matter I'm going to save refresh and I believe

we should add a pair of paragraph tags before and after this whole paragraph

alright then I'm just going to copy this and let's paste it and have a second

paragraph alright that looks good enough for me all right the first thing that

we're going to do is that we can apply an inline style attribute to nearly any

HTML element so let's begin with the background color we'll want to place

this style attribute within the opening body tag so we're just going to type

style equals and then we have a few options here let's say that we want to

change the background color we can just type in background - color and notice

that the text color is changing - this is a CSS property and we'll type in a

colon and let's pick a color the first one that comes to mind for me is like

green but you don't have to pick the same color that I do so let's save this

refresh the page and the background color of our webpage is now like green

and actually that's not too bad if a color

I would say it's kind of nice it's like nature II and with picking colors you're

not limited to only placing the color name you can use hexadecimal color

values and if you don't know how those work or if you need to find a value I

would recommend going to any search engine and just look up hexadecimal

color picker and then you can choose any color that you want let's say we want

like a really dark blue color maybe like a navy blue of some sort I don't know

that's probably good enough for me alright something you can just take this

hexadecimal code and we're going to copy it and replace light green with this

value and make sure to get that hashtag symbol let's save this and reload and

the background color is now that dark blue color however we can't see our text

anymore because the background is too dark the point being with colors you can

either use the color name or you can use the hexadecimal color value and place

that instead of the color name I tend to prefer these values just because you can

adjust these depending on the exact color scheme that you want or if you're

trying to match like a logo or something you can get the exact colors instead of

just some of the basic generic color names like red or blue you can actually

get a specific value now we can use this in line style element and place this

somewhere else within another tag let's say that we want to change the font

color of our title mostly because we can't see it anymore because it's

blending in with the dark background we're going to type style equals same

process as before let's start with the font colors so we could just say color :

and I'll just pick red let's save reload the page and we can now see the header

for our web page and the font color is red let's add a background color to this

so we're going to place this within the double quotes of our style attribute and

we're going to add a semicolon to separate this and we're going to type

the background - color and let's add a background color I'm gonna pick

something that would kind of clash with red just for an example let's say blue

let's save reload alright so we can change the

background color of this area specifically as well however one problem

that I have with just using color names is that these colors tend to be very

sharp and if you use these together it's probably going to hurt your eyes and be

difficult to read so I much prefer to use these hexadecimal colors instead of

these color names but it works for this example for learning purposes we can

also change the font color and the background color of paragraph elements

as well so we're going to use the inline style attribute and it's gonna be the

same process as before let's change the color so color : and I actually picked

out a few colors already that I kind of like so this is what I'm going to type

but use whatever colors you want so I'm going to type for F C 1 FF and let's see

what this looks like that's kind of cool and let's add a background color as well

so separate this with a semicolon background - color and for this color

for the background I picked 0 2 - 6 3 B yeah that's not too bad um I'm not an

artist though okay this next one's gonna be fun let's do this again but pick some

random values so I'm just going to copy this place it within our next paragraph

and I'm just going to choose two colors at semi-random

so whoo alright we're going with blue I guess and I'm going to paste that here

for the font color let's do this one more time

I guess red I don't know that was my poor attempt at being pseudo-random all

right let's see what these semi random colors look like okay that is horrible

so do not do anything like this the colors really clash together

okay this color scheme was hurting my eyes so I changed the colors to

something that's actually a little bit better I would say just green text on a

black background it's fairly simple if you would like a copy of this code we

worked on today I'll include a copy of this in the comments down below and pin

it to the top but yeah that is how you can do

basic coloring for your website using the inline style attribute in HTML

hey you if you enjoyed this lesson then you can help me help you in three easy

steps by smashing that like button drop a

comment down below and subscribe if you'd like to become a fellow bro