2.2 HTML5 and CSS3: Working with Images

2.2 HTML5 and CSS3: Working with Images


Images are an important part of any webpage. In this video, we will apply an image as our new background,
and then add an image to serve as our banner. To make the background an image instead of a solid color, find the CSS rule that targets the body tag, this
should be near the top of the page. Click at the end of the line that contains the background-color property
and press the Enter key to create a new line. Then, type the CSS code seen on screen. Next, we can remove the border that we applied to the wrapper in
Part One of the training series, we no longer need it. Locate the “div.wrapper” class and highlight the line
of code that defines the border property, then, press the Delete key. Next, we’re going to add a banner to our page. To add a banner, locate the div tag with class banner applied to it, and click in-between the opening and closing div tags. Next, type the HTML code seen on screen. Now, we want to make our banner a
link that links back to the homepage. To make our banner a link, type the following HTML code after
the opening div tag with the class “banner” applied to it, but before the our image tag. Then, close the anchor tag we just created by typing
the following HTML code after the image tag, but before the closing div tag. Now that we have made our image a link, a
border may appear around the image in some browsers. To remove the border, we must define default styling for any
image tag we may add to our web page. To define the default styling, click after the closing
curly brace after for the class “a.navbuttons:hover” and press the Enter key to create a new line. Then, type the CSS code seen on screen.

Using CSS: styling child elements

Using CSS: styling child elements


So far in our CSS, we’ve only been
targeting by element and when we do that it styles all the elements
the same way. But maybe we want to be a little bit more
specific. So let’s say, I want to target the
Brachiosaurus paragraph here, but not these two paragraphs up here. Looking in my HTML, I can see that these
two paragraphs are inside of a header element where the Brachiosaurus
paragraph is inside of a main element. So knowing that they’re inside of
different elements, I can style them differently. So, if I want to get the Brachiosaurus
paragraph, I know it’s inside of main, so I’m going to type main p. What this is saying is select every
paragraph that is inside of a main element. This is called a descendant selector. So in here we could just change the color
to be white like that. So I go refresh and you can see I’ve only
selected this paragraph here. I’ve selected only the paragraphs that are
inside of the main element. I can do the same thing for my header, so I could do header p background-color:
yellow. So there we go, I’ve changed just those
paragraphs now separately from this one, I’ve changed the bar, their background
color. But, you’ll notice that because I targeted
all the paragraphs inside of the head, header element, right here, it selected both of these paragraphs because
they’re both inside of the header element. Now, the difference though, if you look at them, this paragraph is
directly inside the header element where this paragraph is inside of
a div which is inside the header element. So we can target those a little bit
differently. So if I wanted to get just this paragraph
right here, I could go like this. I could type header div p and let’s change
the color to white. So this says, get every paragraph that is inside of a
div that is inside of a header. So if I go refresh, you’ll see it’s
getting this one right here. That’s one way to do it. The other way is because this paragraph is
directly inside of a header and there’s nothing surround it, surrounding
it, we can use a child selector. So if I was to type header>p that would
mean get any paragraph that is directly inside of a
header and not inside of something else. So I could change the color then to red. So there, I’ve selected just this
paragraph separately from this one. So I can either target multiple levels
deep, like this, or I can target what’s called a child selector, this right
here, the greater than means that the paragraph is directly inside of the
header and not inside of something else. Let’s, we’ll look at one more relational,
relational selector. Inside of our header, we can target ps
directly because using the child selector here, but we’re getting both of
those paragraphs, we’re getting both these here because
they’re both directly inside the header. But let’s say I only wanted to get this
paragraph and I wanted to style it differently from this
paragraph. Now, they’re both directly inside of the
header so the child selector doesn’t work. But the difference is that this paragraph
is right beside an h1. So because it’s beside an h1, I can style
that. So in here I can take h1 + p and do
something to it, background-color: red. Now this selector says, find every paragraph that is immediately
beside an h1. If I go and refresh, you can see I’ve
selected this paragraph right here. Let me change the color on that, too. So we have different ways of selecting
relational things. We have descendent selectors like this, we
have child selectors which are kind of like direct descendents, and then we have
sibling selectors or adjacent selector where the p is beside an
h1, and we can style that way.

