HTML colors 🖍️ #12
Summary
TLDRIn 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
🎨 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.
🖌️ 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.
Mindmap
Keywords
💡HTML
💡Style Attribute
💡CSS
💡Background Color
💡Color Names
💡Hexadecimal Color Values
💡Font Color
💡Paragraph Tags
💡Inline Style
💡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
تصفح المزيد من مقاطع الفيديو ذات الصلة
Learn CSS in Hindi with animations
HTML Tutorial For Beginners | Learn HTML In 30 Minutes | Designing A Web Page Using HTML | Edureka
CSS Course | Text & Font Properties in CSS | Typography | Web Development Course Beginner Advance 19
Words in the middle of the horizontal lines (CSS Mastery # 007) | Coder Champ
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 6
Dasar - Dasar HTML 1
5.0 / 5 (0 votes)