You should already have an HTML file like the one made at the end of the HTML Beginner Tutorial, with a line that we added at the start of this CSS Beginner Tutorial, linking the HTML file to the CSS file.
The code below covers all of the CSS methods in this section. If you save this as your CSS file ...
Borders can be applied to most HTML elements within the body.
To make a border around an element, all you need is border-style. The values can be solid, dotted, dashed, double, groove, ridge, inset and outset.
border-width sets the width of the border, which is usually in pixels. There are also properties for border-top-width, border-right-width, border-bottom-width and border-left-width.
Finally, border-color sets the colour.
Add ...
margin and padding are the two most commonly used properties for spacing-out elements. A margin is the space outside of the element, whereas padding is the space inside the element.
Change the CSS code for h2 to the following:
h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 1em;
padding: 3em;
}
You will see that this leaves one-character width space around the secondary header and ...
You can alter the size and shape of the text on a web page with a range of properties, outlined below:
font-family:
This is the font itself, such as Times New Roman, Arial, or Verdana.
The font you specify must be on the user's computer, so there is little point in using obscure fonts. There are a select few 'safe' fonts (the most ...
CSS brings 16,777,216 colours to your disposal. They can take the form of a name, an rgb (red/green/blue) value or a hex code.
red
Is the same as
rgb(255,0,0)
Which is the same as
rgb(100%,0%,0%)
Which is the same as
#ff0000
Which is the same as
#f00
There are 17 valid predefined colour names. They are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, ...
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 tag.
For each selector there are 'properties' inside curly brackets, which ...
There are three ways to apply CSS to HTML.
In-line:
In-line styles are plonked straight into the HTML tags using the style attribute.
They look something like this:
<p style="color: red">text</p>
This will make that specific paragraph red.
But, if you remember, the best-practice approach is that the HTML should be a stand-alone, presentation free document, and so in-line styles should be avoided wherever possible.
Internal:
Embedded, or ...
Like the HTML Beginner Tutorial, the CSS Beginner Tutorial assumes that you know as much about CSS as you do about the cumulative effects of sea squirt discharge on the brain chemistry of Germanic ammonites. The purpose of this guide is to teach the bare essentials - just enough to get started. The CSS Intermediate Tutorial and CSS Advanced Tutorial ...
Source & Code