How to Download fonts and Generate Embed Code – Introduction to CSS Tutorial for Beginners – Part I

How to Download fonts and Generate Embed Code – Introduction to CSS Tutorial for Beginners – Part I


Hello and welcome to another new episode of
‘Learning Simplified’. In this tutorial, what we had told you previously that today
we are going to learn about font matching, that means, this is the font that has been
used in your website template, but when we try to implement this font into our website,
what we see, this is the font-family originally that we are getting back from our site. Now
the problem is, this is actually a system defined font, that means, this is the common
font in-built to every system for windows, and anytime when we are not mentioning any
kind of particular font format into our web project, then it will execute the default
font format that it has been instructed to. So all we have to do, we have to match this
font, that means the font, that has been provided into our template is this is another font
that we are using on and we have to match this font to our project. But before that
there are some vital issues, those have to be taken care of before we start making any
kind of font formatting. So, let’s get back to our project first.
In this ‘stylesheet.css’, first of all, make some quick amendments. This is the parent
div ‘tagline-holder’. Now we are going to revert back any kind of height that has
been provided to it. So all we are going to do, we are commenting out those height syntax,
all those heights those were attributed to this ‘tagline-holder’, and its associate
child divs. So let’s comment it out. This is my friend…this is known as the CSS Commenting.
So the necessity of commenting is that, whenever you are providing this kinda stuff ahead any
instruction or any syntax, then what it does, it just nullifies all the effects that could
have been imposed by the corresponding syntax. So in this case, as we are commenting out
this height 100px, that means from now on, there won’t be any height that should be
executed in this parent div that is known as ‘.tagline-holder’. So what we are doing
here, we are just commenting out any kind of height that is present into this particular
parent div known as ‘tagline-holder’. So here’s the first height that we get over
here. The next child div here is ‘tagline-holder-first-children-logo’, and a height of 100px is also assigned over
here. So what we need here is to comment it out… again. Same thing for the second child
div….. and for the next one. So all the three child divs and the parent div, in these
divs, the heights are now, or the effect of height that has been imposed here is nullified.
Now we are getting back to our project but before that, all we need to do, we need to
provide some kind of padding over here. i.e. , we are providing a ‘padding-bottom’
property. So we are providing this particular instruction. Now this padding-bottom attribute
has been provided over here. Now we are just saving this page ‘stylesheet.css’, getting
back to our project and reload. And we can see now that all the height those has been
provided those heights are now nullified on these extreme divs, i.e., this logo box and
contact us box, these two boxes, those are executing the property of ‘padding’ from
the bottom end. Now in case of this middle content, that is known as the ‘tagline-content’
over here, this content is now aligning in the extreme left position. So all we need
to do, first of all, to align this text into center. So what we need to do, get back to
‘stylesheet.css’, and provide here another syntax, such as ‘text-align:center’. Press
‘CTRL + S’, go back to your project, reload, nothing happens. Sorry. We forgot to provide
the separator over here. So I think now you are aware of the fact that why to provide
the separator because instead, no such property beyond the point where you made the error
will be visible to anybody. So take care to provide the separator each time whenever you
are writing down the properties to a particular class name.
Just press ‘CTRL + S’, get back to your project and reload, and you see now this tagline
is aligning into the middle position of the web page and off course of this div.
Now get back to your project, first of all get back to ‘index.html’ and see over
here, and you see that the tagline comes under this tag,

. Again, this

tag
is coming under the selector name which is known as ‘tagline-holder-tagline-content’.
So all we need to do first of all, copy this selector name, get back to style sheet, and
here this is the class which has been created with the same name, i.e., ‘tagline-holder-tagline-content’.
First, provide the same class name over here, and then you are actually customizing the

