Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Addin Design and Colour to HTML

After learning the basics and some additions in Learn HTML and Learn More HTML, this prezi will introduce you to CSS and teach you how to add design and colur
by

Emily Gaughan

on 22 January 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Addin Design and Colour to HTML

Design and Colour
Internal Style Sheets
Internal style sheets go into the head of a page between style tags.
Both groups of elements and individual elements can be styled easily inside these sheets.
for example you can set anything in div tags to be yellow or you can give two specific divs a class and make those blue or you could give one div an id and code that to be green
External Style Sheets
These are created in a new document. The document is then saved as a CSS file type, as opposed to a html file type.
CSS
CSS is a new piece of the puzzle. It is, for example, the wallpaper on the walls
Inline CSS
when coding inline CSS you use the 'style=' attribute inside different tags.
There are loads of different options to put in the style attribute like
color
- which will change the color of the text;
background-color
- which is like highlighting text or changing an area's background;
family-font
- which changes the font.
Layout
<style>

h1
{
backroung-color: purple;
}

#particularH1groups
{
background-color: green;
}

.specialH1
{
background-color: blue;
}

</style>
The Commands
Internal style sheets use the same commands and values as inline CSS.

The only differences are the curly-bracket-marked sections and that instead of being inside the style attribute, they are in between style tags in the head where all styling can be put together.
Putting it into action
giving a paragraph a blue background, yellow text and the font verdana looks like this:
There are three main types of CSS:
Inline CSS
Internal Style Sheets
External Style Sheets
Inline CSS
Inline CSS is used to style small pieces of code at a time.
It uses attributes inside of specific tags to effect those particular elements.
For example, if you only wanted paragraph three to be blue you could put an attribute into that particular paragraph tag to turn it blue.
Internal Style Sheets
Internal style sheets are handy for styling large areas of code inside one single document.
They use style tags in the head of the document with a list of styling points inside them. They use curly brackets to separate each point.
Ids and classes are used to group piles of different tags together.
For example, if you wanted all of the "div"s to have a green background, you would reference "div" in the sheet and then tell the backgrounds to be green. Or if you wanted some headers and some paragraphs to be red give each of them the same class and then reference the class in the style sheet.
External Style Sheets
External Style Sheets are good for styling more that one page at a time, if you were making a website with lots of different pages that looked the same you could make one style sheet and then link it to all of the web pages.
These are lists of CSS code like in an internal sheet, also using classes and id's, but are made separately and added on to each document that is to look the same.
<p style="background-color:blue; color:yellow; family-font:verdana"> This paragraph will now be nice and colourful </p>
=>
What to Use?
There are many elements which you can change the color of, size of or even opacity of but you need to know how to type it.
The
style
attribute is used with css. Inside a tag it looks like this:

<tag
style="..."
>Words</tag>
inside the style attribute we put commands like color:blue
inverted commas must go around the list of commands
a semi-colon must be placed after each command


<p style="color:blue;">
Inside the style attribute you can use:
color:
background-color:
opacity:
margin-left:/margin-right:
font-family:
font-size:
text-align:
Color
Color in a paragraph of or other text tag will change the colour of the text.
This is useful for differentiating between topics and making stuff look cool
I would normally use the English spelling (with a 'u') but it is only recognized in code when you use the American spelling
<p
style="
color:yellow
;"
> YELLOW!!!<\p>
=>
YELLOW!!!
Background-Color
changes the background colour of the page, paragraph, sentence or word you want
Looks a bit like highlighting and is great for sectioning off areas
A lot of colours are recognized as words but for more specific colours, you'll want to look up a colour sheet and use the hexnumber.
Eg. White = #FFFFFF
<p style="backgroundcolor:red;">RED!!!</p>
=>
Opacity Can be changed on pictures and over paragraphs or divs.
Opacity
It's useful when putting text over a background image that you still want to be seen.
In the style attribute, set the opacity as a decimal.
<h3 style="color:red; background-color:blue;"> not ghostlike!</h3>

<h3 style="color:red; background-color:blue;
opacity: 0.4
;"> ghostlike!</h3>

=>
Margins
Margins are the amount of space to the left/right/top/bottom of a section of your webpage.
If you want your whole body area to be in a column in the centre of the page with a background image behind, you would use a div and some margins to make the space
Margins are written as an amount of pixles ie. 10px
<body style="background-color:blue;">
<p style="background-color:red;
margin-left: 20px;
">
Hi there!
</p>
</body>


=>

20px
Font-Family
font family can be applied to any piece of text in the webpage.
It (fairly obviously) changes the font of that piece or those pieces of text to the font value you give
The value for this command is always a word. Some fonts are not recognised with all browsers so you should look up a list of available fonts.
Font-size
Fairly simple again, just use it on any piece of text you want to change the size of.
This attribute re-sizes the text and while tags like <h2> etc. also chage size this gives more freedom and options
The value is given in pixels eg. 10px
Text-align
Text align can be used on any group or piece of text or div which you want to reposition
You can either place text centered in the page or to the right or left. It's fairly simple, a bit like a quick margin.
The value is the location you want the text to be shifted to.
Quick Links:
(as per usual)
http://www.w3schools.com/
http://learn.shayhowe.com/html-css/
http://html.net/

http://www.w3schools.com/html/html_styles.asp
http://www.w3schools.com/cssref/css_colors.asp
http://www.w3schools.com/cssref/css_websafe_fonts.asp

http://notepad-plus-plus.org/
http://komodoide.com/komodo-edit/
http://www.sublimetext.com/
}Learn more
}Styling
}Editors
The type of tag you want to style
style tags
a class for a group of specific elements
an id for a single special element
curly brackets around the attributes
hash to mark a class,
dot to mark an id
semi-colon after each attribute
Inside these sheets, you can head straight in with naming off different sections and using curly brackets to make styles for them.
There is no need to use any tags inside these sheets as they are not html, they are a whole other language.
Attaching The File
because this sheet is something completely separate to your html files, you have to link it into each one that you want to follow your style commands
<link rel="stylesheet" type="text/css" href="
cssfilename
.css">
It's a good idea that you save the style sheet in the same folder as all of your other files, to make it easier to link them together. If it's in a different folder, you will have to include the file location.
So that's all for now.
I think it has to be said that, when it comes to coding, but CSS in particular, the best way to learn is to practice, play around with it and have fun. Go now, and try out everything you've learned here.
It's safe to say that the world of code expands farther than any one prezi can explain, so I highly recommend that you go out and explore the internet - and your own minds - to learn as muc code as you can.
Thank you to everyone who watched my prezis, I hope they provided some good insight for you. Keep coding!
Full transcript