In the last post, which I am working on now, you will be learning about HTML, or HyperText Markup Language.
Besides HTML, there are a few scripting languages besides just HTML that can improve your website's design and functions. The one that I will be talking about now is CSS.
Websites don't always look like sites you would usually visit, with different colors, font faces, and backgrounds. Without CSS, or Cascading Style Sheets, a website would look completely white and boring.
If you wanted to style headings (h1 and h2 for example), this is what some example code would look like:
Besides HTML, there are a few scripting languages besides just HTML that can improve your website's design and functions. The one that I will be talking about now is CSS.
Websites don't always look like sites you would usually visit, with different colors, font faces, and backgrounds. Without CSS, or Cascading Style Sheets, a website would look completely white and boring.
If you wanted to style headings (h1 and h2 for example), this is what some example code would look like:
h1, h2 {color: #000000; font-family: 'Open Sans', sans-serif; font-weight: normal;}
So, if you actually put this example into your site's CSS stylesheet, this is what it will look like.
This is Heading 1 with CSS applied.
This is Heading 2 with CSS applied.
This is normal text with CSS applied.The example above also shows the output of the style, which is now used on WebAspire. Instead being the default Arial and bold, WebAspire's headings are now not bold and in the web font Open Sans. Pretty cool, huh? Luckily, for all of you HTML-savvies out there, good news. If you know HTML (and read this part of the guide), you can learn CSS very quickly.
CSS is just the programming of what HTML elements look like. For example, with CSS, you can edit how text appears. CSS is laid out in brackets, { }, instead of HTML's angle brackets, < >. If you know the name of the HTML element you want to style, Heading 1 being H1, for example, you're almost done with creating a basic CSS style.
The name of the HTML element ALWAYS goes before the brackets. It should look like this, if you're styling an h1:
h1 {CSS functions go here}
Next, you figure out what color, font, etc. you want the text to have, if you're styling text with CSS. If you want to change the color of the text, your CSS should look like this, if you're styling an h1:
h1 {color: #009900;}
If you want to use hexadecimal colors, RGB, or just words, such as "red", any one of these is fine.If you want to embed your CSS styles in an HTML page in your site, just use the
<style type="text/css">, and the matching </style> attribute.If you want to write a stylesheet as a .css file extension, make sure that you put the following code in your site's
<head> tag, after you write the CSS codes: <link rel="stylesheet" type="text/css" href="http://yourwebsite.com/stylesheet.css"> Make sure you replace the "http://yourwebsite.com..." stylesheet URL with your website's CSS stylesheet. (Did you notice that the codes are purple? That's CSS in action, too!)So, that's the basics of CSS. I, too, am still learning it. With some more experience, and some more advanced CSS, you can create fancy-looking, well-designed websites in just an HTML editor. Enjoy!
No comments:
Post a Comment