Get to Know Cascading Style Sheets With

BURST · 03-12-2018, 12:51 AM

[Image: GettyImages-182798262-57dc02755f9b58651672354f.jpg]

CSS and the Character Set

First things first, set the character set of your CSS documents toutf-8. While it is likely that most of the pages you design are written in English, some may be localizedadapted for different linguistic and cultural context. When they are,utf-8 simplifies the process. Setting the character set in theexternal style sheetwon't take precedence over anHTTPheader, but in all other situations, it will.

It's easy to set the character set. For the first line of the CSS document write:

@charset "utf-8";

This way, if you use international characters in the content property or as class and ID names, the style sheet will still work correctly.

Styling the Page Body

The nextthing a default style sheet needsare styles to zero out margins, padding, and borders. This makes sure that all browsers place the content in the same place, and there aren't any hidden spaces between the browser and the content. For most web pages, this is too close to the edge for text, but it's important to start there so that background images and layout divisions are lined up correctly.

html, body {

margin: 0px;

padding: 0px;

border: 0px;

}

Set the default foreground or font color to black and the default background color to white. While this will most likely change for most webpage designs, having these standard colors set on the body andHTML tagat first makes the page easier to read and work with.

html, body {

color: #000;

background: #fff;

}

Default Font Styles

The font size and font family are something that will inevitably change once the design takes hold butstart with a default font size of 1emand a default font family of Arial, Geneva, or some other sans-serif font. The use of ems keep the page as accessible as possible, and a sans-serif font is more legible on the screen.

html, body, p, th, td, li, dd, dt {

font: 1em Arial, Helvetica, sans-serif;

}

There may be other places where you might find text, butp,th,td,li,dd, anddtare a good start for defining the base font. IncludeHTMLandbodyjust in case, but many browsersoverride the font choices if you only define your fonts forthe HTML or body.

Headlines

HTML headings are important to use to help your site outline and let search engines get deeper into your site. Without styles, they are all fairly ugly, so set default styles on all of them and define the font family and the font sizes for each.

h1, h2, h3, h4, h5, h6 {

font-family: Arial, Helvetica, sans-serif;

}

h1 { font-size: 2em; }

h2 { font-size: 1.5em; }

h3 { font-size: 1.2em ; }

h4 { font-size: 1.0em; }

h5 { font-size: 0.9em; }

h6 { font-size: 0.8em; }

Don't Forget the Links

Styling the link colors is almost always a critical part of the design, butif you don't define them in the default styles, chances are you'll forget at least one of the pseudo-classes. Define them with some small variation on blue and then change them once you have the color palette for the site defined.

To set thelinksin shades of blue, set:

linksasblue
visited linksasdark blue
hover linksas light blue
active linksas even paler blue

as shown in this example:

a:link { color: #00f; }

a:visited { color: #009; }

a:hover { color: #06f; }

a:active { color: #0cf; }

By styling the links with a fairly innocuous color scheme, it ensures that you won't forget any of the classes and also makes them a little less loud than the default blue, red, and purple.

Full Style Sheet

Here is the full style sheet:

@charset "utf-8";

html, body {

margin: 0px;

padding: 0px;

border: 0px;

color: #000;

background: #fff;

}

html, body, p, th, td, li, dd, dt {

font: 1em Arial, Helvetica, sans-serif;

}

h1, h2, h3, h4, h5, h6 {

font-family: Arial, Helvetica, sans-serif;

}

h1 { font-size: 2em; }

h2 { font-size: 1.5em; }

h3 { font-size: 1.2em ; }

h4 { font-size: 1.0em; }

h5 { font-size: 0.9em; }

h6 { font-size: 0.8em; }

a:link { color: #00f; }

a:visited { color: #009; }

a:hover { color: #06f; }

a:active { color: #0cf; }

coronelSith · 26-07-2019, 10:50 PM

Thank you for your post.
CSS is not really hard, just a matter to practice to become proficient.

Get to Know Cascading Style Sheets With

Submitted by BURST, 03-12-2018, 12:51 AM, Thread ID: 107840

RE: Get to Know Cascading Style Sheets With