Select Lesson
Font Styles Quiz
5 min
Make anchor links stand out
5 min
Text decorating —text-decoration:
underline
, overline
, line-through
5 min
Capitalizing
5 min
Pseudo-classes —{:lang
5 min
:link
5 min
:visited
5 min
:hover
, :focus
5 min
:active
5 min
Google Style Guide for CSS
5 min
Lesson 14. Add style to anchor tags
15 min
Lesson 15. CSS Google style guide
15 min
Anchor Styles Quiz
5 min
Anchor Styles HTML/CSS
Level OneFont Styles Quiz
5 min
Make anchor links stand out
5 min
Text decorating —text-decoration:
underline
, overline
, line-through
5 min
Capitalizing
5 min
Pseudo-classes —{:lang
5 min
:link
5 min
:visited
5 min
:hover
, :focus
5 min
:active
5 min
Google Style Guide for CSS
5 min
Lesson 14. Add style to anchor tags
15 min
Lesson 15. CSS Google style guide
15 min
Anchor Styles Quiz
5 min
60 min
Anchor styles and Decorating Text
Before this lesson try CSS Introduction and Fonts
Code Avengers Quiz
Font Styles Quiz
Concepts
Make anchor links stand out
Without hyperlinks we wouldn't have the web.
The ability to jump from one page to another page stored on a computer on the other side of the the world in just one click is what makes the web so useful.
When creating links
consider how to make them stand out from other text so that users can easily navigate through your site.
CSS is able to handle some basic UI interactions on our sites. We can use these interactions to style our links
.
User Interface (UI)
How a user connects with a computer. Your keyboard, screen and mouse are all UI interactions. Questions you should ask are: How does the user see and use our site? What happens on mouse clicks? Do we have pop ups/ tool tips? Are there keyboard shortcuts? Is the nav bar in the same place?
These questions are part of a field called HCI Human — Computer Interactions
In CSS we can control a couple of these for interactions (clickable, moveable action stuff).
Concepts
Text decorating —text-decoration:
underline
, overline
, line-through
CSS has a text-decoration
property which allows us to make various visual changes to our text.
Concepts
Capitalizing
Capitalizing text is usually as easy as hitting that CAPS LOCK key. But what if later you want to make all your headings capitalized or lower cased? There is a faster way to do this than going through and changing every heading and it is done with CSS.
Concepts
Pseudo-classes —{:lang
These look like this
:hover
and are called
pseudo‑classes
.
You simply attach them to a selector and it will affect that selector only at certain times.
a:hover{ color:red;}
will only turn the text in anchor elements red when the mouse hovers over an anchor element.
Pseudo-classes can be added to a range of elements, but you are most likely to use them with the anchor element to style your links.
Making your links stand out from normal text is a good idea to increase the usability of your website.
You can also change how a link looks if it has been visited or unvisited or style an element when it gets
focus
There are a few different pseudo-classes but the five most common ones need to be in a certain order in CSS to not be over-ridden:
Link, Visited, Hover (and Focus), Active.
Remember the acronym L, V, H, A, or the mnemonic LoVe, HAte.
:active | Adds a style to an element that is activated |
:focus | Adds a style to an element that has keyboard input focus |
:hover | Adds a style to an element when you mouse over it |
:lang | Adds a style to an element with a specific lang attribute |
:link | Adds a style to an unvisited link |
:visited | Adds a style to a visited link |
To see a list of all the pseudo-classes and pseudo-elements got to this WC3 schools link →
Concepts
:link
:link
will will select any link which has not yet been visited.
Note: You can use the anchor tag without using an href attribute, whether you should is debated because an anchor tag should really point to a resource.
regardless, it is the href=""
part of an anchor element that makes it a link.
Concepts
:visited
a:visited
used to style a link after they have been visited. The browser remembers you went to the site before and changes color (or whatever the CSS is that you add).
The anchor tag needs the href attribute for
:visited
to work.
Concepts
:hover
, :focus
a:hover{}
is a
pseudo‑class
used to style links when the user hovers over them with the mouse.
If you want your website to be accessible to people who don't use a mouse, and you should, then add :focus
with your :hover
.
When you hit TAB on your keyboard, on most websites, it will give focus to different interactive elements, (it cycles through them). Clicking your mouse gives focus to a specific element.
Focus
needs an href to work on a link.
Example:
Extra for experts: Hover with text-transform
Concepts
:active
a:active
is used to style a link, while you are clicking it.
This code makes link green when someone is in the act of clicking the link
Concepts
Google Style Guide for CSS
It would BE QUITE ANNOYING To Read A Book ThAt UsEs a LoT of different styles
This is also true for website code.
The Google Style Guide → defines formatting and style rules for HTML and CSS. It's purpose is to help improve the following:
- Collaboration: Most big web sites have more than one person working behind the scenes. Using Google style guide in your code can make it easier for all those working in collaboration to read and understand.
- Code quality: By using the Google style guide, it increases the quality of your code. It helps with consistency and efficiency. There is no need to write more code than is necessary.
- Infrastructure: Improve the basic physical and organizational structure of the code so its easier to read and maintain.
When importing Google fonts — single and double quotes
Font names that include spaces can be surrounded by either " "
or ' '
. The Google style guide recommends single quotes (' '
).
Example: open sans
<!--Not recommended-->
@import url("//www.google.com/css/maia.css");
html {
font-family: "open sans", arial, sans-serif;
}
<!-- Recommended -->
@import url(//www.google.com/css/maia.css);
html {
font-family: 'open sans' , arial, sans-serif;
}
Declaration stop —;
There must be a semicolon;
after at the end of every CSS declaration, even if you only have one.
<style>
p{
background-color:blue;
border:4px solid purple;
color:red;
}
</style>
Why?
Firstly, it makes the code look nice.
Secondly, it prevents errors when you add properties in the future.
If you add a property after the last property, but forget to add a ;
the CSS code will not work correctly.
Declaration order
Alphabetize declarations.
Put declarations in alphabetical order so you have consistent code in a way that is easy to remember and maintain.
Example:
background: fuchsia;
border: 1px solid;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;
Shorthand properties
The Google style guide says to use shorthand properties to set the value of several related CSS properties in a single line. For example, the font-family, font-size and font-weight properties can be set using the font shorthand property.
Using shorthand properties is useful for code efficiency and understandability.
Example:
<style>/* Not recommended */
p{
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;}
/* Recommended */
p{
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;}
</style>
HTML/CSS 1 Lesson
Lesson 14. Add style to anchor tags
HTML/CSS 1 Lesson
Lesson 15. CSS Google style guide
Code Avengers Quiz
Anchor Styles Quiz
Resources
Guide
- download
- new file
- upload media
- rename
- delete
Run Ctrl+Enter
Check Ctrl+Shift+Enter
Reset Ctrl+Backspace
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Find Ctrl+F
Find & replace Ctrl+F+F