tag over here that is coming under this class name. so customize this tag, and provide
attribute for it. So what we are going to do, we have to take care of the font-size
first, suppose we are assuming it to be at 30px, another thing that comes over here is
known as ‘font-weight’. So all you need to do, you may write it bold, or you may write
here any amount that comes into this, such as this one, 700, whatever you wish. If you
wish to change the style of the font element that is present into your website, then all
you have to do you have to provide a command that is known as ‘font-style’, and you
are setting it to italic. If you want to make a certain space from the top and from the
bottom, that means you want to appear your text into a vertically central position of
your div, then all you need to do, you need to provide a particular line-height to this
project and make here it is as, for say, 60px. Press ‘CTRL + S’, go back to your project
and reload. You see now, your tagline-content has turned into an italic version, it is now
bold and it is now aligning into a vertical-middle position of that div. so, providing the line-height
here means you are providing a particular space between two successive lines. Now as
you are using a single-line text over here so all it is doing here is increasing the
spacing from the top and from the bottom aligning the content directly into the middle of the
div. So this is the usage of line-height command into CSS.
Another thing that comes into action is known as ‘font-family’, so if you provide here
‘font-family’, that means you are now specifying the family of the font, what is
it? Is it a sans-serif or cursive or fantasy, what? So, this is the font that I am using
over here. All I need to do is to rename this font, copy the name of the font-file over
here, now get back to your project, and within inverted comma, we have to paste this font-family.
Press ‘CTRL + S’, get back to your project and now it has been changed into ‘Doriel’,
from its system defined family, it is now changed into this user defined font family.
Another thing, if you view our template you will see that the template that has been awarded
to us that this is a normal font what we are practicing over here, but this is an italic
version that we observe here, so what we have to do again, we need to comment out this section
which is known as ‘font-style: italic’. Off course we are reducing the font-weight
over here, we don’t need such font-weight, it is a huge one. Now get back to your project,
reload and you will see that the font-styling, now it is almost matching to the template
that we are using. So we are going to keep those changes those we have made so far. All
those things are right on track and we are getting pretty closer display or execution
of the project into our browser. But there’s a minor problem that we are not caring so
far. This kind of font is installed into my computer that I have downloaded from internet,
but it is not sure and certain that the same font will be present on your machine as this
is not a system defined font. So what we are going to do cause what we are seeing over
here, as this font has been installed into my machine, that is why you have a preview
of it into my web browser. But what we are talking about is the general display into
any machine worldwide. In that case, it won’t be a wise enough thing that you just mention
a particular font-family name here and you just leave it. In that case, what we have
to do, we have to download this font first, and then we have to generate the corresponding
embedding code in every format available in the market and then we have to copy those
things into our own CSS folder and then we have to organize into our style sheet such
as this font matches with every computer such as whenever someone opens this website, the
necessary files to execute this font-family download into client’s machine and then
this font is visible to everybody as this one is visible to us. So, what we have to
do, we have to generate this font first, but before that, you have to install it from the
internet and that is what exactly we are going to do. The procedure is very simple……

#81  Page Structure & Styling 3 Using Html Css JavaScript

#81 Page Structure & Styling 3 Using Html Css JavaScript


