December 17, 2018 · coding CSS

Introduction to CSS

CSS (Cascasing Style Sheets) describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once.

A very basic css attriubte is changing the website background colour. Because I already have the html structure (in html.index) to my website I can add the CSS into the code to start styling it.

Under the <body> section (of the html file, because I want the whole websites background to be this colour) of my html I will add in a style element to enable the back ground colour. This is done using the following code <body style="background-color: #ffedc6;">. Remeber to close the sentance with a ;

Its best to use hexadecimals for the colour selection as it gives you more range over the colour you want to use - a good resource is at Color Hunt! If you arent wanting to do this you can also use the MDN website resource that has all the colour keywords avalable listed. Unlike HTML, CSS will completely ignore unknown keywords so make sure you are using the correct colour keyword.

111-1

Internal CSS

Inline CSS refers to CSS found in an HTML file. It is found in the <head> of a document between <style> tags. Inlining CSS simply means putting your CSS into your HTML file instead of an external CSS file.

if your wanting to change the style of a section of website that appears multipe times through out your code you can do this using inline CSS that will effect the entire file instead of needing to update line by line.

Sometimes it is easy to make a mistake where your html and your css code will not interact with each other. An easy way to test this is to change something very obvious like the background colour to a bright colour to make sure that the both langauges are working with each other.

Some html elements already have default browser values, like <hr> the details are below for this

display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;

CSS Default Values Reference can be found on the MDN website.
To change a style of these elements you will additonally change the default css.

In the <hr> default values there is a line called border-styles: inset; to know what this is I went to the MDN website and searched for border-styles I found this information

222

I changed my code to include no border style using the following code because I wanted it just to be white

hr {
           background-color: white;
           border-style: none;
       }

However by doing this you could no longer see the border because there was no height, I added this into the code

        hr {
            background-color: white;
            border-style: none;
            height: 2px;
        }

Which made the white borders appear

333

The width of the <hr> can be changed as well - this can be changed to a certain amount of pixels width: 100px; or a better practice would be to choose the percentage width: 30pc; width you want to use so it is captable across all difference devices.

Similarly the boarder style (applied to all/only certain side) and the border colour can be changed as well. I choose to change my <hr> to be a single orange dotted line that takes up 5% of the line.


        hr {
            border-style: none;
            border-top-style: dotted;
            border-color: #e29c68;
            border-width: 5px;
            width: 5pc;
        }

444

External CSS

An external style sheet is a separate file linked to an HTML web page. It comes with a .css filename extension. All the styles that need to be used on a website can be declared in the external style sheet. External style sheets are an important tool from the webmaster’s perspective.

Because I want the same design team throughout the website the easiest way is to create an external CSS file which will only require one line of code to apply to every page.

First I needed to create a new folder within my HTML - Personal Site folder called "css", then I created a new file called "styles.css". Within that folder I copied the code I had alrady written which changes the <hr> and the background-colour using the <link> element - this needs to go within the <head> section of your code

<head>
    <meta charset="utf-8">
    <title>Amy's Personal Site</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

This link will point make sure that all the code in the webiste will follow these rules.

There are alot fo style feature that can be changed, these are the few i did below

body {
    background-color: #e6e7e5;
}

hr {
    border-style: none;
    border-top-style: dotted;
    border-color: #4a0e5c;
    border-width: 5px;
    width: 5pc;
}
h3 {
    color: #a26ea1;
}
h1 {
    color: #a26ea1;
}

111-2

  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket