INTRODUCTION
In CSS, an outline is the line that surrounds the elements outside of the border, to make the element stand out in a webpage. The font family, boldness, size, and style of a text are determined by the CSS font property. You can use the CSS list properties to; set different list item markers (bullet) for ordered and unordered lists, add background colors to lists etc.
CSS OUTLINE
The outline properties in CSS include;
📌outline
📌outline-style
📌outline-color
📌outline-offset
📌outline-width
Outlines are totally different from borders. The outline is outside the element’s border and not part of the element’s dimensions. The total width and height of the element wouldn’t be affected by the given width of the outline.
CSS TEXTS & FONTS
In CSS I learnt there are different properties used to style and format text. These include;
📌The text-align property: Makes your text left/right aligned, centered, or justified.
📌The text-decoration is a property in CSS that is used to remove ‘decorations’ from texts. For example links in the webpage. When you include a link in your webpage, automatically the link is underlined. Adding this value;
a {
text-decoration: none;
}
Would remove the underlines from all the links without classes or ID’s in your webpage. The other values in the text-decoration include the overline, line-through, underline.
There is also a text property known as the text-transform. It is used to specify whether should be uppercase, lowercase or capitalize every word in the text. There are different properties available to style your text in CSS; text-indent, letter-spacing, line-height, directionetc. Most of these properties are easy to understand and use because their names define their purpose.
There is also font properties in CSS. These properties define the font family, the size, boldness etc. of a text. There are two types of font family names;
Generic family (Serif, Sans-serif, Monospace) and font family (Times New Roman, comic sans, Arial etc.). The easiest way to know the difference between them is, Serif fonts have small lines at the ends on their characters (You’d see a lines at the bottom of a capital F or M) and the sans-seriffonts have none of these lines. The monospace characters have the same width. It’s always advisable to use sans-serif fonts.
The font-family property should hold several font names as a "fallback" system. Which means it is advisable to include more than one font in case the browser does not support the first or previous font, it would try the next font till it finds one that it supports. Start with the font you want and end with a generic family, if no other fonts are available. Also, more than one font-family is specified in a comma separated list.
p {
font-family: monospace, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
To make the texts on your webpage follow the browser window, always set the text size with a viewport width(vw).
CSS LISTS/LINKS
The list-style-type property indicates the type of list bullet/ item marker (I always say bullets because the ‘item marker confuses me sometimes’). The type of list bullet can be a circle, square or be in numbers or alphabets whichever one you’d prefer.
An image can also be used as a bullet in CSS by using the list-style-image property.
Links in CSS are styled differently depending on the state they are in. There are four different types of link states;
📌a:link
📌a:visited
📌a:hover
📌a:active
They have an order in which they should be styled whether in a CSS external/internal style sheet: a:hover comes after a:linkand a:visited & a:active comes after a:hover.
CONCLUSION
I am actually getting a hold of this! I guess consistency pays sometimes 😊. Compared to the first day, I didn't understand most of the concepts. I am loving CSS so far since its making my website look quite pretty with its design properties. I hope you liked my blog post on my progress today. Thanks for reading!
Top comments (0)