Web Appearance with CSS 3 (WAC3)

Learn the Basics of CSS (Cascading Style Sheets)

Substance:

What is CSS, who invented it and how to use it?
CSS Selectors

CSS Fundamentals

1. What is CSS, who invented it and how to use it?

CSS (Cascading Style Sheets) is a programming language standard for styles, aimed at organizing web layouts and beautifying web pages.

CSS was invented and developed by Håkon Wium Lie , Bert Bos and the World Wide Web Consortium

There are 2 basic ways to add css to your html page:

External (linked)
Internal

External

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

External methods are often applied to dynamic web programming, CSS documents are placed separately, this method aims to maintain the neatness of program documentation, and also makes it easier for development purposes.

Internal (embedded)

<head>
<style> p {color: red} </style>
</head>

This direct (internal) style addition only applies to html documents. This kind of internal style addition is most often found on static websites such as blogger.

Internal (inline)

<p style="color: red">Red Text</tag>

This kind of internal style addition is called the inline method, where the addition of style attributes starts from the opening tag (<>) of each of your html elements, not the closing tag (</>). This kind of style is only done for specific purposes.

2. CSS Selectors

CSS selectors are a set of CSS rules for selecting the desired style model. Let's take a look at some types of selectors and a brief explanation of them!

p = Type (element)
# = ID
. = Class

Type (element) selector

body {declaration}
p {declaration}
h1 {declaration}
ul {declaration}

The simplest selector is type (element), where the way to target an HTML element is by declaring the element name in CSS format.

Various important type (element) selectors

The essential selector types (elements)

Div Element

The div element allows you to group a set of elements together in a single block.

<div id="head">
<a bunch of elements></a>
</div>

Span Element

The span element has similarities with the div element, except that span tends to be used to group characters in one block, in many cases often applied to paragraph content, while div (divis) is used to group several elements into one block (division).

<p>Here is some text <span class="red-text">
with a span</span> added.</p>

Difference between Element selector and ID or Class

The "element" selector is based on the html element, so its naming cannot be free, because it refers to the names of the elements in the html markup. Unlike the "id" and "class" selectors, the naming of both is free, just like we give variable names in other programming languages.

ID Selector

Before we add the id selector to the HTML element, we need to declare it first, the rule is to use the (#) sign as in the example below:

#logo {declaration}

Then, we can add it to every element in the HTML that we want,

<img id="logo" src="" alt="">

Class Selector

The concept is the same as ID, only it has different rules, namely class declaration using the (.) symbol, as in the example below:

.coba {declaration}

Then, we can add it to every element in the HTML that we want,

<ul class="coba">

Difference between ID and Class selectors

The most basic difference between ID and CLASS is that there is only one ID on the page, but it has several CLASSES. ID is more specific than CLASS. Each element can have both (ID and CLASS).

Illustration of ID vs CLASS Selector

Descendant Selectors (Descendant Selectors)

Selectors within selectors, meaning that we can use the parent selector including its descendants or only the descendant selectors, as exemplified below:

#sidebar .author {declaration}

So, when we implement it on an HTML element it becomes like this:

<div id="sidebar">
<p class="author"></p>
</div>

The example above is an implementation of the author (class) selector which is a descendant of sidebar (id).

Multiple Classes

Elements can have multiple classes, allowing you to have more control over how to declare them without spaces, for example:

.contoh.time {declaration}

Then, the implementation on the HTML element is as follows:

<div class="contoh time">
<h1></h1>
</div>

Combination of ID and several Classes

An element can have both (ID and Class), but each element can only have one ID, while Class can be more than one. Example:

#wrapper.coba.time {declaration}

Implementation on html elements:

<div id="wrapper" class="coba time">
<h1></h1>
</div>

Hope this is useful & happy learning!

Substance:

Understanding CSS
Facts About Using CSS
3 Ways to Input CSS into HTML
Understanding Selectors, Properties and Values
5 Types of CSS Selectors
Practice Using CSS Selectors

1. Understanding CSS

It stands for "Cascading Style Sheets" which means The process of combining several style sheets and resolving conflicts or The process of combining several style sheets and resolving conflicts between them. namely the standard for creating and using styles for structured documents, in order to shorten the writing of HTML tags such as fonts, colors, text and tables to be more concise so that there is no repetition of writing. [Ref: http://people.opera.com/howcome/2006/phd/#h-357 ].

2. Facts About Using CSS

It is supported by most recent browsers, but not supported by older browsers.
More flexible in layout position placement
Keep HTML minimal or use minimal tags.

3. 3 Ways to Input CSS into HTML

1. Inline Style Method

2. Internal Style Sheets Method

So that it gives a mass effect on <h1>

3. External Style Sheets Method

In this method, the CSS page or CSS file stands alone with the file extension.css then to call it from the HTML page, the way is to include a link to the file (can be online or offline). Here is an offline example:

The following is the contents of the file "learn css3.css";

So the effect will be the same as before;

4. Understanding Selectors, Properties and Values

Selector is the HTML element/tag that you want to style.
Properties are the properties that you want to apply to the selector, such as text color, background color, distance between elements, borders and so on.
Meanwhile, Value is the value.

5 Types of CSS Selectors

1. Universal Selector is a pattern used to 'search' for a tag in HTML.

Example:

*{
color: blue;
background-color: white;
}

2. Element Type Selector or Tag Selector is a term for a selector whose value is the HTML tag itself. Example:

h1 {
text-decoration: underline;
}

p {
font-size:14px;
}

3. Class Selector. Class Selector will 'search' for all tags that have a class attribute with the appropriate value. Example:

.paragraf_pertama {
color: red;
}
.judul {
font-size:20px
}

Implementation in HTML:

4. ID Selector. Its usage is similar to class selector. Example:

#paragraf_ pembuka {
color: red;
}

#judul utama {
font-size:20px
}

