A Guide To CSS

Hi! I Just Thought I’d Put Together A Basic CSS Guide. Feel Free To Send Feedback!

INLINE/COLOR

<p style="color: red">text</p>

This will make that specific paragraph red.  You can change the color by changing "red" to any color you choose.


INTERNAL

<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>

    p {
        color: red;
    }

    a {
        color: blue;
    }

</style>
...

This will make all of the paragraphs in the page red and all of the links blue. You can also change the links and/or paragraphs color to any color you choose.

EXTERNAL

p {
    color: red;
}

a {
    color: blue;
}

If this file is saved as “style.css” in the same directory as your HTML page then it can be linked to in the HTML like this:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Example</title>
    <link rel="stylesheet" href="style.css">
...

Moving On:
Whereas HTML has tags , CSS has selectors . Selectors are the names given to styles in internal and external style sheets. In this CSS Beginner Tutorial we will be concentrating on HTML selectors , which are simply the names of HTML tags and are used to change the style of a specific type of element.

A value is given to the property following a colon (NOT an “equals” sign). Semi-colons are used to separate the properties.

body {
    font-size: 14px;
    color: navy;
}

This will apply the given values to the font-size and color properties to the body selector.

Lengths & Percentages

There are many property-specific units for values used in CSS, but there are some general units that are used by a number of properties and it is worth familiarizing yourself with these before continuing.

  • px (such as font-size: 12px ) is the unit for pixels.
  • em (such as font-size: 2em ) is the unit for the calculated size of a font. So “2em”, for example, is two times the current font size.
  • pt (such as font-size: 12pt ) is the unit for points, for measurements typically in printed media.
  • % (such as width: 80% ) is the unit for… wait for it… percentages.

Other units include pc (picas), cm (centimeters), mm (millimeters) and in (inches).

When a value is zero , you do not need to state a unit. For example, if you wanted to specify no border, it would be border: 0 .
“px” in this case, doesn’t actually necessarily mean pixels - the little squares that make up a computer’s display - all of the time. Modern browsers allow users to zoom in and out of a page so that, even if you specify font-size: 12px , or height: 200px , for example, although these will be the genuine specified size on a non-zoomed browser, they will still increase and decrease in size with the user’s preference. It’s a good thing. Trust me.

Colors

CSS brings 16,777,216 colors to your disposal. They can take the form of a name , an RGB (red/green/blue) value or a hex code.

The following values, to specify full-on as red-as-red-can-be, all produce the same result:

  • red
  • rgb(255,0,0)
  • rgb(100%,0%,0%)
  • #ff0000
  • #f00

Predefined color names include aqua , black , blue , fuchsia , gray , green , lime , maroon , navy , olive , purple , red , silver , teal , white , and yellow . transparent is also a valid value.

With the possible exception of black and white , color names have limited use in a modern, well-designed web sites because they are so specific and limiting.

The three values in the RGB value are from 0 to 255, 0 being the lowest level (no red, for example), 255 being the highest level (full red, for example). These values can also be a percentage.

Hexadecimal (previously and more accurately known as “ sexadecimal ”) is a base-16 number system. We are generally used to the decimal number system ( base-10 , from 0 to 9), but hexadecimal has 16 digits, from 0 to f.

The hex number is prefixed with a hash character ( # ) and can be three or six digits in length. Basically, the three-digit version is a compressed version of the six-digit ( #ff0000 becomes #f00 , #cc9966 becomes #c96 , etc.). The three-digit version is easier to decipher (the first digit, like the first value in RGB, is red, the second green and the third blue) but the six-digit version gives you more control over the exact color.

COLOR & BACKGROUND COLOR
Colors can be applied by using color and background-color (note that this must be the American English “color” and not “colour”).

A blue background and yellow text could look like this:

h1 {
    color: yellow;
    background-color: blue;
}

These colors might be a little too harsh, so you could change the code of your CSS file for slightly different shades:

body {
    font-size: 14px;
    color: navy;
}

h1 {
    color: #ffc;
    background-color: #009;
}

Save the CSS file and refresh your browser. You will see the colors of the first heading (the h1 element) have changed to yellow and blue.

You can apply the color and background-color properties to most HTML elements, including body , which will change the colors of the page and everything in it.

That Is It For Now! I Hope This Post Was Helpful!

ALL INFORMATION ON THIS POST IS PROPERTY OF HTML DOG
https://www.htmldog.com/
THIS INFORMATION WAS COPIED AND PASTED WITH MINOR AJDUSTMENTS

Did You Find This Guide Helpful?

1 Like

[quote=“Boss-killer454, post:1, topic:77677”]
<p style=“color: red”>text</p>
[/quote] you put the message in where the text is but only delete text or else code won’t work

What are you talking about @aj440000?

2 Likes