CSS(Cascading Style Sheets) is the code that styles the web content bringing our webpages to life with color and pizzaz. Don’t you find it amazing what a little color, border, or font change can bring to your applications? If you don’t have any experience, let me help you unlock your CSS potential.
Linking your HTML page to your CSS file
- We create a stylesheet with a
.cssextension and include its link in the HTML document, like this:
<link rel="stylesheet" href="yourfilename.css">
Be sure to change the filename.
CSS selectors are used to “find” (or select) the HTML elements you want to style. We will go over the simple selectors (select elements based on name, id, class)
Element or type selectors select ALL of a type of element.
In the above snippet we have targeted the
h1 element and given it a style attribute of:
font-size: 20px; While also changing our
p tag to
Another way of selecting HTML elements is by using the class attribute. In HTML, we can assign different classes to our elements. Each element can have multiple classes, and each class can also be applied to multiple elements as well. In the above example we are assigning our div a class of “container” and then in the CSS file we are calling the (.class) with (.)dot notation and then the name of the class (.container)then moving the text to be aligned.
Like classes, we can also use IDs to select HTML elements and apply styling to them. The only difference between class and ID is that one ID can be assigned to only one HTML element. (#id)
- Classes or ID’s cannot start with a number.
- Use lowercase for ID’s and class names, and hyphens (-) if needed to separate words.
- Don’t forget the semi-colon after declarations.
CSS Color Values
Your browser can accept colors in many different ways:
- Color name (ex. red)
- Hexadecimal value (ex. #FF0000)
- RGB value (ex. rgb(255, 0, 0))
- HSL value (ex. hsl(0, 100%, 100%))
The 17 standard colors are: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
The color property changes the color of the text.
color: rgb(255, 0, 0);
Each property can have one or more comma separated values.
font-family: Arial, sans-serif;
The font-family property defines which font is used.
font-family: "Times New Roman"; //Specific font name
font-family: serif; //Generic name
font-family: "Arial", sans-serif; //"Arial", sans-serif;
The font-size property specifies the size of the font.
font-size: 12px; //Pixels
font-size: 1.5em; //"em"
font-size: 100%; //Percentage}
font: italic bold 10px sans-serif;
text-decoration property is mostly used to remove underlines from links.
You can set the background color for any HTML elements.
This property allows you to add rounded corners to elements!
A text can be left or right aligned, centered, or justified.
Once you start to understand the basics you’ll be more comfortable to explore the different possibilities. Learning takes time and experience. Don’t be afraid to play around and make mistakes, as it’s all part of the process!