Implementation in HTML:

5. Attribute Selector

This selector will search for all tags that have the specified attribute. Example:

[href] {
font-size:20px ;
}

[type="submit"] {
width:30px;
}

6. Practice Using CSS Selectors

<!DOCTYPE html>
<html>
<head>
 <title>Hello World, Latihan Membuat Halaman (title)</title>
</head>
<body>
<style type="text/css">
h1 { background-color:black; color:white;}
h3 { font-style:strong; color:blue; }
h2 { font-style:italic; color:green; }
p { color: red; }
</style>
<!-- element semantik harus berada diantara tag body -->
<!-- <header>...</header> Pada umumnya berisi logo, slogan, navigasi,
atau form pencarian.-->
<header>Pemrograman Web Statis (header) </header>

<!-- <nav>...</nav> element nav, digunakan untuk membuat menu link navigasi -->
<nav>
<ul>
<li><a href="www.gatewan.com">HOME (li)</a></li>
<li><a href="http://www.gatewan.com/2014/07/about-gatewawan.html">About Me (li)</a></li>
<li><a href="http://www.gatewan.com/2014/11/contact-us.html">Buku Tamu (li)</a></li>
</ul>

<!-- <article>...</article> element ini digunakan untuk konten artikel, berita atau opini.
jika dalam satu halaman hanya terdiri 1 artikel, bisa saja langsung menggunakan
konten <section>...</section>, akan tetapi itu menyalahi aturan semantik pada HTML5,
jadi meskipun artikel cuman 1 tetap harus menggunakan elemen <article>...</article> -->
<article>
 <header>
  <h1>
  Artikel Ke-1 (h1)
  </h1>
 </header>
<br />
<br />
  <!-- <section>...</section> element section, digunakan untuk menunjukan
  bagian yang berbeda pada sebuah halaman web anda. section bisa digunakan
  lebih dari satu, sesuai kebutuhan. misal section pada artikel, section
  pada menu samping (a side). -->
  <section>
  #Artikel Pertama, Ini adalah latihan pertama saya dalam belajar HTML5 Tingkat Pemula (section)
  </section>

</article>
<br />
<br />
<article>
 <header>

  <!-- <hgroup>...</hgroup> element ini biasa digunakan pada artikel, untuk pengelompokan
  tag heading yang lebih dari satu. -->
  <hgroup>
   <h1>Pemrograman Web Statis (h1) </h1>
   <h2>Menggunakan HTML5 Tingkat Dasar (h2) </h2>
   <h3>Oleh Wawan Beneran (Newbie) (h3) </h3>
  </hgroup>
<br />
<br />
 </header>
  <section>
  #Artikel Kedua, Ini adalah latihan pertama saya dalam belajar HTML5 Tingkat Pemula (section)
  </section>
<br />
<br />
  <!-- <p>...</p> element tag paragraf ini digunakan untuk mengindikasikan suatu paragrap
  dalam element artikel.-->
  <p>
  #Ini Paragraph pertama, dummy text dummy text dummy text dummy text dummy text dummy text
  dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text
  dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text
  dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text.
  (p)
  </p>
<br />
<br />
  <p>
  #Ini Paragraph kedua, dummy text dummy text dummy text dummy text dummy text dummy text
  dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text
  dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text
  dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text.
  (p)
  </p>
