I've already discussed how you can learn to code for free using languages such as Ruby and JavaScript, but this time we'll explore an even more basic language that can help to make your websites pop. Cascading Style Sheets is like HTML's cooler, more artistic sibling: While HTML handles the structure and content of your website, CSS allows you to add cutting-edge design to it. This guide tells you everything you need to know to get started making better-looking websites fast.
Many people just getting to know CSS think of it as a fancy way of handling HTML properties such as text formatting and background images--and for small-scale examples on simple pages, that's largely true. You can manipulate many of the properties that CSS affects through pure HTML instead (though not as well), and if you're just looking to change the font size on your page, CSS is actually more difficult to use than HTML.
What makes CSS worthwhile is the number of design options it opens up for you that are difficult--or impossible--to accomplish with HTML alone. HTML gives you just a handful of text properties to manipulate; CSS gives you properties such as color, direction, letter-spacing, line-height, text-align, text-decoration, text-indent, text-shadow, text-transform, vertical-align, white-space, and word-spacing. And I haven't even gotten to the nontext options.
DocHub is an excellent reference tool for learning new CSS commands.
For a full list of CSS properties, you can check out a handy glossary on Dochub, but for now let's look at just two of the more interesting ones. Since we couldn't actually write HTML and CSS code in a Web page without causing trouble for the PCWorld CMS, we've taken the liberty of providing images of some example code and what it looks like on a live page.
For starters, CSS allows you to add and modify a border for any element on a page. The following code produces a solid, 5-pixel-wide red border around the whole paragraph.
CSS experts will note that there is a much shorter way to write this code (they'll also frown on writing the code inline at all), but it provides a good example of CSS formatting.
You write inline CSS in the tag itself, using the style attribute. Basically you write your HTML tags as usual, and then add CSS in the format "css-property: property-value;" right inside. Any arbitrary CSS can go inside the style attribute. For instance, if we wanted to add a drop shadow to that paragraph in addition to the border, we'd change the code to the following line.
You may have noticed that the box-shadow attribute we added has more than one value. That's because the box-shadow attribute allows for shorthand formatting, another timesaving feature of CSS. In shorthand formatting, instead of specifying each related value of a property individually, you can specify the values in a standardized order to save time and characters. In the example above, we specify the height of the drop shadow, its width, and its color.
The border attribute has a similar shorthand, and we could save a lot of space by writing our code in the following format, which would produce the same results.
These cool visual tricks are really just the window dressing of CSS. The language's true strength comes from its ability to quickly and effectively target style effects to any part of your website thanks to powerful selectors. Learning CSS also allows you to standardize your design across multiple pages on your site using a single, easily modifiable external style sheet. Both of these features take months or years to fully master, but I can quickly demonstrate how and why you'd use CSS with a few simple examples.
Next Page: External Styling and Selectors
Tidak ada komentar:
Posting Komentar