homeoffice.studio CSS | Holistic Home Office

CSS is the language you use to decorate your websites. While HTML is designed to describe the content of a webpage, ie., headings, paragraphs, lists, images, etc., CSS defines styles for your website, including design, layout, colors, textures, fonts and variations in the way your website is displayed for different screen sizes, etc.

This story is a condensed version of part of w3schools CSS tutorial. I wrote this in order to help me learn the information. Study this stuff. Plan on reading several different versions of documentation about HTML, CSS and Javascript.

Read the free tutorials at w3schools. Get some books about the subject and read them. You can take some online computer science courses. You can even study computer science at a college or university. Right now, I’m taking an online video course about web development from Harvard.

MIT also has lots of free content online. edX and Udemy have lots of good content for learning computer science online. Your computer will teach you how to use it, if you have the curiosity, self-discipline and ambition to go get it.

Be fair and honest. Give credit to your sources. And study! A lot!

CSS is normally written in a separate file, an external style sheet, with a link in the webpage heading. You can change the entire look and feel of your website by changing one external CSS stylesheet.

CSS Syntax

A CSS rule set consists of a selector and a declaration block.

The h1 and p in the examples below are selectors. The select elements are based on the element name. In the example, all h1 headers will have 12px blue font and all paragraphs will have 10px red font.

The declarations are in parenthesis. Color and font-size are properties and blue, red, 12 px and 10px are values of the properties.

h1 {color: blue; font-size: 12px;}

Typically you write code like this:

p {
 color: red;
 text-size: 10px;
}

I’m putting some of mine all on one line to shorten this webpage.

The id Selector

