Which is why we ll now be learning how to write in CSS (or cascading sheet style)

Size: px

Start display at page:

Download "Which is why we ll now be learning how to write in CSS (or cascading sheet style)"

Delilah Carr
5 years ago
Views:

1 STYLE WITH CSS My word is changing things in HTML difficult! Can you imagine if we had to do that for every single thing we wanted to change? It would be a nightmare! Which is why we ll now be learning how to write in CSS (or cascading sheet style) In CSS the syntax is this: Tag{ Property:value; So if you wanted to change ALL the p statements in your html document to pink then you would write P{ Color:pink; Sounds pretty great right? You will end every statement with a semicolon (;) You can do this with every tag you have in your html document (ex: html, head, body, h1, p, img) Even better yet you can use your CSS document for multiple html documents so you don t have to keep rewriting code! All of the properties you will be using are the same as the ones you used in your HTML document. Now this time you won t need any quotation lines. Such as: Font-family: Font; Font-size: #px; Color: chosen color; Background-color: chosen color; How can we use CSS though? There are two methods: Internal and external.

2 INTERNAL: With this method we can put the CSS code right into our HTML document This is beneficial if we can only open up one document at a time (which happens on a lot of online coding sites such as thimble) To do this we put the CSS code into our html document with the <style> tag It will go right after our body tag <body> </body> <style> </style> Tag { Property:value; External: The next method gives us the most freedom since we can independently change our CSS document without making any changes to our HTML document and we can reuse it for multiple documents. To do this we need to link our CSS file to our HTML file in our head tag. The format is this: <head> <link rel="stylesheet" type="text/css" href="the_file_name.css"> <head> So as you can see there are three parts to the link Rel= stylesheet and type= text/css will always be included and will be written like the above example everytime the href variable changes with what you decide to name you CSS document. So If I named my CSS document file_1 the link would look like this: <link rel= stylesheet type= text/css href= file_1.css > CHALLENGE 1: Lets get a CSS document

3 1)Save your file as a CSS file by choosing save as:

4 2) link the file using: <link rel="stylesheet" type="text/css" href="the_file_name.css"> 3) Do a test to see if you ve linked it properly, change all of your words in your document to a different color! Some examples of properties for styling in CSS STYLING with Borders: To add a border to your images and words you use the following command Border: color #px style; The styles allowed are: There is one other thing we can do to really change the look of our boxes and images It is:

Border-radius: #px; What it will do is round the edges of your object, the larger number of pixels you put the more extreme this effect will become. Selecting Exactly the right variable!

5 Border-radius: #px; What it will do is round the edges of your object, the larger number of pixels you put the more extreme this effect will become. Selecting Exactly the right variable! So far we ve seen that selecting any variable in your css spreadsheet with result in all of those variables in gaining the properties you ve given them. But what if you only want one line of text or one image to be changed? Or what if you want the whole document to change? To change EVERYTHING The universal selector symbol is *, if you put *{ Color:red;

Now if you want a specific image or line of text there are a couple different ways we can do it.

6 Then whatever piece of text of hyperlink you have in the document will be changed to this default until you over-ride it with another command. To change ONE thing! Now if you want a specific image or line of text there are a couple different ways we can do it. First of all if you put the <span> tag around any object it will be selected so you can change individual words Like putting this

So as you can tell all of the objects will stay green unless it is over-ridden with another command. But what if I don t want all span properties to be the same?

7 So as you can tell all of the objects will stay green unless it is over-ridden with another command. But what if I don t want all span properties to be the same? Heres where the ID command comes in Format: Id=chosen name It can go inside any tag after the initial property like <p> really <span id=name>really</span> Then we link it in css by putting #name{ For example:

$It is set in any tag just like the ID property like so: <tag class=chosen name> This time the css looks like this:.chosen_name{ Note that a. is used instead of the # symbol.$

8 SELECTING WITH CLASS: While ID lets us select one element on a page class lets us select multiple different properties and set them to the same property. It is set in any tag just like the ID property like so: <tag class=chosen name> This time the css looks like this:.chosen_name{ Note that a. is used instead of the # symbol. We can use it like so:

9 Now everything with that class has been made bold even though it was applied to a span, h1, and h2 tag.

Introduction to WEB PROGRAMMING

Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks