Scribd
Upload
19 views25 pages

CSS Web Layout Techniques Explained

This document discusses CSS layout for web pages. It begins with an introduction to CSS and its basic syntax and properties. It then covers the three methods for writing CSS: inline, internal, and external stylesheets. The document proceeds to describe common layout elements like headers, navigation bars, content sections, and footers. It provides examples of CSS code for styling these elements and creating a responsive two-column layout. In the conclusion, it thanks the reader.

Uploaded by

Ilham Fathurrahman
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
19 views25 pages

CSS Web Layout Techniques Explained

This document discusses CSS layout for web pages. It begins with an introduction to CSS and its basic syntax and properties. It then covers the three methods for writing CSS: inline, internal, and external stylesheets. The document proceeds to describe common layout elements like headers, navigation bars, content sections, and footers. It provides examples of CSS code for styling these elements and creating a responsive two-column layout. In the conclusion, it thanks the reader.

Uploaded by

Ilham Fathurrahman
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd

PROGRAM STUDI : TEKNIK INFORMATIKA

SI283 Web Programming

PERTEMUAN 4

Layout Web dengan CSS

H. Haris, [Link], [Link]


Flow Content

CSS Layout Web

Penulisan CSS

CSS Syntax

Dasar CSS
Dasar CSS

• CSS stands for Cascading Style Sheets


• CSS 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
• External stylesheets are stored in CSS
files
CSS Syntax

• A CSS rule-set consists of a selector and


a declaration block:

• The selector points to the HTML element


you want to style.
CSS Syntax

• The declaration block contains one or


more declarations separated by
semicolons.
• Each declaration includes a CSS property
name and a value, separated by a colon.
• A CSS declaration always ends with a
semicolon, and declaration blocks are
surrounded by curly braces.
Penulisan CSS

• Ada tiga cara menuliskan CSS, yaitu


inline, internal dan external. Ketiganya
dapat Anda gunakan sesuai dengan
kebutuhan. Berikut penjelasan masing-
masing metode dalam penulisan CSS:
– Inline
– Internal
– External
Inline CSS

• Yaitu menuliskan CSS dengan


menggunkan atribut style yang langsung
dituliskan di dalam tag HTML.
Internal CSS

• Yaitu penulisan CSS menggunakan tag


<style> ... </style> yang ditulis di dalam
tag <head> ... </head>.
External CSS

• Yaitu penulisan CSS dimana skrip CSS


disimpan dalam file tersendiri dengan
extensi .css dan terpisah dengan file
HTML.
• Untuk menghubungkan file HTML dan
file CSS, file CSS dipanggil di dalam tag
<head> ... </head> pada file HTML
seperti berikut:
<link rel=”stylesheet” href=”nama_file.css”>
External CSS

• Skrip HTML
External CSS

• Skrip CSS
CSS Layout Web

• A website is often divided into:


– headers,
– menus,
– content
– footer:
CSS Layout Web
Header Layout Web

• A header is usually located at the top of


the website (or right below a top
navigation menu). It often contains a
logo or the website name:
Navigation Bar

• A navigation bar
contains a list of
links to help visitors
navigating through
your website:
Content

• The layout in this section, often depends


on the target users. The most common
layout is one (or combining them) of the
following:
– 1-column (often used for mobile browsers)
– 2-column (often used for tablets and
laptops)
– 3-column layout (only used for desktops)
Content
Content
Content
Content
Content
Footer

• The footer is placed at the bottom of


your page. It often contains information
like copyright and contact info:
Responsive Website Layout

• By using some of the CSS code above, we


have created a responsive website
layout, which varies between two
columns and full-width columns
depending on screen width:
Responsive Website Layout
Terima Kasih

H. Haris, [Link], [Link]

You might also like