<br />
<br />
  <!-- <aside>...</aside> element ini dirancang berada pada element artikel, biasa digunakan
  untuk menampilkan berita terkait, kutipan atau gambar terkait.-->
  <aside>Rekomendasi Artikel Terkait "Sejarah HTML5" (aside)</aside>
  <aside>Rekomendasi Artikel Terkait "Pengembang HTML5" (aside)</aside>

</article>
<br />
<br />
<!-- <figure>...<figcaption>...</figcaption></figure> element figure ini dirancang untuk menampilkan
data personal, sedangkan figcaption untuk menampilkan keterangan gambar. -->
<figure>
<center>
<img width="150" height="150" src="https://lh3.googleusercontent.com/-OEU6BpqUlaI/AAAAAAAAAAI/AAAAAAAAJQU/5OVty3udCSQ/s120-c/photo.jpg" alt="ini logo gatewan" />
<figcaption>
Ini merupakan Icon Aplikasi Gatewan (figcaption)
</figcaption>
</center>
</figure>
<br />
<br />
<br />
<br />
<!-- <footer>...</footer> element footer biasa digunakan untuk
navigasi link tambahan kedua, atau untuk legal /copyright suatu halaman website.-->
<footer># footer -- Copyright <a href="www.gatewan.com">GATEWAN</a> 2015 - All Right Reserved</footer>
</body>
</html>

Save it in *html format and see the result using your favorite browser!

Setting Web Visual Effects with CSS 3

Substance:

Creating a Shadow Effect on Text
Create a frame on an element
Add a curved effect to the frame
Adding a shadow effect to the frame
Creating gradient colors
Create a frame from an image

Creating Display Formats Using CSS

1. Create a Shadow Effect on Text

Syntax formula: text-shadow: h-shadow v-shadow blur color;

Example:

Still using the previous framework, I will try to do it on h2 and h3:

Before

After

The result

2. Create a frame for the element

Property values on the border:

border width
border style
border color

Example:

Before

After

Can be written in detail:

Or by writing one line:

The result

3. Add a curved effect to the frame

By adding the following properties:

The result

4. Add a shadow effect to the frame

Here are the properties that need to be added:

The result

5. Create gradient colors

a) Linear Gradient - Top to Bottom

General formula:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Example:

I will try to give a gradient background to the navigation and change the text color;

Before

After

Don't forget to add the gradient "id" attribute to the element you want, for example I did it on the navigation,

The result

b) Diagonal Gradient - Top to Bottom

By adding the following values,

So, the result will be like this,

6. Make a frame from the picture

Syntax Formula: border-image: source slice width outset repeat;

Example:

I will try to add a border image to the gatewan icon;

Before

After

And

The result

Creating Flexbox & Columns with CSS 3

1. Column

With CSS3, you can create multiple columns to place text in, while you will also learn about some column properties as follows:

column count
column gap
column rule

2. Determine the Number of Columns

For example, I will try to arrange the layout of the following elements:

Before

After

And

The result

3. Determine the distance between columns

By adding the following property to the columns class;

So, the result will be as below, you can compare the result below with the result above before setting the distance between columns.

4. Setting Lines Between Columns

By adding the following properties to the columns class;

The result

5. Flexbox

Used to organize website page data in the form of multiple rows and columns. For more details, see the following example;

Note: Not all browsers support this flexible box property, including my Chrome, so the result will look like this;

Style:

The result

How to Create a Box with CSS

There are 5 basic properties to define a "Box" in CSS:

Display
Width and Height
Padding
Margins
Border

Defining Box Model Dimensions with CSS

All HTML elements can be thought of as blocks. In CSS, the term "box model" is used when we talk about design and layout.

CSS Box is the basis of a box that wraps certain HTML elements, and consists of; margin, border, padding, and content.

1. Total Dimension

The actual width or height of an object is the total of the content width, padding, borders, and margins.

.size-me {
width: 200px;
padding: 10px;
border: 2px;
margin: 20px;
}

So the actual width is 254px, with the following details:

content: 200px
padding-left: 10px
padding-right: 10px
border-right: 2px
border-left: 2px
margin-right: 20px
margin-left: 20px

2. Display Properties

By default, your html elements have a display property, either inline or block.

The block element takes the available width, and forces lines above and below it. Examples include <p>, <div>, <ul>, <blockquote> and all headers.

Inline elements can be inserted inside block elements or other inline elements and do not require creating additional space or line breaks. Example: <img>, <em>, <strong>, <a>, dan <span>.

There are 4 values you can give to the display property:

display: block;
display: inline;
display: inline-block;
display: none;

display: inline-block is a special value that allows an element to remain inline with its elements, but you can still control its dimensions as if it were a block element.

display: none; (value used to remove an element).

Example:

