CSS Styling Elements
Color
Color is one of the most important ingredients in a design.
The CSS property used to apply color to a text is color .
The most common colors have names.
Color models allows you to use colors without names.
A color model is a way of representing and recreating real colors using codes. RGB is one of the most used color models.
The RGB model creates colors by combining different amounts ( intensities ) of red, green and blue; each ranging from 0 to 255.
By adjusting the levels of red, green and blue, almost any color can be produced.
RGB values are enclosed in parentheses and separated by commas.
Colors in RGB model can also be represented as HEX codes.
HEX codes are shorter.
button {
font-size: large;
color: #FFFFFF; /*rgb(255,255,255)*/
background-color: #FF9595; /*rgb(255, 149, 149)*/
}
HEX codes start with a hash # symbol followed by three pairs of characters, each representing the intensity of red, green and blue accordingly.
Each character in a HEX code can have one of 16 possible values, spanning from 0 to 9 and extending to the letters A to F.
Each pair ranges from 00 (least intense) to FF (most intense).
FF is equivalent to 255.
Display devices like your phone screen are made up of tiny picture elements known as pixels.
Each pixel can emit a combination of red, green and blue light to produce any color in the RGB model.
Dimensions
Controlling the sizes of elements, enables us to make pages that looks nice and balanced.
A display like the screen of a phone is made of picture elements or pixels.
Pixels are used as a measuring unit to control the dimensions of elements.
When you hear screen resolutions like 4K, this means a display width of approximately 4,000 pixels.
You can use pixels to control the size of elements. The font-size property controls text size.
In most web browsers, the default size for texts in paragraphs, buttons, lists and tables is 16px.
You can use values like small medium or large for text size. They already have set pixel units.
Small: 13px
Medium: 16px
Large: 18px
Modern websites are built to look great on screens of different sizes and resolutions.
This approach is known as responsive web design.
Using pixels as a measurement unit is not a best practice when it comes to responsive web design.
Screens of different sizes and resolutions have different number of pixels and pixels are fixed-sized units.
To ensure the design of your page looks great on any screen, percentages (%) are used to set relative dimensions.
This ensures consistent design across different screen sizes.
When styling elements using percentages, 100% would be the full size of it's parent element.
All the elements of a web page that are seen in the browser are nested inside the <body>.
By default, the width of the body of a page matches the width of the device screen. This is very helpful to design responsive sites.
You can also use percentages to set the font size. Font sizes will be calculated using the parent's font size as reference.
If the parent's size is set to 20px, a child with font-size of 50% will display the text of 10px.
Styling Texts
Text styling is another important element of web design.
Let's start with...
Text alignment
text-align: center; right; left;
text-align: justify; to align text to both the right and left edges by adjusting the spacing between words, ensuring that each line has equal widths.
Text justification is often seen in books, magazines and newspapers, as it gives neat edges to the columns of text.
text-decoration to convey meaning or draw attention to specific pieces of text, like links.
text-decoration: underline; overline ; line-through ; underline overline;
Some CSS properties can take multiple values. You can control the color of the decoration by adding a color name, RGB or hex code after the decoration type.
.article-title {
text-decoration: underline #FF4500;
font-size: 24px;
}
Text decoration can take various styles such as dotted, double, dashed and wavy.
p {
font-size: 18px;
}
.double {
text-decoration: double underline #E67112;
}
.dotted {
text-decoration: underline dotted #2A9D8F;
}
.dashed {
text-decoration: dashed underline #E76F51;
}
.wavy {
text-decoration: wavy underline #62767E;
}
The text- decoration property is a short and easy way to refer to different sub-properties such as text-decoration-line, text-decoration-color and text-decoration-style.
text-transform property allows you to control the capitalization of text content.
It can take 3 values: capitalize, uppercase and lowercase.
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
body{
background-color: #000A23;
color: white;
}
This Is A Sentence With Capitalize Transformation.
THIS IS A SENTENCE WITH UPPERCASE TRANSFORMATION.
this is a sentence with lowercase transformation.
text-shadow creates a depth effect , gives emphasis or just adds a stylish touch to your typography.
It takes two required values in the given order: horizontal offset first, vertical offset second.
h1 {
text-shadow: 8px 6px;
}
text-shadow can accept two additional optional values.
blur radius: the amount of blur applied to the shadow
color: the color of the shadow
body {
background-color: #1a1a1a;
}
h1 {
color: #FFFFFF; /* white colored text */
text-shadow: 4px 4px 4px #4296CE;
font-size: 4rem;
}
Make sure to keep the correct order for the text-shadow property.
Font Styles
Fonts play a crucial role in web design, influencing readability, aesthetics, and user experience. They breath life into the words on a page and set the tone of the content.
The font-family in CSS lets you justify the typeface for your text. This determine how text looks on a webpage.
body {
background-color: #000A23;
font-size: 24px;
color: #ffffff;
}
#font-georgia {
font-family: Georgia;
}
#font-arial {
font-family: Arial;
}
#font-courier {
font-family: "Courier New";
}
#font-comic {
font-family: "Comic Sans MS";
}
Many fonts are installed by default in all devices. These are known as websafe fonts.
Other fonts might need to be installed on the users device, so you'll need to specify a web safe font as a backup, in case the user doesn't have them.
The font-family property specify a list of fonts, from highest priority to lowest. Font selection stops at the first font in the list that is on the user's system.
font-family values should be separated by commas.
Generic font families are groups of fonts with similar typefaces, and they are used as universal fallbacks. It's a best practice to place them as the last option in a font-family property.
If the preferred fonts are unavailable, browsers will use a font from that family.
.serif-font {
/*Fonts have decorative
strokes or serifs.*/
font-family: serif;
}
.sans-serif-font {
/*Fonts lack decorative strokes*/
font-family: sans-serif;
}
.monospace-font {
/*Fonts have equal character spacing*/
font-family: monospace;
}
.cursive-font {
/*Fonts mimic handwriting for
a personal or artistic touch.*/
font-family: cursive;
}
.fantasy-font {
/*Decorative or unique fonts
not fitting other categories*/
font-family: fantasy;
}
body {
background-color: #0C1527;
color: #FFFFFF;
}
Use quotes to wrap font names with multiple words. It's good practice.
The font-weight property controls the thickness (or boldness) of the text.
You can use numerical values from 100 (thinnest) to 900 (thickest) to specify font weights, increasing in increments of 100.
p {
font-family: Arial, sans-serif;
font-size: 1.5em;
}
#light {
font-weight: 100;
}
#normal {
font-weight: 400;
}
#bold {
font-weight: 700;
}
#bolder {
font-weight: 900;
}
Certain weight values such as 400 and 700, have named equivalent that can be used directly as values: normal and bold.
Styling Links
Links are the essence of the web, connecting one page to another. They're crucial for navigation, but the default blue underline style doesn't always fit every design.
The HTML tag for links is <a>
You can override the default link style with CSS to customize colors, fonts and decorators.
a {
color: #52C80C;
font-family: 'Georgia', serif;
background-color: #D6E5E3;
}
You can control the style of the links that haven't been visited by the user yet.
When a user interact with a link (also other elements) it changes it's state. You can refer to the status of an element with pseudo selectors.
/* defines the style
unvisited links */
a:link {
color: #D11BCE;
text-decoration: none;
}
/* a link is hovered when
the mouse is over it */
a:hover {
color: #6897EE;
background-color: #000000;
}
/* click on the link but hasn't
released the mouse button yet */
a:active{
color: #B8860B;
background-color: #000000;
}
You can add pseudo selectors to an elements IDs and classes.
By default, all links are underlined. You can remove the underline style by setting the text-decoration property to none.
You can use any other decoration options.
Styling Tables
Tables are a powerful tool for presenting data in a structured and organized manner, but they can be quite plain by default and may not match the overall design of your website.
table: <table>
table row: <tr>
data cell: <td>
header cell: <th>
The look of an HTML table can be greatly improved with the border property.
border is a short and simple way to refer to 3 different sub-properties.
border-width: 1px;
border-style: solid;
border-color: red;
To add a border around the table, apply the border property to <table>.
To add borders to all cells, apply the border property to the <th> and <td>.
body {
font-family: Arial, sans-serif;
background-color: #F7F8FC;
}
/* Applying the border around the table */
#table1 {
border: 2px solid #0C1527;
}
/* Applying borders to each cell */
#table2 th,
#table2 td {
border: 2px solid #0C1527;
}
td {
text-align: left;
}
th{
text-align: left;
background-color: #149EF2;
}
By default, tables are styled without borders.
The only required border sub-property is border-style.
You can use the border-width sub-property to define the thickness of the border.
It can take pixels and percentages or named values like medium.
Table cells have spacing between them by default, making double borders appear.
To remove this space, you can give table elements the border-collapse property.
body {
font-family: Arial, sans-serif;
background-color: #F3F4F6;
color: #333;
}
table {
border-collapse: collapse;
}
th, td {
border: 2px solid #909092;
}
th {
background-color: #4A90E2;
color: white;
}
The default value of the border-collapse property is separate.
A table can have multiple rows as children.
Pseudo selectors can also be used to target elements based on their order or position.
The :nth-child(n) pseudo selector targets child elements based on their order
The :nth-child(n) pseudo selector gives you more control to style the elements in a table.
tr:nth-child(3){
background-color: #FFA310;
}
You can also use the :nth-child(n) pseudo selector to target odd and even rows.
/* light gray for odd rows */
tr:nth-child(odd) {
background-color: #E9E9E9;
}
/* white for even rows */
tr:nth-child(even) {
background-color: #FFF
FFF;
}
Styling Lists
Styling lists improves visual appeal, user experience, and accessibility.
By default, an ordered list items are marked with round bullets.
The list-style property require 3 values. It's a short and simple way to refer to 3 different sub-properties: type, position and image.
type: disc, none, square, circle
The list-style-type sub-property modifies the marker for both unordered and ordered lists.
.trends {
list-style-type: square;
}
.most-watched {
list-style-type: circle;
}
.new-arrivals {
list-style-type: disc;
}
.classics {
list-style-type: none;
}
body {
background-color: #232323;
color: #FFFFFF;
font-size: 18px;
}
h2 {
color: #B8A7C2;
text-align: center;
}
If the list has not been styled the browser will display the disc marker.
By default, the items in an ordered list are marked with numbers.
For ordered list, the list-style property has various possible values.
.top-selling {
list-style-type: decimal-leading-zero;
}
.classic {
list-style-type: decimal;
}
.biographies {
list-style-type: lower-roman;
}
.fantasy {
list-style-type: upper-roman;
}
It's technically possible to style ordered list with bullets and unordered list with numbers but it is not semantically correct and may confuse users and search engines.
Let's look at the position of markers. The list-style-position property accepts two possible values: inside and outside.
/* places the marker within the text
area, inside the item element */
#list-inside {
list-style-position: inside;
}
/* places the marker outside the text
area, outside the item element */
#list-outside {
list-style-position: outside;
}
The default value for the position of markers is outside.
The final sub-property list-style-image, lets you add a custom image as a marker.
The value for list-style-image property is a URL enclosed in quotes following the url keyword. It specifies the path to an image file that will be used as the marker for the list items.
ul {
list-style-image: url('blob.learn.com/courses/logo.png');
background-color: #44475a;
}
The default value for the list-style-image property is none.
Styling Forms
Forms play a crucial role in user interaction on many websites, including login, feedback and data entry.
You can style inputs and labels with the element selectors.
input {
border:1px solid #FF9E03;
}
label {
font-weight: bold;
color: #FF9E03;
}
By default, input elements have borders.
Input elements come in different types.
You can target different input elements with the [attribute] selector.
input[type="text"] {
border: 1px solid #FF9E03;
background-color: #17233B;
}
The [attribute] selector targets HTML elements that have specific attribute or attribute values.
This means you can even style the users inputs.
The code below makes the text input from the user white and bold:
input[type="text"], input[type="email"] {
border: 1px solid #FF9E03;
background-color: #17233B;
color: #FFFFFF;
font-weight: bold;
}
The border-radius property rounds the corners of elements giving them softer appearance.
It accepts values in pixels(px) or percentages(%). Higher values produce more rounded corners.
input[type="text"], input[type="email"] {
border: 1px solid #FF9E03;
background-color: #17233B;
color: #FFFFFF;
font-weight: bold;
border-radius: 10px;
}
input[type='submit'] {
background-color: #149EF2;
border-radius: 15px;
border: none;
font-weight: bold;
color: white;
width: 70px;
height: 40px;
font-size: 18px;
}
When the border-radius property is given a single value, it applies uniform rounding to all four corners of the element, creating equal rounded corners.
The border-radius property can also use percentage (%) values, which are calculated relative to the dimensions of the element.
This means that applying 50% radius to a square shaped element will transform it into a circle.
To apply different values to different corners, you can provide a list of 4 values separated by spaces in this order : top-left, top-right, bottom-right, bottom-left.
Just like for links, you can use pseudo selectors to style different states of buttons.
input[type="text"], input[type="email"] {
border: 1px solid #FF9E03;
background-color: #17233B;
color: #FFFFFF;
font-weight: bold;
}
input[type='submit'] {
background-color: #149EF2;
border-radius: 10px;
border: none;
font-weight: bold;
color: white;
}
input[type='submit']:active {
background-color: #0C1527;
color: #FF9E03;
border: 1px solid #FF9E03;
border-radius: 10px;
}
By default, buttons have borders.
border: none;