CSS provides developers with a sophisticated toolkit to thoroughly craft and present textual content. Join me as we look into CSS typography...
What are the key aspects of CSS typography?
Text Properties:
- color: Sets the colour of the text (make sure it is spelt 'color' and not 'colour')
- text-align: Aligns text to the left, right, centre or justifies it.
- text-decoration: Adds or removes decorations such as underline or overline.
- line-height: Controls the spacing between lines of text.
- letter-spacing: Adjusts the space between characters.
- text-transform: Changes the capitalisation of text.
Text properties define how your text looks and behaves. Here are some examples:
color: blue;
text-align: center;
text-decoration: none;
line-height: 1.6;
letter-spacing: 2px;
text-transform: uppercase;
Font Properties
- font-family: Specifies the typeface or font family for text.
- font-size: Determines the size of the font.
- font-weight: Sets the thickness or boldness of the font.
- font-style: Defines whether the font should be italic or normal.
Font properties in CSS are the design elements that let you customise the appearance of text on your website, giving it that unique style and personality. Here are some examples:
font-family: "Lucida Console", "Courier New", monospace;
font-size: 50px;
font-weight: bold;
font-style: normal;
Margins and Padding:
- margin: Sets the space outside the border of an element.
- padding: Specifies the space between the content and the border element.
These can be applied to your text so it can be positioned correctly. Here are some examples:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Backgrounds and Borders:
- background-color: Sets the background colour behind the text.
- border: Defines the border around the text.
These are used to make it look just that little bit better. Here are some examples:
h1 {
background-color: black;
color: white;
}
Responsive Typography:
- media queries: Adjust typography based on the device or screen size, and this is very important as it makes sure that you site is responsive for all screen sizes.
Here is an example:
body {
background-color: black;
}
@media screen and (max-width: 992px) {
body {
background-color: white;
}
}
@media screen and (max-width: 600px) {
body {
background-color: blue;
}
}
Google Fonts:
- Google Fonts API: Integrates a wide variety of free fonts into web projects.
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
Pseudo-Classes and Pseudo-Elements:
- :hover,:active,:focus: Style text based on user interaction.
- ::before,::after: Add content or styling before or after an element.
Here are some examples:
h1::before {
content: url(smiley.gif);
}
a:hover {
color: #FF00FF;
}
a:active {
color: #0000FF;
}
With these CSS, developers can craft text that's not just easy on the eyes but also adds a touch of visual charm to the entire site.
I hope this short blog has helped.
In the meantime....
keep coding!
Top comments (0)