CSS tutorials
Tutorial 1 - Intro / Using CSS
CSS is essential for web page development. Tables could be used in the past to position elements, but this could leave to a lot of confusing code.
CSS is also useful for separating HTML content from positioning, layout, and color information. There are 3 ways to put CSS onto your website: inline, embedded, and external.
Inline CSS: Putting the style/CSS description on each tag
Example: <body style="background-color:black; color:black;">
Advantages:
- Quick to implement
- Takes precedence over embedded or external styles
Disadvantages:
- Only effects one element at a time and sub-elements
- Spread out in the HTML- difficult to find and update compared to the other two methods
Embedded CSS: Putting all of the style/CSS descriptions in the head of the webpage
Advantages:
- Quicker to change and see updates(compared to external)
- Much quicker to change styles for a group of elements (compared to inline)
- All style/position in one easy to find place(compared to inline)
Disadvantages:
- Only applies to a single web page instead of a full site, since it is in the head of the page(compared to external)
External CSS: Putting all of the style/CSS descriptions in an external file
Advantages:
- All CSS for a site can be in very few files, so if something changes, you only need to update one file, which effects all files linked to it.
- Each page does not have to have any styling information in it, which makes the page much shorter, and easier to update.
Disadvantages:
- Takes slightly more time to update if you are adding content and CSS styles since you have to keep saving both files
In summary, When you are testing something out, inline is quickest to use.
If you have a general idea of how you want everything to look, it's easier to use embedded, which also allows you to effect many elements at once.
Finally, after you have your first webpage looking how you like it, it is best to move the embedded CSS into an external file to share it across all your pages.
CSS example 1: inline CSS
Click here to
Explanation:
You can see that the attribute 'style' is used to set the style of the element. You can set the style of any tag you use, and can set many attributes.
For the body element, I first set the background color to green, and set the color of the text to white.
CSS applies the style to all elements inside of the original one. In this case, setting color to white will change all elements including the p tag so that their text color is white.
CSS can understand 3 ways of setting the color: plain text, hexadecimal, and RGB values. Text is easy, but only covers select colors. Hexadecimal is standard, but I prefer using RGB, because you can pick colors directly out of Photoshop, except when I use just a plain color.
For example, text, hex, RGB for white would be: white, #FFFFFF, rgb(255,255,255) .
Next, I set up the attributes for the p (paragraph) tag. I change the font weight to bold, font size to 16px, and align the text in the center.
Now try this on your own! Try different colors, different parameters, ect. Can you change the background of the text to be different than the background of the body?
For additional reference on CSS, look at w3schools.com, the best resource I have found for HTML, CSS and javascript!
