August 28, 2023 by admin
HTML/CSS Reference for DMET 155/355
CSS
CSS, or Cascading Styles Sheets, is a way to style and present HTML. Whereas the HTML is the meaning or content, the style sheet is the presentation of that document.
Styles have a format of ‘property: value’ and most properties can be applied to most HTML tags.
Applying CSS
There are three ways to apply CSS to HTML: Inline, internal, and external.
Inline
Inline 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.
External
External styles are used for the whole, multiple-page website. There is a separate CSS file, which will simply look something like:
p {
color: red;
}
a {
color: blue;
}If this file is saved as “style.css” in a folder called “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="css/style.css">
...Apply!
To get the most from this guide, it would be a good idea to try out the code as we go along, so start a fresh new file with your text-editor and save the blank document as “style.css” in the same directory as your HTML file.
Selectors, Properties, and Values
Whereas HTML has tags, CSS has selectors. Selectors are the names given to styles in internal and external style sheets. 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.
For each selector there are “properties” inside curly brackets, which take the form of words such as color, font-weight or background-color.
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.
So basically, when this is applied to an HTML document, text between the body tags (which is the content of the whole window) will be 14 pixels in size and navy in color.
Lengths and Percentages
There are many property-specific units for values used in CSS, but there are some general units that are used by several properties, and it is worth familiarizing yourself with these before continuing.
px(such asfont-size: 12px) is the unit for pixels.em(such asfont-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 asfont-size: 12pt) is the unit for points, for measurements typically in printed media.%(such aswidth: 80%) is the unit for… wait for it… percentages.
Other units include pc (picas), cm (centimeters), mm (millimeters) and in (inches).
You do not need to state a unit when a value is zero. For example, if you wanted to specify no border, it would be border: 0.
“px” in this case, doesn’t 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, 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.
From: https://www.htmldog.com/