One of the really fun (and frustrating) aspects of HTML is the ability to change the "style" of your web pages. This includes borders, margins, fonts, colors, and other aspects of your web pages.
CSS Files and "in-line" styles
There are four ways to change the styles for an element on a web page:
If you open the "Tutorials.css" file you'll see the styles that are used with your HTML elements. Examining the HTML file you may also have seen the word "style" in the tag and this is how you specify "in-line" styles. You can also change the styles "dynamically" with JavaScript. For now, we're going to look at in-line styles because they are the easiest to change but be aware that if your elements have a style in a CSS file and an in-line style, they may conflict. For now, we'll create some new "DIV" tags and use in-line. Later, we'll modify styles using JavaScript.
Like with writing HTML, it's important to edit the styles, save the page, and refresh the browser to see what each change does.
To get started, let's put a "div" tag into our content and add some text:
<div> A div with some text </div>
Let's add a background color so we can see what is happening as we change the div:
<div style="background-color:red">
A div with some text
</div>
There are a large number of different colors defined for HTML. Search the web for a list of the colors and try a number of them. You can also specify colors using hexadecimal numbers such as "#000000" or "#ffffff" where the first two digits are for the amount of red, the second for green, and the last two for blue. There is also a new "rgb" function and "rgba" function to create colors with transparency. Check W3Schools for how to sue them.
Now, let's add a border. This is a little more complicated because to create a border we need to specify a width, a type, and a color. Also, notice that the "background-color" and "border" styles are separate by a semi-colon.
<div style="background-color:red;border:solid 2px green">
A div with some text
</div>
Check W3Schools for the different types of borders you can create. Then, try them out with different widths and colors.
While doing this you may have noticed that your text is getting a little lost. Let's add some padding around the text.
<div style="background-color:red;border:solid 2px green;padding:20px">
A div with some text
</div>
Notice that this adds space between the text (or other content) and the border.
Now, let's add a "margin" around the entire div to separate it from the rest of the content on the web page.
<div style="background-color:red;border:solid 2px green;padding:20px;margin:30px">
A div with some text
</div>
Notice that each time we added a dimensions that is specified in "pixels", we have to add "px" to the end of the value. This is required so the browsers know the units we are working in. You can also specify percent ("%").
The margin, border, padding, and content form what is called the "CSS Box Model" and you'll want to burn it into your brain as a web developer! (or just print out the image on the W3Schools web page.
There are a lot of options with fonts in HTML but you have to be careful as not all fonts are supported on all browsers. Let's start by just changing the size of the font.
<div style="background-color:red;border:solid 2px green;padding:20px;margin:30px;font-size:40px">
A div with some text
</div>
There are a lot of options with fonts in HTML but you have to be careful as not all fonts are supported on all browsers. Let's start by just changing the size of the font.
Now let's make the font italic with "font-style:italic" and bold with ";font-weight:bold;"
<div style="background-color:red;border:solid 2px green;padding:20px;margin:30px;font-size:40px;font-style:italic;font-weight:bold;
">
A div with some text
</div>
If we want to use a more classical font, we can specific "Times New Roman" which is very common. However, the browser does not support this font, we should provide alternatives such as "Times", and just "serif" for the "font-family". "Serif" refers to the little decorative lines that are added to the corners of the characters while "sans-serif" would be without these and is more common in modern fonts.
<div style="background-color:red;border:solid 2px green;padding:20px;margin:30px;font-size:40px;font-style:italic;font-weight:bold;
font-family: "Times New Roman", Times, serif;">
A div with some text
</div>
Now you know how to make some pretty complicated styles for HTML elements. Try adding images and additional text in multiple divs. Spend some time playing with these options. Make sure you save your HTML files and keep different versions with elements you like.
You can also add styles to the "<head>" or header of your HTML file. If you label the style with the tag name, then the style will be applied to all the tags in your page that have that tag name. Try the code below to change all the header 1 tags:
<style>
h1 {
color: #FF0000;
}
</style>
Styling links is a little different as there are four different "modes" for a link (or hyperlink). To change the style of each link, we have to add a "style" to the "head" portion of our HTML file. Add the following sample adapted from W3Schools. Notice that there is an "a:" in front of each style. This indicates that the style is for the "a" tag or "anchor" tags (which are hyperlinks).
<style>
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
</style>
The different styles have the following meanings:
CSS is a huge part of the web world and you will probably want to play with a number of the other attributes. The more commonly used ones are:
| font-style | normal, italic |
| font-family | remember to use web-safe font combinations |
| font-size | change the font size, typically with pixels ("px") |
| background-color | color "behind" the content and padding in an element |
| background-image | make sure to use small images to keep download speeds fast |
| background-repeat | repeats the background image |
| margin | adds space between the element and the rest of the web page |
| padding | adds space between the content and border |
| position | absolute positions the element based on: top, left, width, and height. |
| float | allows control over how elements "flow" down the page |
| align | this is deprecated and other options should be used (see 3WSchools Horizontal Align) |
© Copyright 2018 HSU - All rights reserved.