This is a good a time as any to introduce attributes! So far we’ve only seen the type attribute, but from here on out, we’ll be using attributes regularly! There are a ton of attributes. There is absolutely no need to memorize them all, but it is good to know the most used ones off the top of your head!
Style
By using the style attribute, we’re allowing for what’s called ‘inline’ styling. That means that we’re styling a specific element within our code. This is good to know that we can do (and we will do it for now), but once we learn CSS styling, we won’t be doing much inline styling!
Color
We can change the color of an attribute by giving it a value! We can change the text color with just color, and background color with background-color. Take a look and see these busy colors
<!doctype html>
<html>
<head>
</head>
<body style='background-color:lightblue'>
<h1 style='color:red'> Welcome to my site! </h1>
<hr />
<ul style='background-color:#FFAA00'>
<li>I really like to write code</li>
<li style='background-color:blue; color:white'>I especially like to make my page as colorful as possible!</li>
<li > Too many colors might be rough on the eyes, though....</li>
</ul>
</body>
</html>
Notice that not only are we using color names, we’re also using hex code! You can find more out about what colors to use by taking a look at the web colors wikipedia page.
Font Size
We don’t always want to have the same sizes of font in our paragraphs! We might want some containers with larger fonts, and others with smaller! We can do that with font-size! Take a look:
<!doctype html>
<html>
<head>
</head>
<body style='background-color:lightblue'>
<h1> Welcome to my site! </h1>
<hr />
<ul>
<li style='font-size:300%'>I really like to write code</li>
<li style='font-size:2em'>Sometimes, I think making my text get smaller</li>
<li style='font-size:18px'> and smaller and smaller</li>
<li style='font-size:12px'> is really funny</li>
</ul>
</body>
</html>
So, not only can we control exactly what our font-size is by way of using pixels, we can also use a percentage of what our font is (with reference to what it already was) with % and em (em is just equal to the current font size).
Borders
A lot of time, we want to cordon off some content! We can easily do that with a border! Borders are a little weird though (and we’ll explore borders more when we work with CSS). Borders have an interesting syntax, when we call border, we need to call it with border: 'size' 'type' 'color', like border: 1px solid black or border: 1px dotted red. Check it out:
<!doctype html>
<html>
<head>
</head>
<body style='background-color:lightblue'>
<h1 style='border: 1px solid black'> Welcome to my site! </h1>
<hr />
<div style='border: 1px dashed red'>
My site isn't currently much, but give it some time, and this will become super neat!
</div>
</body>
</html>
Padding and Margin
Padding and Margins help us add some space around our content! Padding makes the space inside the element bigger, while margin makes the area outside the element bigger! Take a look at the way that margin and padding render:
<!doctype html>
<html>
<head>
</head>
<body style='background-color:lightblue'>
<h1 style='border: 1px solid black; padding: 10px'> Welcome to my site! </h1>
<hr />
<div style='border: 1px dashed red; margin: 10px '>
My site isn't currently much, but give it some time, and this will become super neat!
</div>
</body>
</html>
You may have noticed that we didn’t remove the borders! You can add as many styles as you want, just so long as they’re broken up by semi-colons!
So, now you’ve got a crash course in web development, try making your own website! Your homework after this week is to make your own site (and host it on your github.io page!). Take all the code elements from above and mix and match (and even try nesting)!