In this lesson you will learn the bare-bones of Cascading Style Sheets, or CSS. The language that brings format, color, and well, style, to the internet.
What Does CSS Syntax Look Like
The CSS syntax is quite simple. It's structure consists of two main parts: selectors and declarations.
- Selectors are used to target HTML elements to which the CSS style will be applied
- Declarations define the style that will be applied to the selected elements. It includes a property and a value.
Here is an example:
a:link {
color: gray;
}
a:visited {
color: green;
}
a:hover {
color: purple;
}
This snippet of CSS deals with the styling of an hyperlink HTML element, A.K.A. the a element. One statement for the color of the link, another for the color of the link once the link has been visited, and one for the color of the link when the mouse hovers over it. The corresponding HTML would be written something like this:
<a href="www.codingnomads.com">Click Here</a>
Every browser has its own CSS it applies as default if none can be found.
How to Add CSS to an HTML File
You can embed CSS directly into HTML like this:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
a:link {
color: gray;
}
a:visited {
color: green;
}
a:hover {
color: purple;
}
</style>
</head>
<body>
<a href="www.codingnomads.com">Click Here</a>
</body>
</html>
Create an HTML file and experiment with the above example.
How to Get Better at Styling With CSS
Go to CodePen and play around with some examples to get an idea for what CSS can do and how its written in code. Much of it will be very advanced and confusing, but it's great to get exposed to CSS in the wild.
It is strongly encouraged to download and install this extension: Stylebot and play around with it in your browser. It is great to get a feel and familiarity for CSS without having to code it yourself!
Summary: Learn to Style With CSS
- CSS syntax consists of two main parts: selectors and declarations
- Selectors allow you to select the html element to which you will apply the CSS
- Declarations include properties and values
- CSS can be directly embedded in your HTML
- You can practice by going on Codepen.io