CSS stands for "Cascading Style Sheets". CSS allows you to control the "style" of your web pages including fonts, colors, symbols, effects, positioning and a host of other properties of HTML elements.
Examples of CSS styles include:
CSS can be added to HTML elements by three methods:
The "cascading" part of CSS is that the styles cascade from one style to the next but you can also override them as needed. In other words, if you define a style of a heading in a CSS file, and then define another one in the web page, the things you change in the web page will override those in the style sheet but only for that web page. The same is true for styles in an HTML tag or in JavaScript, you can override those needed and the others will "cascade" down to the element.
Note: Using styles can become very complicated and I recommend using an application like DreamWeaver to manage styles. For this class, we will primarily be using inline styles and JavaScript.
As an example, if we wanted to change the style of the body of this web page, we could use:
body {
font: 14px/1.4 Ariel, Helvetica, Verdana, sans-serif;
color: #000;
background-color: #FFF;
}
The title above is actually a subset of the styles used for this web page. Right click and select "View Source" (in IE) to see the styles for this web page.
The easiest way to get started with styles is to add them right into an HTML tag. This is the quick and dirty approach and we'll be using it in lab this week. For instance, let's create an HTML file with some text:
<html>
<body>
<p>Hello world!</p>
</body>
</html>
Then, we can change the style of the text by adding a "style" attribute and values to the paragraph tag:
<p style="font: 40px Ariel, Helvetica, Verdana, sans-serif;color: #000;background-color:#FF0000;">
Styles in a CSS style-sheet look very similar to the one above except they are in a separate file that can be included into HTML files. This is very handy when you are creating lots of web pages and you want them to share the same styles. Then, you can just change the style in one file and it changes in all the pages that use those styles!
As mentioned above, you can add styles to a style sheet or into an HTML page. If you place the styles in the "head" tag of an HTML file or having them in a style-sheet, then you have three options for how the style can be used:
The last option is rarely used because you could just add the style inline to the element's HTML tag so we won't talk more about it. The other two are important. In the first example above, you'll see the style is labeled for "body". This style replaces the default "body" tags style. You can do the same thing for "img", "table", and most other standard HTML tags. The one exception are links (anchor tags) where there are actually three different styles:
The other option is to create a style that can be applied to selected HTML elements by adding a "class" attribute to the tag. Below is a style class that is defined in the "main.css" file for this web page. Note the dot (".") at the start of the name. This tells the browser that this is a class style. To use it, you simply add an attribute with "class='codeblock'" to the HTML element as in the next code section below. You can also "View Source" on this page to see how it is used.
.codeblock {
color: #151515;
background-color: #f1f2f2;
font-family: "Courier New", Courier, monospace;
font-weight: normal;
margin-top: 15px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 20px;
padding-top: 3px;
padding-bottom: 3px;
}
<p class="codeblock">The content goes here</p>
CSS is used heavily on the web and we'll only be using a small part it and all of it in in-line styles. You can explore CSS on your own, especially if you like the graphics-arts site of web development.
There are a large number of CSS style options (see the menu on the left of W3Schools CSS Pages). The good news is that you only need a few of these to make stunning web pages:
There are a few errors that web developers make over and over (including me). Here are some tips to help out:
© Copyright 2018 HSU - All rights reserved.