CSS (or Cascading Style Sheets) is a separate language that is used to apply styling to the HTML content on a webpage, it is called cascading style sheets because the internet browser will read the styles from top down. Without CSS the HTML data will be presented in a basic format. CSS tags can be incorporated into HTML coding, but it is typically kept in a separate code. A CSS rule consists of selectors and a declarations; selectors refer to the item in the HTML code that the declaration applies to. The declaration consists of properties and a values; a property is a category of styling (e.g. color), while a value is the desired output for that category (e.g. blue).
Although CSS is mostly used in a separate code from HTML, it can be built into the HTML code by using the HTML style attribute. Although the "in-line" CSS uses the HTML style attribute, it uses CSS properties and values. Just like the other HTML attributes, the style attribute always exists within the opening tag of an HTML element.
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
In this example the in-line CSS will apply a background color to the whole body element and all the nested elements in body element.
<body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
In this example the in-line CSS will apply a background color to the H1 element and a different background color to the P element.
As mentioned earlier, CSS is typically written in a separate code with a different structure than the one presented for "in-line" CSS. The external CSS structure looks like this:
p {
text-align: center;
color: red;
}
In this example we are applying a center alignment and the color red to all the HTML P Elements. The P in the example is the selector, followed by a right brace }. Once the CSS selector is declared you follow it with the desired CSS properties and values in separate lines for each declaration; the property is always followed by a colon, and the value is always followed by a semi-colon. Once all the declarations have been declared, you close the CSS rule by adding a left brace { on a separate line.
CSS Selectors:
As a recap, CSS selectors refer to the HTML element(s) you want to apply styling to. There are a couple of different types of selectors that can be used in CSS.
Simple Selectors: These are selectors that refer to HTML elements based on their tag, name, class, or id. In the first example the selector was choosing all the elements with a P tag. A simple selector can also be used if an HTML element has a class or id attribute in it, but there are a few changes to the CSS structure for these simple selectors:
<ul id="list">
<li class="list-item">Item One</li>
<li class="list-item">Item Two</li>
<li class="list-item">Item Three</li>
</ul>
----------------------------------------------------------
#list {
background-color: #000000;
}
.menu-item {
color: #ffffff;
}
In this example we are applying a background color of black to the list, and we are applying the color white to the text of the list items by using a CSS id selector and a CSS class selector. The CSS id selector always begins with a pound icon #, and a class selector always begins with a period . If you are using a class for different elements within the code but only want to apply it to certain tags with the class attribute you can use the tag selector with a class selector:
li.list-item {
color: #ffffff;
}
Note: the difference between id and class is that an id must be unique in the whole code, while a class can be applied to multiple elements in a code.
Grouping Selector: If you are applying the same CSS code to multiple HTML elements you can combine them by separating the selectors with a comma:
h1, h2, p {
text-align: center;
color: red;
}
In this example we are applying the same CSS to three different HTML elements.
CSS Pseudo-Class Selector: These selectors are used to define a special state of an element, which can include: style an element when a user mouses over it, style visited and unvisited links differently, and style an element when it gets focus. the structure of these CSS rules are:
selector:psudeo-class {
property: value;
}
Below are some examples of using a pseudo-class CSS rule:
/* unvisited link */
a:link {
color: #FF0000;
}
(in this example an unvisited link will be the assigned color)
/* visited link */
a:visited {
color: #00FF00;
}
(in this example an visited link will be the assigned a different color)
/* mouse over link */
a:hover {
color: #FF00FF;
}
(in this example a link will change color when the mouse hovers over it)
/* selected link */
a:active {
color: #0000FF;
}
(in this example a selected link will change color when clicked)
You can also use Psuedo-class CSS rules to hid content, unless an action is performed on another HTML element (e.g. you can hide text that will be appear when a user hovers over a section of the webpage).
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
In this example the P HTML element will be hidden unless a user hovers over the divider content.
CSS Margins:
Margins are used to create space around HTML elements, outside of any defined borders. There are a couple ways this property can be written in CSS coding. One way of writing in margins for HTML elements is by creating separate declarations for each side of the HTML element:
Another way you can write margins CSS rules, is by just using the "margin" property. If you only use the margin property, there are a couple of rules that you will need to know:
If the margin property has four values, it will be written like this:
If the margin property has three values, it will be written like this:
If the margin property has two values, it will be written like this:
If the margin property has one value, it will be written like this:
CSS Padding:
Padding in CSS works just like the margin property, but instead of creating space outside of an HTML element's borders, padding creates space inside of the element's defined borders. There are a couple ways this property can be written in CSS coding. One way of writing in padding for HTML elements is by creating separate declarations for each side of the HTML element:
Another way you can write padding CSS rules, is by just using the "padding" property. If you only use the paddingproperty, there are a couple of rules that you will need to know:
If the padding property has four values, it will be written like this:
If the padding property has three values, it will be written like this:
If the padding property has two values, it will be written like this:
If the padding property has one value, it will be written like this: