All Entries in the "CSS Tutorials" Category
Styling semantic markup
The exercises in this section will combine the elements discussed so far in this post, showing how to use the knowledge gained to style some semantic markup. Three different examples are on offer, showing how rapidly you can create great-looking text when working with CSS, and also how you can easily restyle a page of [...]
Creating alternatives with classes and spans
It’s common in web design to define alternatives to the rules set for tag selectors (h1, h2, p, etc.). This tends to happen most often in one of two situations. The first is when creating alternate styles for a portion of a web page (as in print, it’s often beneficial to use different text for [...]
CSS shorthand for font properties
The CSS properties discussed so far can be written in shorthand, enabling you to cut down on space and manage your CSS font settings with greater ease. Like some other shorthand properties, some rules apply:
1.Some browsers are more forgiving than others regarding required and optional values, but you should always specify the font-size and font-family [...]
Styling text using CSS
HTML is intended as a structural markup language, but the Web’s increasing popularity meant it got “polluted” with tags designed for presentation. This made HTML more complex than it needed to be, and such tags soon became a headache for web designers trying to style page elements, such as text. In the bad ol’ days [...]
Web design overview
Web design has evolved rapidly over the years. Initially, browsers were basic, and early versions
of HTML were fairly limited in what they enabled designers to do. Therefore, many older sites on the Web are plain in appearance. Additionally, the Web was originally largely a technical repository, hence the boring layouts of many sites in the [...]
Web page backgrounds in CSS
Backgrounds are added to web page elements using a number of properties, as described
in the sections that follow. background-color This property sets the background color of the element. In the following example, the page’s body background color has been set to #ffffff (which is hex for white):
body {
background-color: #ffffff;
}
background-image
This property sets a background image for [...]
Setting a default font and font color using CSS
As mentioned earlier, the body start tag was historically used to house attributes for dealing with default text and background colors, link colors, and background images. In CSS, link styles are dealt with separately. At this point, it’s worth noting that, when working with CSS, the body selector is often used to set a default font [...]
Working with CSS shorthand for boxes
This is something that is useful to get to grips with, in order to create the most efficient and easy-to-update CSS.
The previous example showed how to set all margins and padding values to 0, and this was done in shorthand instead of writing out every single value. How CSS shorthand works for boxes is like [...]