All right now let’s style our books is when they are active. So when we click on a box we can see lots first of all the shadow disappears. OK. And also the position of the box goes down a little bit so that it covers the original space occupied by the shuttle which means that it goes down by four pixels the vertical value of our original shadow so to style the boxes is when they see if we are going to access the valks glass. OK. And then call on active and just make sure that there is no space between Conan and text. So first of all the books shadow property is going to change. OK. So both values this time are going to be zero. OK we can do the color. And also to make the box go down by 4 pixels. We’re going to use the top position or the top property but we’re going to set to four pixels but we’re going to need to give our box a position of relative. OK. So it’s like the box actually is moving relative to its original position. OK. So let’s try this. We can see that the box goes down by 4 pixels and the shadow disappears on us. If we look at the final page we will see that’s the box when we click on it it takes some time. Can we can see a transition effects before it goes down. All right. So you’re going to do going to use a transition property. OK. Like we did before in the first projects the prop they’re going to be looking us here is going to be both the box shadow. OK. And the top position but we can just go for all which means that we’re looking at all the properties of that specific item OK for the duration we’re going to go for point two seconds. OK. And we’re not going to specify any timing function of Ueno because it’s optional right. So now when we click on the box is refresh the save and refresh. Can you see this transition effects. And I can see the position effect. OK. One important point like we did in the previous projects we’re going to need to add a few more lines for the transition property. OK for cross-browser compatibility. And we’re going to add something just before the transition Wed. So we’re going to have kids. Okay. And then was when was the lower and for Oprah and miss for instance is explorer and it’s okay for the books Chido we need to do the same thing but only for Safari and Mozilla so wherever we used book Shadow we need to add a couple of lines one for Safari and one for Mozilla. OK so I’m going to do it for the first one. OK. And then we’re going to pose and wait for the other ones. Make sure we do the same on your own so. So I’m going to add this one for and this one way tickets for Safari. OK. So now I’ve got these couple of lines added to all my books shadow properties. OK. OK so just make sure that you do the same. OK. Now we’re going to move to the start reset button. OK. So we’re going to be creating a diff following the choices Dave. And we’re going to give it an ID starts resets unless I’m going to play some texta Stars game now let’s dial this live if we look at our stars recess Musson will see that most of the properties of the button are very similar to the properties of the box class. OK so we’re going to do we aren’t going to copy the properties of the books class into the styling of the stars. Reset Button. And then we are going to adjust the styling for the button. OK. So let’s take out a few properties we don’t need like the line height gay or the height. If Lote’s property OK we don’t really need. Right. Well you don’t need the margin property to center the button so you cannot go for a top and bottom margins of 0 and 0.04 left and right. OK. And now it sounds it also going to add some padding it’s good for 10 pixels and the background color. We’re going to change it. Basically this is a white transparence color and it looks like this because the color behind it is blue . OK. So again I use the IGDA function. OK. I’m going to use the values corresponding to white and then I’m going to go for point five for the transparency K for the with. Let’s make it a little bit smaller. Even smaller than that and make sure that the text is still going to fit the and resets game. See C it’s fine. OK. Now we are going to Tiley over an axiom states of the stars. OK so we need exactly the same properties of the Hoven actually states of the box class. So all we going to do is going to add another selector next to the box Hoven selector. OK. Are these Tarth resets wasn’t going to be going on over. And similarly with the same thing with the active States. OK . All right. Now let’s add our time remaining box. So this goes to our indexers H.M.S. file and creates a new div following our stars reset button and give it an ID time remaining. OK. So inside this div we’re going to play some text. Ok so time remaining 60 seconds. So I’m going to place the number inside a span and give it an ID. Time remaining value. So we’ll use the ID later on with javascript’s to access this value and change it. OK. OK. Now let’s go to the stunning sheet and style the time remaining box. So going to access is using its ID which is time remaining all right. So let’s give it some weight and putting them in position is in our container. So it’s so first of all give is a width of 200 pixels and a putting of about 10 pixels. OK. And let’s position is inside our containers are going to give us a position as butes absolutes. Okay. And then are going to give it a top property of 300 pixels. Fifty four hundred ok or a little bit less. Three hundred ninety five. OK. And a left position or left property of 300 or 400. OK let’s change the width to 150 is make it slightly bigger. OK you explain. Now let’s add some background color. OK. So if you want to get the same color as does this color is created using the ICBA function. OK so we’re going to use a green color with some transparency. OK. So I’m going to use the IDBI function. So I’m going to use three values as following 1 8 1 2 3 5 and then 3 6 and then I’m going to add some transparency over pay zero 0.8 OK or a little bit less than that’s your point seventy 78. OK. Continue the color if you want to you can use the control alt K method and this says the transparency using the slider. OK. You can choose any color you want. OK . Now let’s tile the corners and just add some more the radius. OK it is go for 2 pixels 3. OK. So that’s some valks shadow. So again I’m going to use Zerbe cells with the horizontal value and 4 pixels with a vertical one earning . We’re going to use a gray color for the shadow. OK so we’re going to use the Ojibway function again. So going to use the black color. OK. And then we’re going to use a transparency of white to that looks. OK. Now we all need to hide the time remaining div initially. OK so we can use either the display property or the visibility property we have used the display property earlier with the correct and try again boxes. So let’s use the visibility property this time to learn both. So when we use the visibility we are going to set it to hit it. OK something for you to remember the difference between the visibility hidden and the display on properties is that if we apply visibility hidden to a certain elements in our page that element is still going to be present in the page. OK. And he’s going to interact with the other elements. So at the moment this one is not interaction with the other elements only because it’s got a position property of absolutes creates all the other elements are behaving as if doesn’t exist at all. OK the display on property is going to hide the elements and the elements is not going to end tracks any more with other elements. OK. All right now though we understood the difference let’s just use the display property to make it easy to standardize all the functions in our code. Later on when we are writing javascript’s. When I said display to none. And I’m just going to comment this one so they can amendments. OK

