Basic Css Properties

Text Properties
Here is a small sample of things you can change with text.
Font Family
The font-family property allows us to change the particular font we are using. You may
select any font which is installed on the clients computer with this property. Some of the
more commonly used fonts include:
•Times New Roman
•Arial
•Verdana
It is possible to specify and include non standard fonts but this is a little more complex.
We'll look at this later.
style.css
1. h1 {
2. font-family: Times New Roman;
3. }
4. p {
5. font-family: Verdana;
6. }
Hobbies
On the weekend I got all my watches and attached them together into a belt.
It turned out to be a waist of time.
Font Size
Font-size may be specified using a few different types but the easiest to work with is
pixels (px).
h1{
font-family:Times New Roman;
}
p{font-family:Verdana;
1. }
Apply this change in style.css and see the change.
This is our html code
<!doctype html>
<html>
<head>
<title>Hobbies</title>
<meta name="description" content="Let's demonstrate some CSS">
<meta name="keywords" content="html tutorial css linked">
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>Hobbies</h1>
<p>On the weekend I got all my watches and attached them together into a belt.</p>
<p>It turned out to be a waist of time.</p>
</body>
</html>
Hobbies
On the weekend I got all my watches and attached them together into a belt.
It turned out to be a waist of time.
Font Weight
The font-weight css property allows us to specify how thick the lines of the characters
are. It may be one of the following values:
•lighter
•normal
•bold
•bolder
Some font families only have normal and bold weights. In this case if you specify lighter it
will default back to normal and if you specify bolder it will default back to bold.
Put this code in style.css and see the change.
h1{
font-weight:normal;
}
p{
font-weight:bold;
}
Colour Properties
Colour is a reasonably complex thing to define. There are several ways in which we can do
this. We will look at colour in much more detail in a later section. Here we will just work
with it in it's simplest form which is with Hexadecimal numbers. A colour is specified by a
hash ( # ) followed by 6 hexadeximal numbers. The first 2 are the amount of red, the
second 2 the amount of green and the final 2 the amount of blue.
Note also that in CSS we use the American spelling for colour so we drop the u, eg color. If
you happen to be American then this won't be a problem but for others it is something to
keep in mind.
Colour
The color property allows us to specify the colour of the text.
h1{
color:#9ACA42;
}
p{
color:#357180;
}
Background Colour
The background-color property allows us to specify the background colour for the
element.
h1{
background-color:#9ACA42;
}
p{
background-color:#A0D2DC;
}
Pseudo classes:
A Pseudo class in CSS is used to define the special state of an element. It

can be combined with a CSS selector to add an effect to existing elements
based on their states. For Example, changing the style of an element when
the user hovers over it, or when a link is visited. All of these can be done
using Pseudo Classes in CSS.
Note that pseudo-class names are not case-sensitive.

Pseudo class selectors are CSS selectors with a colon preceding
them. You are probably very familiar with a few of them. Like
hover:
a:hover {
/* Yep, hover is a pseudo class */

}
They are immensely useful in a variety of situations. Some of them

are CSS3, some CSS2… it depends on each particular one. Outside
of IE, they have great browser support. In IE land, even IE8,
support is pretty barren. However, the IE9 preview has full support
of them.
Link-related pseudo class selectors
:link – Perhaps the most confusion-causing link-related pseudo

selector. Aren’t all <a> links? Well not if they don’t have an href
attribute. This selects only those that do, thus is essentially the
same as a[href]. This selector will become a lot more useful should
any-element linking become reality.
:visited – Selects links that have already been visited by the
current browser.
:hover – When the mouse cursor rolls over a link, that link is in it’s
hover state and this will select it.
:active – Selects the link while it is being activated (being clicked
on or otherwise activated). For example, for the “pressed” state of
a button-style link or to make all links feel more button-like.
Input & link related pseudo class selectors

:focus – Defining hover styles for links is great, but it doesn’t help
out those who used keyboard navigation to get to the link. :focus
will select links that are the current focus of the keyboard. This is
not limited to links, but can be used (and really should be used) on
inputs and textareas as well. Some would tell you to define
a :focus style for anything that has a :hover style.
:target – The target pseudo class is used in conjunction with IDs,
and match when the hash tag in the current URL matches that ID.
So if you are at URL www.yoursite.com/#home then the selector
#home:target will match. That can be extremely powerful. For
example, you can create a tabbed area where the tabs link to hash
tags and then the panels “activate” by matching :target selectors
and (for example) using z-index to move to the top.
:enabled – Selects inputs that are in the default state of enabled
and ready to be used.
:disabled – Selects inputs that have the disabled attribute. A lot of
browsers will make the input a faded out gray, you can control that
with this selector.
:checked – Selects checkboxes that are, wait for it, checked.

:indeterminate – Selects radio buttons that are in the purgatory
state of neither chosen or unchosen (like when a page loads with
radio button choices but no default is set).
:required – Selects inputs with the required attribute.

:optional – Selects inputs that do not have the required attribute.
:read-only / :read-write – Selects elements based on a combination
of readonly and disabled attriutes.
Explanation
The :link selector is a pseudo-class that targets all unvisited anchor

(<a>) elements on a page.
a:link {
color: aquamarine;
The example above will change the color of all unvisited links to
aquamarine.
When used in combination with the :hover pseudo-class, :link must
appear first, or else not be defined at all, in order for the :hover
styles to work. This is because they are equally specific, so if :link
came after, those styles would override the hover styles.
The :link pseudo-class will target all <a> elements that have an
href attribute, even if the href has an empty value. So, in that
sense, it is like the attribute selector [href].
This means the following three HTML elements are all able to be
styled via the :link pseudo-class:
<a href="https://css-tricks.com">CSS-Tricks</a>
<a>CSS-Tricks</a>
<a href>CSS-Tricks</a></code>
The third example in the above code block, however, would be

invalid HTML.
There are only three HTML elements that accept the href attribute:
<a>, <link>, and <area>. Only the <a> element can be styled via
the :link pseudo-class. Also, you cannot add the href attribute to
another type of element and make it style-able via :link. In other
words, if you had the following HTML:
<div>CSS-Tricks</div>
The following CSS would have no effect:

div:link {
color: aquamarine;
Again, the HTML would fail validation, since href is not a valid
attribute for <div>.
Due to the fact that :link can target only <a> elements, :link styles
can be defined in the CSS without the element type selector, like
this:
:link {
color: aquamarine;
Also, for all practical purposes when using HTML, the :link pseudo-
class is somewhat irrelevant since the same effect can be
achieved by simply targeting all <a> elements directly:
a{
color: aquamarine;
.
The:visited pseudo-class selector can change some of the styling
on an anchor link (<a>) element if the user’s browser has already
visited the link. It’s meant to help users distinguish the difference
between links they have and haven’t visited.
a:visited {
color: gray;
The :hover pseudo class in CSS selects elements when the mouse
cursor is current over them. It’s commonly associated with link
(<a>) elements.
a:hover {
color: green;
text-decoration: underline overline;
}
So when a link like this is “hovered” (like with a cursor on a device
with a mouse):
<a href="https://google.com">Go to Google</a>
It will turn green and have a line beneath and above it.
In IE 6 and below, :hover used to only work on links, but in newer
browsers, it works on any element. This can be particularly useful
for things like dropdown menus in which you can wait for the :hover
of a parent list item and then reveal the next level of the nested
menu. Careful though, hover effects should be coupled with some
kind of action, as that has been a long-established web pattern.
The :active pseudo selector changes the appearance of a link while

it is being activated (being clicked on or otherwise activated). It’s
usually only seen for a split second, and provides visual feedback
that the element was indeed clicked. It’s most typically used on
anchor links (<a href="#"></a>).
For instance, here’s CSS that will make anchor links bump down
one pixel (giving the impression of being pushed in three-
dimensional space) in the active state:
:active can also apply to any element. In the Pen below, clicking
anywhere on the page will make the whole page yellow:
It is best practice to cover all of the “states”, particularly for links.

An easy way to do that is “LOVE HATE” or
•L :link
•O
•V :visited
•E
•H :hover
•A :active
•T
•E
Doing them in that order is ideal.
a:link { /* Essentially means a[href], or that the link actually goes somewhere
*/
color: blue;
a:visited {
color: purple;
a:hover {
color: green;
a:active {
color: red;
Otherwise, say if you listed the :visited style last, if that link was
visited it would override the :active and :hover declaration and the
link would always be purple regardless if you were hovering or if
the link was active (not ideal).
The :focus pseudo class in CSS is used for styling an element that is
currently targeted by the keyboard, or activated by the mouse.
Here is an example:
textarea:focus {
background: pink;
Any element (most commonly <input>s and <textarea>s) are in

“focus” when they are selected and ready to enter text (like when
a cursor is blinking). Mouse users can click them (or their related
label) to focus, and keyboard users can TAB into them.
IN this tutorial we learned how we can use pseudo classes for

stying and for other things. Similar to the examples above we can
apply pseudo classes to the remaining properties.

Basic Css Properties

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Basic Css Properties

Uploaded by

Copyright:

Available Formats

Text Properties

Here is a small sample of things you can change with text.

•Times New Roman

2. font-family: Times New Roman;

It turned out to be a waist of time.

Apply this change in style.css and see the change.

This is our html code

It turned out to be a waist of time.

A Pseudo class in CSS is used to define the special state of an element. It

Note that pseudo-class names are not case-sensitive.

/* Yep, hover is a pseudo class */

They are immensely useful in a variety of situations. Some of them

Link-related pseudo class selectors

:link – Perhaps the most confusion-causing link-related pseudo

Input & link related pseudo class selectors

:checked – Selects checkboxes that are, wait for it, checked.

:required – Selects inputs with the required attribute.

The :link selector is a pseudo-class that targets all unvisited anchor

The third example in the above code block, however, would be

The following CSS would have no effect:

text-decoration: underline overline;

The :active pseudo selector changes the appearance of a link while

It is best practice to cover all of the “states”, particularly for links.

Any element (most commonly <input>s and <textarea>s) are in

IN this tutorial we learned how we can use pseudo classes for

You might also like