Instructobit
Cascading style sheets (CSS) are used to style elements of an HTML document by providing values for certain properties of those elements.
CSS is made up of two main components: selectors and properties.
CSS selectors
A selector is used to select the elements within the HTML document that
you wish to modify, there are several different types of selectors that
allow us to select different elements such as:
-
Element selectors
: used to select all elements of a specific type, simply state the type of the element to select it. Example:
span or h1 or div
-
ID selectors
: used to select a single element that has the given value for the "id" attribute. To select by ID, give the ID value preceded by a "#" character. Example:
#firstname_span
-
Class selectors
: used to select all elements that have the given value for the class attribute. To select by class, give the class value preceded by a "." character. Example:
.default_input
There are many more types of selectors that accomplish different tasks, but for now we will start with these basic ones.
Click here for a more in-depth look at CSS selectors
.
CSS properties
A property is a specific visual detail about the element that we can modify using our own values. To modify a property, simply specify the name of the property, followed by a ":" character (functions like an equals sign), followed by the desired value, followed by a ";" character (functions as a line terminator). HTML elements have a wide range of available properties we can modify such as:
border-width
: allows us to modify the width of the border of the HTML element, accepts a distance value such as pixels or percentage. Example:
border-width : 2px ;
border-color
: allows us to modify the color of the border, accepts a color value such as a color name, rgb or hex. Example:
border-color : red ;
border-style
: allows us to modify the style of the border, styles that are available include solid, dotted, ridge and more. Example:
border-style : solid ;
background-color
: allows us to modify the background color of an HTML element, accepts a color value. Example:
background-color : blue ;
margin
: allows us to modify the margin of the element, accepts a distance value. Example:
margin : 5px ;
There are many other available properties that can be used in CSS.
Basic CSS syntax
A CSS style sheet is made up of many selectors and properties. To modify a certain set of elements in an HTML document, you must provide a selector (or several selectors separated by commas) followed by a block within which you can place your properties, the start of a block is represented by an opening bracket "{", and the end is represented by a closing bracket "}".
selector, selector, ... {
property : value ;
property : value ;
...
}
As an example, lets change the font size and background of all "div" elements within an HTML document:
div {
font-size : 24px ;
background-color : blue ;
}
Now let's change the margin value for all elements of the class "test":
.test {
margin : 5px ;
}
If we wanted both of the above styles to be included in a single style sheet then we can do the following:
div {
font-size : 24px ;
background-color : blue ;
}
.test {
margin : 5px ;
}
Including CSS within an HTML document
There are several ways to incorporate CSS into an HTML document. One way would be to create a separate file with the extension ".css" and include it in the
<head>
of our HTML document using a
<link>
element:
<link rel="stylesheet" href="style.css">
This included the destination of the file relative to the current page, as well as the relationship with the document which is "stylesheet". This will include all the styles given within the CSS file.
Another way is to include the styles within a
<style>
element in the
<head>
of the HTML document like so:
<head>
<style>
div {
font-size : 24px ;
background-color : blue ;
}
.test {
margin : 5px ;
}
<style>
</head>
This will result in the same outcome, the advantage of using this method is slightly faster loading times for the HTML document as it does not have to locate and load a separate file. It is however less organized for the developer.
Another method is to use the
style attribute
of an element to modify properties of a single element:
<div style="background-color : blue ;">content text</div>
This works well for styling individual elements but does not allow for the use of selectors.