#164  Jquery Code 2

#164 Jquery Code 2


Nounless move to the time seconds. OK. So inside one second we’ve got one hundred sixty seconds so we’re going to do exactly the same thing . So time seconds is going to be Marth floor of the division by 100. OK. But this time we are going to divide the remainder of our first division. OK. And the remainder of the First Division is this. So this means the remainder of dividing time counter by 6000. OK. And finally the center seconds are going to be the remainder of this division. OK so time 10 seconds is going to be the remainder of that division which is this guy. And we don’t need the math floor method for this. OK. So let’s do the same thing for the loop variables. So we’re going to change the time we need to a lot of minutes. And the same thing for the other two variables . OK. Now we will need to access these elements. OK. Using their IDs anti-New their values to these valid variables values. OK. So we’re going to be using their IDs which I was following so we called the lock me in its last second lubs and second and the same thing for the times. OK. So so is access the time elements first starting with the minutes so we can access each element using its ID. So we starting with the time in its element and we are assessing its text using the text method to the variable Claymates of variables value 20 minutes OK and then you to do the same thing for the seconds and the send seconds. So we’re looking here it’s time. Second guessing to time seconds and then time senti second as we are setting to time since seconds and then go do the same. Same thing for the Lap’s . So you access the minutes they just copy this code to make it easier for us. So we are looking at not minutes per second and the second and the variables are locked minutes seconds and lubs in seconds. OK let’s say this and let’s click on the start. OK so we can see that it’s working. OK. Now of course one issue we don’t like to see single numbers or single days like this. So our file up shows that we’ve got all the time two digits. OK. So to do this we are going to create a function to formats our numbers and we’re going to call it four months just like this. OK. So he’s going to take one time into a number and is going to check if the number is less than 10. So if the number is less than 10 then it’s going to return a string which is going to be zero. Plus our number. OK. Otherwise it’s just going to return the number itself. OK. So before using these variables we’re going to use the Format function just like this. OK . OK. Let’s save and check again. And now it’s perfect. We need to wait until 1 minute to make sure that the minutes are working as well. So was going to post the video and wait and see how he’s there. OK we are almost there. So let’s see how it’s working. OK. So we haven’t implemented any code yet for the soapers And so our code so far is working. Now let’s take something. If the counting keeps going the number of minutes is going to become too big. And if we want to limit stats we can do that by going back to our set interval function. So every time we increase the counter by one we can check the counter against our limits. So let’s say we want to limit the number of minutes at 100. OK so now we aren’t going to check if the counter pay is equal to that to the number of sunny seconds corresponding to 100 minutes which is 100. Multiply it by 60 seconds multiplied by one hundred ten seconds. OK then we are going to reset our counter to zero. OK. And I do the same thing for the last count we are ticking if it’s also only two equal signs. OK so same thing there. Well the lunch counter. OK here we go. All right. Now let’s move to the code corresponding to clicking on the stop button. OK. And we’re going to continue in the next video .