Intro
Note: Skip to start here if you just want to start learning CSS.Developing anything for the web is unnecessarily harder and more complicated than it ever needed to be. The three main web technologies—HTML, JavaScript, CSS— are a little of a kludge that has been put together to let people develop for the web. I have had to learn all three while recently developing a website for the first time. HTML describes the contents of the page, i.e. what was written; JavaScript describes how it behaves when you interact with it; finally, CSS describes how it looks, the font size, when text is bold, etc. It means that there are three technologies one needs to learn before they can begin to be productive. The following is enough to be very productive with using CSS, one of the three main web technologies, within just a few minutes. It requires a background of very basic HTML.
Start here
There are two steps to CSS: selecting the content, then applying the style. CSS is usually added inline between the<style> and </style> start and end tags in the <head> section of the HTML or as an external document in a link: <link href="path/to/file.css" rel="stylesheet" type="text/css" />.
What is CSS
CSS content looks like this:
selector {
key: value;
other-key: other-value;
}
Selecting
There are three important ways to select. Given a tag like the following:
<div class="class-name other-class-name" id="id-name">Content</div>
there are three different ways to select the content in the tag: by tag, class, and id. The tag name is div, the id name is id-name; and, there are two classes class-name and other-class-name. In the CSS code, the tag name is referred to by just using the name of the tag and the id and class are referred to by prefixing the name of the id and class with "#" and with ".". So although redundant, the following selects the div tag using these three methods.
div #id-name .class-name {
//CSS stuff goes here.
}
Applying
In essence it is a long list of key->value pairs tied to a selector. The key is the property being changed and the value to which you want to change it. To figure out what the names of all these things are.. just Google it. That's it. You will almost certainly get the result you want first, usually something on the W3 Schools website. An example to make text bold.That's it! You now know all you need to use CSS to implement anything you want/need on your website.
No comments:
Post a Comment