CSS3 Introductions and Tips

CSS3 Introductions and Tips


This is Professor Vanselow. This video
will help you learn more about css3 (cascading style sheets) and more
importantly will give you some tips and tricks for working with CSS. Here our objectives. The first one is
going to be just to assess some style rules. I going to start with
a sample HTML file and I’m going to base this off these instructions on
this textbook but I’ll try to keep it very
neutral so this information will apply to know anything
you’re doing in CSS so I’m a preview that html file in my
browser. With Notepad plus plus I’m is a menu option for running in your
browser and rather than looking line for line word for word what these
instructions are I am going to read them all and try to understand
the overall objective on what I’m trying to do The overall objective here is to add some style
on to this page. Rather than typing it in I am going to go to my favorite site which is a great resource for everything html and CSS w3schools and I’m going to look at a working
example in the Try-It Editor. So here I can see that
there is the style tag. Everything within the style
tags is CSS. This is the CSS language and it controls the way the webpage looks. The HTML just controls what content is inside the web page. So this is
what the whole idea behind CSS is, controlling what the webpage looks like. There is some syntax, some new words to learn, there is selectors, body is a selector. You
need to tell the browser, which is going to end up reading the CSS, you need to tell it what
is in the html you want to control the appearance of. One way of
doing that is with an element selector. So, with this, all of
the body and is going to have a certain style associated with it and
all paragraphs and all headings anything that has a tag in CSS will The appearance will change in html
The style in this Try It Editor matches what I
have in my example Alright, so this is the initial objective,
should be to understand what’s going on inside the Try It Editor. Match up the body tag being set. I can play around with
the the property value here and I can submit and see that it is changing. The intermediate objective to after that is
to copy this code into your own file and
get it to work which we’ve done a little bit of and then
the terminal objective is to modify the code
within our file to meet exactly what we need so before you get there and start messing up your own file feel free to play around in this sandbox which is
the Try It Editor at w3schools you see that anything and then paragraph
tag hear anything in a body tag is what’s than be in control let’s make the CSS a little bit more
readable for small tall black which is an ideal not have cost plus is usually pretty
good about doing color coding for us but this is CSS within an HTML document so it doesn’t
really know that’d CSS so later on all alcee how back and change but we can only
change the indentation to help the readability now all are slackers or almonds are
along the left side and our our properties in our property
values are easy to read and the Middle and new we can I’m see exactly what it was that
we’re supposed to do in this example not just taking our come from Dmitry school he wants the h1 elements to be a lot the lines are those of the
caller said Ana you can do with that save this file do
one little thing at a time save every fresh I the orange one away an hour left aligned so it seems to be
working so we’ve my done that we’ve assessed our rules
and we created an embedded style she when you put the style in the HTML file
that is an embedded South shit next thing I do is and my ID selector so I mention earlier %uh selector is as
identifying what in the shell you want to set the style
of I can read an entire are read the entire section to figure
out what owners are trying to do they were just want you to create and I D and set the style and so about it every three schools to go to the ID and class page you read about it and make you think
about my idea is that can as use for a single unique out that not
all paragraphs just a paragraph that you identify
yourself I say here’s the syntax for takes a
pound sign and this one is is in the name param1 this is all the
style we can copy and paste this into ours I’m
you really need is P element style once was in part on the
Simon does his part example sewing your that invented nicely highlighting in pressing
TAB with notepad plus plus and dance will save and when I refresh you see the paragraph
styling one away because we’ve got rain that pero meant
from the CSS but nothing’s reds or not really using this para one style yet so to see you Abu how to use it and where they want to
use and we look back here they want prepare just the one just one paragraph the one
with the actor a senate to have the ID and have that style
associated with it so looking back at how the link was made
between the CSS and HTML there yes you put it with an attack you pry ID equals and double quotes and
then the name our efforts after the pound sign and CSS I’m going to copy this and I’m gonna go
to my HTML I’m going to paste ID and I make it
was not what they said to in the book contact which is a better name in this
example were controlling the style the contact
information say that I’m gonna refreshed and I am it’s rad how cool is that and so we know that we’ve we’ve done some
good things but it’s not exactly where wants they want it to be right aligned must like it’s all there really want so we will go back n and get rid of
Colorado and change text line from center to right save refresh one little thing at a time
you should never have a bunch of stuff wrong with your with your web page you should only have
amassed one thing wrong if you only change one thing you go into a lot more
fun alright so we’re our up to a point doing
a development give stands for our division her divider specially a way to separate out a
section an HTML it’s not going to change the way
anything looks by itself it’s just like a container for arm segment our section under age 10
all and the thing and allows you to do more
uptight than right away as I added & Lodging Association ID with that I’m
you can set an idea on ass elector I’m so are we’re gonna smell disliked mast
dance a sign at the idea I love box thinking and that man could be when
every one of the boxes a column on issues because you’ve got a box around heart and more
than one page is recalling merserve office box to New was want to
have wants an AI border-style: the border with it doesn’t of exactly at the syntax 40 that property so what I would do here and as go to W three schools 5 and the reference for CSS and that and copy and paste it and we don’t want any
style Sat on arm our body we’ve already got a
working girl example of how to do it I D so I can
copy and paste that I’m just can’t change the name from
contact a Boxx because that’s the idea that i sat
alright I’ve done my dear and we now want text-align:right for the
whole box we want that border western border style so this is where I
am go to the w3schools link and I’ll put links for everything
that I when I mmm every web page thank you too will be
in the description for this video steven is quite common
one after thing about yourself I recommend
bookmarking some other especially this one CSS
reference all the properties listen and nice grouping seize up to No what it is
you want to set a property about we want to know could be box
offers border border be a better place to look border
with so we know it’s border clash with and we see an exact
example here that we can copy and paste and the samples and 15px the that’s
called a property value there’s a whole lot of different acceptable property values again w3
schools gonna be your reference our location to see the ballad properties and property
values so I saving refreshing on my body back
row in a way which I wanna but I don’t see any kind of border that’s because I’ve set the border with
but I haven’t sat border-style: now that
might be something is kinda have to read about player on what began one little
thing at a time into the set the bar style border: what
what happened a fact but 10 bad it is ready pic that’s probably more
thick than we want so minded on something wrong oh yeah it was
supposed to be Point High not fire like to do one thing at a time no big deal go back n fix it alright so there’s a lot more things
they want to do with this box I’m trust that you’re gonna be on do on your
own I wanna move on to a class selector are those are part selector are first we just did %uh Alamance than we did our ID’s now earn I have
class class is very similar to an idea to wait
a given name to on something in HTML have associated
style with an easy on the same page w3schools the key differences it’s used
on several elements scuttlebutt difference in taxes he has
got the dot goes before it and the CSS and the
trilateral pyrometer understand it again three steps make sure you understand and
agree three schools copy dinars make sure works then treated
to meet our specifications eyes ears a cent tax in HTML you way I
remembered is and i dnt is up I’m number sign I like your school ID number you might
have a school ID number so I D number and that you’re just 1 percent so as for
one thing and a class uses I period idea term that you use in high
school or something class period and there’s a buncha people in your
class so you can set a class for multiple elements and CSS so ID numbers I’m one thing class period multiple things I you can remember that Morgan just known where to go w3 schools
and copy/paste okay so again there’s gonna be some specific actually it’s a wash it sat in
specific things I’m not gonna go on about my love moral move onto I external stop she’s the cool thing
about extra style sheets is that you don’t have to do anything
differently if you haven’t batted you can just cut it right out and batted
and pasted into a new file the benefits un beso are that you can
then link back to that file for multiple web
pages and that one style sheet will control on
all them look like another benefit and not have passed
bosses when you save is a CSS file your car coating and if any of these properties were no
harm not correct it would much you know what
the color coding but just having those two files isn’t
enough you have to make a connection between that need to link them to each
other and this is the code to do that I can you can find it my in the
description this video all you have to change the file name as
long as the CSS file is in the same folder as HTML file will find each other I’m I get the benefit is multiple
different additional pages can link to one CSS file you can quickly change the hope and overall appearance of your
entire website by going to one file on changing one thing nice consistent I look to your website next a round validate our CSS several
ways to do it wants to this foundation Service website by copying and pasting direct and pop validation is making sure
that all percent tax is exactly correct every opening curly braces a closing
curly brace I use pure coincidence icons are all the right places and a really
good thing to do you also do and Firefox and this tool
called no Web Developer Toolbar there’s tools I is a direct link once
you’ve uploaded to a web server you can do that web link even before you
upload your web server though you can use some other tools in the CSS Menu in the Web Developer Toolbar other
building to install this again in the description I you can put your mouse over elements
of additional page at the top of the screen to show you what all major and her ID or class Iran and they can c The Associated CSS code
at the bottom you can deuce awesome stuff had to a bar in Chrome has some more fans are tea
party decor developer tools access it through mom home settings when you do that when you click
on a highlight how many on left it shows you on a ride the CSS rules are
associated with that this one says user agent style sheet
that just means that and something that chrome is controlling because you
haven’t set anything Let’s go to something we have set this
contact for this paragraph we highlight back on the right side
we can see it’s getting the class or the I D remember number sign
i d contact and we can check and uncheck
that to make it go away I hope you had fun with CSS. It is really cool.
Go make some good looking web sites!

Leave a Reply

Your email address will not be published. Required fields are marked *