id selectors use the hash (#) character to select a particular element, such as the third paragraph, etc.

#para3 {text-align: right; color: green;}

id names cannot start with a number.

The class Selector

Class selectors start with a . . In the example,

.center {text-align: center; color: green;}

all HTML elements with class=”center” will be green and aligned in the center.

Adding an element selector to the class selector enables you to specify that only certain elements should be affected by a class. For example:

p.center {text-align: center; color: green;}

means only paragraphs with the .center class will be centered and green.

You can assign more than one class to an element using this format:

<p class="right large">Paragraph with two classes.</p>

Class names cannot start with a number.

Grouping Selectors

You can group elements with the same style definitions like this:

h1, h2, p {text-align: right; color: green;}

CSS Comments

p{
   color: green;
   /*Single line comment*/
   text-align: right;
  }

/* This is a
 multi-line
 comment */

External Style Sheet

Each page of your website usually refers to an external style sheet with a link in the head section of its HTML document, like this:

<head>
   <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

“mystyle.css” might look like:

body {
   background-color: lightgrey
  }

h1 {
 color: green;
 text-align: center;
 }

Internal Style Sheet

You can use an internal style sheet to style one particular webpage like this:

<head>
  <style>
    body {
      background-color: lightgrey;
    }
    h1 {
      color: blue;
      text-align: center;
    }
  </style>
</head>

Inline Styles

You can also use inline styles using this format:

<h1 style="color:blue;textalign:center;">Your Heading</h1>

Multiple Style Sheets

For properties defined in more than one style sheet, the value from the last read style sheet will be used. In line styles usually override style sheets referred to in the head. Internal style sheets usually override external style sheets, depending on which one is listed last in the head.

Cascading Order

All styles in a page will “cascade” into a new “virtual” style sheet in this order:

Inline style are the highest priority
Internal and external style sheets in the head section, with the highest priority styles listed last
Browser default will display if no styles are selected.

Colors

Color Names
Color may be selected using color names. HTML supports 140 standard color names

Background Color
Use style=”background-color: lightgrey;

Text color
Examples:
Use <h1 style=”color: green;>Heading</h1>
Or <p style=”color:darkgrey;>Paragraph text</p>

Border Color
Example:
<h1 style=”border: 2px solid green;”>Hello World</h1 >

will put Hello World inside a box with a solid green border, the width of your container. You can adjust the width by adding a width: 500px; or width: 50%; inside the parentheses.

Color Values

RGB Value
HTML colors can be selected using the RGB (red, green, blue) value. Each parameter defines the intensity of one of the colors in a scale from 0 to 255. rgb(255, 0, 0) is red, etc. Different shades of grey can be defined by selecting different equal values for all three light sources

Hex Value
Hexidecimal numbers can be used to define colors using the #rrggbb format. Hexidecimal numbers 00 through ff correspond to decimal 0-255. For example, #ff0000 displays the color red. Again, shades of grey can be defined using equal values for all three light sources.

Background

CSS background properties are used to define the background effects for elements. They include

background-color
background-image
background-repeat
background-attachment
background-position

The background-color property defines the background color of an element, like this:

body {
  background-color:green;
}

background-image imports an image to use as a background like this:

body {
  background-image: url("image.png");
}

The background-image property repeats an image horizontally and vertically by default. You can set it to repeat a background image either horizontally using background-repeat: repeat-x; or vertically using background-repeat: repeat-y;

For example:

body {
  background-image: url("image.png");
  background-repeat: repeat-x; or
  background-repeat: repeat-y;
}

You can also use background-repeat: no-repeat; to specify that the background image should only be displayed once. Use the background-position: right top; property to specify where on the page you want your background image.

The background-attachment: fixed; property will fix the background image to a certain place, so it will not scroll with the rest of the page.

Use the background – Shorthand Property to shorten the code for your background like this:

body {
  background: #f8f8f8 url("image.png") no-repeat left top;
}

Make sure your property values are in the right order.

background-color
background-image
background-repeat
background-attachment
background-position

It does not matter if any of the properties are missing, as long as they’re in the right order.

CSS Box Model

HTML elements can be thought of as boxes. Starting on the outside moving in, you have: margin, border, padding and content.

Height and Width

You can set height and width using px, cm or %

div {
  height: 100px;
  width: 50%;
  background-color: bluegreen;
}

gives you a bluegreen box 100px tall, half the width of your containing block. You could move the box to the center of the container by giving it a wide left margin. You can set the maximum width of an element with the max-width property. You can also just center the element.

I remember reading somewhere that CSS and HTML were moving to using mm instead of pixels. I haven’t seen or heard anything since then, but it’s something to look out for.

Margins

Use the CSS margin property to create space around your elements, outside of any defined borders. Negative values are allowed. Use the margin shorthand property to set all your margins like this:

img {margin: 10px 10px 10px 0px}

Top, right, bottom, left. Use this to align your elements, such as photos, with the text of your website. The 0px left margin will align your img with the text of your webpage content, the 10px of the other sides will create a 10px margin between your img and text around it.

Borders

Use the border properties to design your borders. These are the available styles:

dotted – Defines a dotted border
dashed – Defines a dashed border
solid – Defines a solid border
double – Defines a double border
groove – Defines a 3D grooved border. The effect depends on the border-color value
ridge – Defines a 3D ridged border. The effect depends on the border-color value
inset – Defines a 3D inset border. The effect depends on the border-color value
outset – Defines a 3D outset border. The effect depends on the border-color value
none – Defines no border
hidden – Defines a hidden border

You must select a border style. You can style each individual side of your borders or all of them. You can select the style, width and color of your border. For example

p {
  border: 5px solid green;
}

will produce a 5px wide green border around the selected paragraph. You can also make the corners of your border round by using the border-radius property like this:

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean diam dolor, accumsan sed rutrum vel, dapibus et leo.

p { 
  border: 5px solid green;
  border-radius: 5px;
}

Padding

The CSS padding property sets the space around your content, inside of any borders. Set padding just like you set margins.

Outline

An outline is drawn around an element outside the original border. Outlines are different than borders. They are drawn outside borders, they may overlap with other content and they are not included in an element’s dimensions

outline-style
dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden
outline-color
outline-width
outline-offset
outline

Text Formating

You can select just about every detail of the format of your text. Select for

color
alignment
decoration
transformation
indentation
letter spacing
line height
text direction
word spacing
text Shadows

Fonts

font family
font style
font size
px=pixels
em=% of default font size, usually 16px in most browsers. 1em is 100% of default font size.
font weight is how bold your text is.
responsive font size uses vw (viewportsize) to cause the font size to grow as the browser get bigger. As in: <h1 style=”font-size:10vw”> Title </h1>
font variant: p.small{font-variant: small-caps;}

Icons

You can use icons by linking to a library of icons. The three most popular are

Font Awesome
Bootstrap
Google
I prefer the OpenJS Foundation libraries, rather than the Bootstrap or Google ones.

Links

The tags used to produce links are the <a> and </a>. The target of the link is added to the <a> tag using the href=”http://www.whateverpage.com” setting.

<a href="http://www.homeoffice.studio">Click Here</a>

creates a link to Holistic Home Office.

You simply:
Specify the target in the <a href=” “>.
Then add the text that should work as a link.
Finally add an </a>tag to indicate where the link ends.

Links can be styled as text or buttons. You can also select for text color, for links in different status’s:

/* unvisited link */
a:link {color: blue;} 

/* visited link */
a:visited {color: green;}

/* mouse over link */
a:hover {color: teal;} 

/* selected link */
a:active {color: red;}

Lists

HTML lists can be ordered or unordered. You can use CSS list properties to decorate your lists any way you want to. Some examples of different list item markers are:

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

You can also use an image for your list item markers

ul {list-style-image: url('greendot.gif');

You position list item markers inside or outside the list. Outside is the default, which means the list item markers are outside the list and all the text of the list is aligned. The markers are outside the aligned text. You can also remove the numbers or bullets with

list-style-type:none

List shorthand property:

ul {list-style: circle outside url("greendot.gif");}

You can also decorate lists with background color, margin, padding and borders, etc.

Tables

Create table borders with

table, th, td {border:1px solid black;}

will create a table with double lined borders around every element of the table. Use

table {border-collapse: collapse;}
table, th, td {border:1px solid black;}

to get the table to display just one border around each element and the whole table. You can set the table width using px or %. Use px for the height. You can also set the height and width of every table element. For example

th {height: 50px;}

sets the height of the table head to 50px

Use text-align to align text within table elements, ie., left, right or center.
Use vertical-align to vertically align text within table elements.
Use padding to create padding between the content and the table element borders

th {padding: 15px; text-align: center;}
td {padding: 15px; text-align: left;}

Create horizontal dividers with:

th, td {padding: 15px; text-align: left;}

And this is just the beginning of the CSS technology. I’ve written this article to get this information imprinted in my own memory. I’ve also read several books about HTML, CSS and Javascript. I’ve read many more pages of w3schools’ website and many other websites about website design.

Keep seeking the truth about computer science and website development. Start up a simple website and start practicing using these technologies. Create something beautiful and valuable and trade it in our one world wide free marketplace.

Here is a small example of an external style sheet:

.slbOverlay,.slbWrapOuter,.slbWrap{position:fixed;top:0;right:0;bottom:0;left:0}.slbOverlay{overflow:hidden;z-index:2000;background-color:#000;opacity:0.7;-webkit-animation:slbOverlay 0.5s;animation:slbOverlay 0.5s}.slbWrapOuter{overflow-x:hidden;overflow-y:auto;z-index:2010}.slbWrap{position:absolute;text-align:center}.slbWrap:before{content:"";display:inline-block;height:100%;vertical-align:middle}.slbContentOuter{position:relative;display:inline-block;vertical-align:middle;margin:0px auto;padding:0 1em;box-sizing:border-box;z-index:2020;text-align:left;max-width:100%}.slbContentEl .slbContentOuter{padding:5em 1em}.slbContent{position:relative}.slbContentEl .slbContent{-webkit-animation:slbEnter 0.3s;animation:slbEnter 0.3s;background-color:#fff;box-shadow:0 0.2em 1em rgba(0,0,0,0.4)}.slbImageWrap{-webkit-animation:slbEnter 0.3s;animation:slbEnter 0.3s;position:relative}.slbImageWrap:after{content:"";position:absolute;left:0;right:0;top:5em;bottom:5em;display:block;z-index:-1;box-shadow:0 0.2em 1em rgba(0,0,0,0.6);background-color:#FFF}.slbDirectionNext .slbImageWrap{-webkit-animation:slbEnterNext 0.4s;animation:slbEnterNext 0.4s}.slbDirectionPrev .slbImageWrap{-webkit-animation:slbEnterPrev 0.4s;animation:slbEnterPrev 0.4s}.slbImage{width:auto;max-width:100%;height:auto;display:block;line-height:0;box-sizing:border-box;padding:5em 0;margin:0 auto}.slbCaption{display:inline-block;max-width:100%;max-height:3em;word-wrap:normal;position:absolute;left:0;right:0;bottom:0;text-align:left;line-height:18px;color:#F3F3F3;padding:0 0 1em 0;font-size:16px}.slbCloseBtn,.slbArrow{margin:0;padding:0;border:0;cursor:pointer;background:none}.slbCloseBtn::-moz-focus-inner,.slbArrow::-moz-focus-inner{padding:0;border:0}.slbCloseBtn:hover,.slbArrow:hover{opacity:0.5;background:transparent}.slbCloseBtn:active,.slbArrow:active{opacity:0.8}.slbCloseBtn{-webkit-animation:slbEnter 0.3s;animation:slbEnter 0.3s;font-size:3em;width:1.66667em;height:1.66667em;line-height:1.66667em;position:absolute;right:-0.33333em;top:0;color:#fff;color:rgba(255,255,255,0.7);text-align:center}.slbLoading .slbCloseBtn{display:none}.slbLoadingText{font-size:1.4em;color:#fff;color:rgba(255,255,255,0.9)}.slbArrows{position:fixed;top:50%;left:0;right:0}.slbLoading .slbArrows{display:none}.slbArrow{position:absolute;top:50%;margin-top:-5em;width:5em;height:10em;opacity:0.7;text-indent:-999em;overflow:hidden}.slbArrow:before{content:"";position:absolute;top:50%;left:50%;margin:-0.8em 0 0 -0.8em;border:0.8em solid transparent}.slbArrow.next{right:0}.slbArrow.next:before{border-left-color:#fff}.slbArrow.prev{left:0}.slbArrow.prev:before{border-right-color:#fff}.slbIframeCont{width:80em;height:0;overflow:hidden;padding-top:56.25%;margin:5em 0;max-width:900px}.slbIframe{position:absolute;top:0;left:0;width:100%;height:100%;box-shadow:0 0.2em 1em rgba(0,0,0,0.6);background:#000}@-webkit-keyframes slbOverlay{from{opacity:0}to{opacity:0.7}}@keyframes slbOverlay{from{opacity:0}to{opacity:0.7}}@-webkit-keyframes slbEnter{from{opacity:0;-webkit-transform:translate3d(0, -1em, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0)}}@keyframes slbEnter{from{opacity:0;transform:translate3d(0, -1em, 0)}to{opacity:1;transform:translate3d(0, 0, 0)}}@-webkit-keyframes slbEnterNext{from{opacity:0;-webkit-transform:translate3d(4em, 0, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0)}}@keyframes slbEnterNext{from{opacity:0;transform:translate3d(4em, 0, 0)}to{opacity:1;transform:translate3d(0, 0, 0)}}@-webkit-keyframes slbEnterPrev{from{opacity:0;-webkit-transform:translate3d(-4em, 0, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0)}}@keyframes slbEnterPrev{from{opacity:0;transform:translate3d(-4em, 0, 0)}to{opacity:1;transform:translate3d(0, 0, 0)}}

Normally, you do not want to edit your theme directly, but you can if you want to. I’ve done it before on other websites, to make minor changes. For example, to get a drop down list to drop down on the left, instead of the right.

The theme files for Kadence, listed on the right of this screen shot are extensive.

Credits

Notes from w3schools