By default, an element <li> is useful for setting display: block. If we want to set it with css, then we need to do the following:

STYLE (CSS)

li {display: inline-block;}

Next, make changes to the HTML elements, as below:

HTML

3. Define Dimensions: width and height

You can set the width and height of any element that has a display property such as block or inline-block. Like type, you can set dimensions in pixels (px), ems, or percentage (%). Any width setting in pixels is called fixed-width, while a width setting in ems or percentage is called flexible-width.

4. Defining Dimensions: min- and max-

Instead of defining an element's absolute width and height, you can also set it using a maximum/minimum. This allows your element to be more flexible to the browser or its parent element. The idea of making content flexible so that it can adjust to the user's browser/device is at the heart of WHAT IS CALLED RESPONSIVE DESIGN.

5. Defining Dimensions: padding and margin

You can set an element using properties like padding and margin in CSS. These dimensions can also be set using pixel, ems or percentage (%) values.

.space-me {
padding: 10px;
margin-bottom: 20px;
}

6. Collapsing margins (collapsing margins)

When two or more margins collapse, the resulting margin width is the "maximum width of collapsing margins".

In the example below, the margin of box1 is higher than box2, so the margins cannot be added simultaneously.

7. CSS Shorthand

When you want to simplify the settings of padding, margins and borders, which previously used more lines of code;

.box {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
}

To make it simpler (save lines of code), like this;

.box {
padding: 10px 15px 10px 15px;
}

Note: Only one space is used to separate each value!

So, the value is shown as clockwise, so (padding: top right bottom left). Here is the illustration:

Meanwhile, if you want the top and bottom values to be the same, for example 10px, while the left and right are also the same, for example 15px, then the way to declare it in a shorthand style is as follows:

.box {
padding: 10px 15px;
}

Note: Only one space is used to separate each value!

Where the first value applies to top and bottom, while the second value applies to left and right. Here's the illustration:

8. Defining borders

You can create a border around an element using CSS. You can create the same border on each side. You can also set the border color and width according to the desired element.

There are 3 properties that can be used to define a border:

border-width: 1px;
border-style: solid; (dotted, dshed, etc)
border-color: #666666;

The way to declare borders can also be simplified, for example:

Before

.box {
border-width: 1px;
border-style: solid;
border-color: #888888
}

After

.box {
border: 1px solid #888888;
}

Note: Only one space is used to separate each value!

How to Set Box Position with CSS

There are 4 basic ways to declare a box position:

float: left (or right)
position: relative
position: fixed
position: absolute

Positioning Boxes with CSS

1. Position: static

Static position defaults to "normal flow"

On a web page, block boxes are positioned one above the other in order using HTML. Like a stack from top left to bottom. The distance between each box is defined by the top and bottom margins, collapsing into a single unit.

Below is an example of before and after positioning:

Before

After

2. Float

Float elements will change an element out of the default or "normal flow" rules by shifting right or left. The content inside will also shift. Float elements must have a width property with a minimum value.

.photo {
float: left;
max-width: 150px;
}

The result is like this photo example:

3. Positioning Properties

There are 4 values you can add to the position property:

static makes elements sort as they are in the document, this is the default rule.
relative makes the element position relative to the static position, so "left:20" will add 20 pixels to the left of the element.
absolute makes the element position relative to the first position (not static) or to the parent element (usually the parent of position: relative).
fixed makes the element position relative to the browser window.

Example:

~.box {
 width: 300px;
 height: 300px;
 border: 1px solid #333;
 margin: 10px;
 display: inline-block;
}

.relative {
 position: relative;
 top: 50px;
 left: -50px;
}

.fixed {
 position: fixed;
 bottom: 0;
 left: 0;
}

.box.absolute {
 position: relative;
}

.box.absolute p {
 position: absolute;
 top: 0;
 right: 0;
 background: #444;
 padding: 10px;
 margin: 0;
 color: #fff;
}

4. Relative

Relative positioning shifts an element out of its normal/default position, allowing you to move it “relative” to that location. The space taken from its original location is retained in the flow.

Example:

.date {
position: relative;
top: 40px;
left: -105px;
}

Results:

5. Fixed

Fixed elements serve to retrieve complete documents from the stream, and are positioned relative to the browser window.

Example:

.create-change {
position: fixed;
bottom: 40px;
right: 0;
}

Results:

6. Absolute

An element is positioned relative to its starting position (not static) or parent element. The element and its entire space are taken out of the flow. In the example below the parent element ".post" is assigned a relative position value, allowing us to position its child element ".icon" within it.

Example:

.post {
position: relative;
}

.icon {
position: absolute;
left: -60px;
right: 0;
}

Results: