Skip to content

Latest commit

 

History

History
468 lines (367 loc) · 11.3 KB

css.md

File metadata and controls

468 lines (367 loc) · 11.3 KB
Raw

HTML Introductory Course

DOWNLOAD

CSS

CSS Stands for Cascading Style Sheet. The term 'Cascading' refers to the priority of the styles being applied.

Here is an example of the contents of a typical CSS file

body {
    font: 100% Lucida Sans, Verdana;
    margin: 20px;
    line-height: 26px;
}

.container {
    xmin-width: 900px;
}

CSS files are made up of CSS rules. CSS rules are made up of selectors, properties and values.

p {
    font-size: 16pt;
}

p is the selector

font-size is the property

16pt is the value

Have a look at the CSS of a website you often visit

Block and inline elements

Block elements like <h1> , <p> , <ul> , and <li> always appear on the page as a new line.

Inline elements like <a> , <b> , <em> , and <img> always appear on the page on the same line.

DIVs and SPANs

You can group elements of HTML that you want to apply the same style to by closing them in <div> or <span> tags depending on whether you want to group as a block or inline respectively.

<div>
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</div>

Applying CSS

You can apply CSS to specific sections of the document by defining classes and IDs. Classes apply CSS to many elements of an html document, and IDs apply CSS to just one:

.news {
    font-weight: bold;
    font-family: serif;
}

#headline {
    font-size: 25pt;
}
<h1 id="headline">BIG NEWS</h1>
<p class="news">Details, details, details, details, details, details, details, details.</p>
<p class="news">Details, details, details, details, details, details, details, details.</p>
<p class="news">Details, details, details, details, details, details, details, details.</p>
<p class="news">Details, details, details, details, details, details, details, details.</p>

DEMO

Inside your html document, you can apply CSS internally

<style>
    body: {
        background-color: red;
    }
</style>

Or externally

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

Demonstration

The following page exhibits the power that CSS has to change the look and feel of a website.

<iframe style="width:90%;height:600px;background:#ffffff;border:none;" src="http://www.w3schools.com/css/demo_default.htm"></iframe>

Selectors

There are many types of selectors in CSS, w3schools provides a good reference

Selector Reference

Cascading

Always remember that if there are two rules for a particular selector, the one that appears last in the document will take precedence.

If you need to override that rule, you can add !important after any property value

p {
    background-color: blue !important;
}

Colours in CSS

In this demonstration, we've already been changing the color of elements using names like red and blue, but how can you be more specific about your colour choices?

Lets have a look at a 'colour picker' to see what options are availabile to us.

LINK

RGB

RGB stands for Red-Green-Blue. rgb(x,y,z) tells the browser to render a colour with X Red, Y Green, and Z Blue

Hex

Hex codes do the same in a shorter format.

body {
    background-color: rgb(46, 145, 179);
}

Is the same as

body {
    background-color: #2E91B3;
}

Names

And of course, you can specify colours using their names.

LINK

Opacity

You can make html elements more opaque on screen by changing a colour's opacity.

p {
    background-color: rgb(46, 145, 179);
    opacity: 0.5;
}
p {
    background-color: rgb(46, 145, 179, 0.5);
}

Text

There are a number of properties of text that you can change with css

Font family

.demonstration {
    font-family: Georgia, Times, serif;
}
<p class="demonstration">
    Hello there
</p>
<style> .demonstration { font-family: Georgia, Times, serif; } </style>

Hello there

Font size

Pixels
.demonstration {
    font-size: 14px;
}

This is exactly 14 pixels tall

Percentage

.demonstration {
    font-size: 50%;
}

This is half the normal size

EM

Relative to the current element's size

.demonstration {
    font-size: 3em;
}

That is three times the normal size

Font weight

To make text bold, use font-weight

.demonstration {
    font-weight: bold;
}

Font style

To make text italic, use font-style

.demonstration {
    font-style: italic;
}

Text alignment

text-align changes the alignment of text on the horizontal axis.

.demonstration {
    text-align: center;
}
.demonstration {
    text-align: left;
}
.demonstration {
    text-align: right;
}

Text Decoration

Text decoration controls the additional styling of text like adding underlines.

Removing underlines from links

a {
    text-decoration: none;
}
a {
    text-decoration: line-through;
}
a {
    text-decoration: overline;
}
a {
    text-decoration: underline;
}

Misc

w3schools covers the rest of the text-styling options here

Display

You can use the display property to change and element's type between block and inline

Remember the difference between block and inline?

Block

A block-level element always starts on a new line and takes up the full width available

Inline

An inline element does not start on a new line and only takes up as much width as necessary.

http://www.w3schools.com/css/css_display_visibility.asp

DEMO

Boxes

Here's a box demonstration:

<div>
	 <p>The Moog company pioneered the commercial
		 manufacture of modular voltage-controlled
		 analog synthesizer systems in the early
		 1950s.</p>
</div>
.box {
    margin: 0;
    padding: 0;
    height: 300px;
    width: 300px;
    background-color: #bbbbaa;
}
.box p {
    margin: 0;
    padding: 0;
    height: 75%;
    width: 75%;
    background-color: #0088dd;
}
<style>
.box {
    margin: 0;
    padding: 0;
    height: 250px;
    width: 250px;
    background-color: yellow;
}
.box p {
    margin: 0;
    padding: 0;
    height: 75%;
    width: 75%;
    background-color: blue;
}
</style>     

<div class="box">
	 <p>
        This is some dummy text...
     </p>
</div>

w3schools explains how the box model works visually here

You can override box sizes with height and width, and by default a box is just large enough for its contents.

Min and Max width

When designing for interfaces that change in size (like a web browser), we can use min and max

Here is a demonstration:

<style>
div.norm {
    width:600px;
    border: 3px solid red;
}

div.max {
    max-600px:350px;
    border: 3px solid red;
}
</style>
</head>
<body>

<div class="norm">Normal width</div>
<br>

<div class="max">Max width</div>

Overflow

When we have lots of text in a fixed space, we can make the content fit using Overflow

<style>
div.norm {
    width:600px;
    height:100px;
    border: 3px solid red;
    overflow: scroll; /*or hidden*/
}

div.max {
    max-600px:350px;
    border: 3px solid red;
}
</style>
</head>
<body>

<div class="norm">Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width Normal width </div>
<br>

<div class="max">Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width Max width </div>

Borders

There are lots of styles that can apply to borders, w3schools lists them briefly here

Centering

To center a box, set the margins to auto.

p{
    margin: 5px auto 5px auto;
}

For a full reference of center-styling, see css-tricks's guide here

Positioning

There are four types of positions:

When elements are overlapping, you can layer them by adjusting the z-index property.

Additional Functionality

Embedding youtube videos

<iframe width="560" height="315" src="https://www.youtube.com/embed/s86-Z-CbaHA" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/s86-Z-CbaHA" frameborder="0" allowfullscreen></iframe>

Google maps

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3539.935879355097!2d153.01582491527873!3d-27.471255523346525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b915a07b67caa5f%3A0xfc22e8caf1f501ae!2sState+Library+of+Queensland!5e0!3m2!1sen!2sau!4v1469337465617" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3539.935879355097!2d153.01582491527873!3d-27.471255523346525!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6b915a07b67caa5f%3A0xfc22e8caf1f501ae!2sState+Library+of+Queensland!5e0!3m2!1sen!2sau!4v1469337465617" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Projects

Project 2 - From scratch

Now try to make the same personal site using your own stying. You can refer to the CSS reference or w3Schools if you need help or ideas.

Start with this structure:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

    </body>
</html>

Further reading

Code Changers