There are three methods of applying CSS to a document.
Inline
Inline styles are CSS declarations that affect a single HTML element, contained within a style attribute.
Avoid using CSS in this way, when possible. It is the opposite of a best practice. First, it is the least efficient implementation of CSS for maintenance. One styling change might require multiple edits within a single web page. Second, inline CSS also mixes (CSS) presentational code with HTML and content, making everything more difficult to read and understand. Separating code and content makes maintenance easier for all who work on the website.
<div class="row">
<div class="col-3" style="color: red">
I am inline styled
</div>
</div>
Internal
An internal stylesheet resides within an HTML document. To create an internal stylesheet, you place CSS inside a <style> element contained inside the HTML <head>.
In some circumstances, internal stylesheets can be useful. For example, perhaps you're working with a content management system where you are blocked from modifying external CSS files. But for sites with more than one page, an internal stylesheet becomes a less efficient way of working. To apply uniform CSS styling to multiple pages using internal stylesheets, you must have an internal stylesheet in every web page that will use the styling. The efficiency penalty carries over to site maintenance too. With CSS in internal stylesheets, there is the risk that even one simple styling change may require edits to multiple web pages.
<style>
p {
color: green;
}
a {
color: blue;
}
</style>
<!-- Internal -->
<div class="row">
<div class="col-3">
<h4>Internal CSS</h4>
</div>
</div>
<div class="row">
<div class="col-3">
<p>I am internal styled</p>
</div>
</div>
External
An external stylesheet contains CSS in a separate file with a .css extension. This is the most common and useful method of bringing CSS to a document. You can link a single CSS file to multiple web pages, styling all of them with the same CSS stylesheet.
style.css
.note{
color: blue;
}
In the head section, include the external style sheet
<link rel="stylesheet" href="style.css">
<!-- External -->
<div class="row">
<div class="col-3">
<h4>External CSS</h4>
</div>
</div>
<div class="row">
<div class="col-3">
<p class="note">I am external styled</p>
</div>
</div>
margin properties are used to create space around elements, outside of any defined borders.
margin: top right bottom left;
margin: 10px 15px 20px 25px;
top – 10px
right – 15px
bottom – 20px
left – 25px
margin: top right/left bottom;
margin: 10px 20px 25px;
top – 10px
right/left – 20px
bottom – 25px
margin: top/bottom right/left ;
margin: 10px 20px;
top/bottom – 10px
right/left – 20px
margin: top/right/left/bottom;
margin: 10px;
top/bottom/right/left – 10px
<div class="row">
<div class="col-4">
<h4>Margin</h4>
</div>
<div class="col-8" id="margin_1">
Hi my name is Folau
</div>
</div>
<style>
#margin_1{
margin: 20px;
border: 2px solid blue;
}
</style>
Text Shadow
text-shadow property applies shadow to text.
<div class="row">
<div class="col-4">
<h4>Text Shadow</h4>
</div>
<div class="col-8" id="textShadow">
Hi my name is Folau
</div>
</div>
<style>
#textShadow{
/*
text-shadow: h-shadow v-shadow blur-radius color
h-shadow - The position of the horizontal shadow
v-shadow - The position of the vertical shadow.
blur-radius - The blur radius. Default value is 0
color - color
*/
text-shadow: 2px 2px 8px #FF0000;
}
</style>
Text Multiple Shadows
<div class="row">
<div class="col-4">
<h4>Text Multiple Shadow</h4>
</div>
<div class="col-8" id="textMultipleShadow">
Hi my name is Folau
</div>
</div>
<style>
#textMultipleShadow{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
Box Shadow
box-shadow property applies shadow to elements.
<div class="row">
<div class="col-4">
<h4>Box Shadow</h4>
</div>
<div class="col-8" id="boxShadow">
Hi my name is Folau
</div>
</div>
<style>
#boxShadow{
/*
box-shadow: none(no shadow)
box-shadow: h-offset v-offset blur spread color
h-offset - The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box
v-offset - The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box
blur - The blur radius. The higher the number, the more blurred the shadow will be
spread - The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow
color - color
*/
box-shadow: 10px 10px 8px 10px #888888;
}
</style>
Box Multiple Shadows
<div class="row">
<div class="col-4">
<h4>Box Multiple Shadow</h4>
</div>
<div class="col-8" id="boxMultipleShadow">
<img src="superman.jpeg" alt="" style="width:100%;padding: 10px 30px;"/>
<div class="profile">
Hi my name is Folau
</div>
</div>
</div>
<style>
#boxMultipleShadow{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
</style>
What is SASS?
Why use SASS?
Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help. Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.
Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website.
npm install -g sass
Once Sass is installed, you can compile your Sass to CSS using the sass command. You’ll need to tell Sass which file to build from, and where to output CSS to. For example, running sass input.scss output.css from your terminal would take a single Sass file, input.scss, and compile that file to output.css.
You can also watch individual files or directories with the --watch flag. The watch flag tells Sass to watch your source files for changes, and re-compile CSS each time you save your Sass. If you wanted to watch (instead of manually build) your input.scss file, you’d just add the watch flag to your command, like so:
sass --watch input.scss output.css
You can watch and output to directories by using folder paths as your input and output, and separating them with a colon. In this example:
sass --watch app/sass:public/stylesheets
Sass would watch all files in the app/sass folder for changes, and compile CSS to the public/stylesheets folder.
Variables
Variables are used to store information that you can re-use in many places. An advantage of using variables is that you can change them in one place instead of many places. Sass uses the $ symbol to make a variable.
Things that can be stored in variables are:
$myFont: Helvetica, sans-serif;
$myColor: gray;
$myFontSize: 18px;
$myWidth: 680px;
#variable {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
}
The default behavior for variable scope can be overridden by using the !global switch. !global indicates that a variable is global, which means that it is accessible on all levels.
$myFont: Helvetica, sans-serif;
$myColor: gray;
$myFontSize: 18px;
$myWidth: 680px;
#variable {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
$myColor: red !global;
}
#nesting{
text-align: center;
color: $myColor;
img{
width: 50%;
}
div{
padding-top: 10px;
padding-bottom: 20px;
}
}
Nesting
Sass lets you nest CSS selectors in the same way as HTML.
$myColor: gray;
#nesting{
text-align: center;
color: $myColor;
img{
width: 50%;
}
div{
padding-top: 10px;
padding-bottom: 20px;
}
}
@use
You don’t have to write all your Sass in a single file. You can split it up however you want with the @use rule. This rule loads another Sass file as a module, which means you can refer to its variables, mixins, and functions in your Sass file with a namespace based on the filename. Using a file will also include the CSS it generates in your compiled output!
@use "profile";
$myFont: Helvetica, sans-serif;
$myColor: gray;
$myFontSize: 18px;
$myWidth: 680px;
#variable {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
$myColor: red !global;
}
// _profile.scss
#profile{
font-weight: bold;
.address{
text-decoration: wavy;
}
}
@mixin
A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. The @include directive is created to let you use (include) the mixin.
style.scss
@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
#nesting{
@include important-text;
text-align: center;
color: $myColor;
img{
width: 50%;
}
div{
padding-top: 10px;
padding-bottom: 20px;
}
}
style.css
#nesting {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
text-align: center;
color: red;
}
@extend
The @extend directive lets you share a set of CSS properties from one selector to another. The @extend directive is useful if you have almost identically styled elements that only differ in some small details.
style.scss
%msg-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend %message-shared;
border-color: green;
}
.error {
@extend %message-shared;
border-color: red;
}
style.css
.message, .success, .error {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
Css has functions that can be used to set values.
The attr()function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse. The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet.
<div class="col-9">
<p id="mySite"><a href="https://lovemesomecoding.com">Visit lovemesomecoding</a></p>
</div>
<style>
#mySite > a:after {content: " (" attr(href) ")";}
</style>
The calc() CSS function allows you to perform calculations when specifying CSS property values. The calc() function takes a single expression as its parameter, with the expression’s result used as the value. The expression can be any simple expression combining the following operators, using standard operator precedence rule.
<div class="col-9">
<p id="myMessage">Learning css functions</p>
</div>
<style>
#myMessage{
background-color: lightblue;
width: calc(100% - 120px);
text-align: center;
}
</style>
The var() CSS function can be used to insert the value of a custom property (sometimes called a “CSS variable”) instead of any part of a value of another property.
<div class="col-9">
<p id="myVar">Learning css functions</p>
</div>
<style>
:root {
--favoriteColor: coral;
}
#myVar{
background-color: var(--favoriteColor);
width: calc(100% - 120px);
text-align: center;
}
</style>
repeat-linear-gradient() function
The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients. It is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.
<div class="col-9">
<p id="myLinearGradient">Learning css functions</p>
</div>
<style>
#myLinearGradient{
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
height: 300px;
text-align: center;
}
</style>