Pemrograman Web 3 - CSS Basic Part 2

CSS Outline
The CSS outline properties specify the style, color, and width
of an outline.
An outline is a line that is drawn around elements (outside the
borders) to make the element "stand out".

CSS Outline Style
The outline-style property specifies the style of the outline. The outline-style property can have
one of the following values:
• dotted - Defines a dotted outline
• dashed - Defines a dashed outline
• solid - Defines a solid outline
• double - Defines a double outline
• groove - Defines a 3D grooved outline. The effect depends on the outline-color value
• ridge - Defines a 3D ridged outline. The effect depends on the outline-color value
• inset - Defines a 3D inset outline. The effect depends on the outline-color value
• outset - Defines a 3D outset outline. The effect depends on the outline-color value
• none - Defines no outline
• hidden - Defines a hidden outline

Example
p {
border: 1px solid black;
outline-color: red;
}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

CSS Text
Text Color -> color: #f0f0f0;
Alignment -> text-align: center; (left, right, justify)
Decoration -> text-decoration: overline; (line-through, underline)
Indentation -> text-indent: 25px;
Letter Spacing -> letter-spacing: -3px;
Text Tranformation -> text-transform: uppercase; (lowercase,
capitalize)
Line Height -> line-height: 0.7;
Text Direction -> direction: rtl;
Word Spacing -> word-spacing: 15px;
Text Shadow -> text-shadow: 4px 3px blue;

CSS Font
In CSS, there are two types of font family names:
• generic family - a group of font families with a similar look
(like "Serif" or "Monospace")
• font family - a specific font family (like "Times New Roman" or
"Arial")
Generic family Font family Description
Serif
Times New Roman
Georgia
Serif fonts have small lines at the ends on some characters
Sans-serif
Arial
Verdana
"Sans" means without - these fonts do not have the lines at the
ends of characters
Monospace
Courier New
Lucida Console
All monospace characters have the same width

CSS Font Family
The font-family property should hold several font names as a
"fallback" system. If the browser does not support the first font, it
tries the next font, and so on.
p {
font-family: "Times New Roman", Times, serif;
}
Note: Untuk penulisan nama font yang menggunakan lebih dari
satu kata, gunakan tanda petik (“…..”)

CSS Font Style
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}

CSS Font Size
The font-size property sets the size of the text. Being able to manage the text size is
important in web design. However, you should not use font size adjustments to make
paragraphs look like headings, or headings look like paragraphs.
The font-size value can be an absolute, or relative size.
Absolute size:
• Sets the text to a specified size
• Does not allow a user to change the text size in all browsers (bad for accessibility
reasons)
• Absolute size is useful when the physical size of the output is known
Relative size:
• Sets the size relative to surrounding elements
• Allows a user to change the text size in browsers

Set font-size with pixels
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}

Set font-size with Em
To allow users to resize the text (in the browser menu), many
developers use em instead of pixels.
1em is equal to the current font size. The default text size in
browsers is 16px. So, the default size of 1em is 16px.
The size can be calculated from pixels to em using this
formula: pixels/16=em

Example em unit
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}

CSS Font Weight
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}

CSS Font Variant
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
In a small-caps font, all lowercase letters are converted to
uppercase letters. However, the converted uppercase letters
appears in a smaller font size than the original uppercase letters in
the text.

CSS Icon : Font Awesome
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
Some Font Awesome icons:





Styled Font Awesome icons (size and color):

CSS Icon : Bootstrap Icons
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body class="container">
Some Bootstrap icons:





Styled Bootstrap icons (size and color):

CSS Icon : Google Icons
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Some Google icons:
cloud
favorite
attachment
computer
traffic
Styled Google icons (size and color):
cloud
cloud
cloud
cloud

CSS Styling Links
Links can be styled differently depending on what state they
are in.
The four links states are:
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked

Example
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}

CSS Text Decoration Links
a:link {
text-decoration: none;
}
a:visited {
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}

CSS BG Color Links
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}

Make a button links with CSS
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}

HTML Lists and CSS Properties
In HTML, there are two main types of lists:
• unordered lists (<ul>) - the list items are marked with bullets
• ordered lists (<ol>) - the list items are marked with numbers
or letters
The CSS list properties allow you to:
• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colors to lists and list items

CSS Lists Properties
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;
}

CSS Styling List with Colors
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
margin: 5px;
}

CSS Table Properties
• Text Align (Horizontal) -> text-align: left; (center, right)
• Text Align (Vertical) -> vertical-align: top; (center, bottom)
• Table Padding -> padding: 10px; (sama halnya dengan
padding border)
• Dividers -> bottom-border: 1px solid #000; (sama seperti
pembuatan border, bisa gunakan syntax border: TOPpx
RIGHTpx BOTpx LEFTpx)
• Hover Table -> tr:hover {background-color: #f5f5f5}
• Striped Table Colors -> tr:nth-child(even) {background-
color: #f2f2f2} (ada 2 pilihan, yaitu even & odd)
• Responsive Table -> overflow-x:auto

CSS Table : Border Spacing &
Collapse
length(h) length(v) • Specifies the distance between the borders of adjacent cells in px, cm, etc.
Negative values are not allowed. If one length value is specified, it
specifies both the horizontal and vertical spacing
• If two length values are specified, the first sets the horizontal spacing and
the second sets the vertical spacing
separate • Borders are detached (border-spacing and empty-cells properties will not
be ignored). This is default
collapse • Borders are collapsed into a single border when possible (border-spacing
and empty-cells properties will be ignored)
border-spacing: 10px 50px;
border-collapse: separate|collapse|initial|inherit;

CSS Display
Override Lists Default Display -> li {display: inline;}
Display None -> display: none;
Visibility -> visibility: hidden;
(visible|hidden|collapse|initial|inherit)

CSS Max Width
Setting the width of a block-level element will prevent it from
stretching out to the edges of its container. Then, you can set the
margins to auto, to horizontally center the element within its
container. The element will take up the specified width, and the
remaining space will be split equally between the two margins
div.ext-width {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}

Using max-width instead, in this situation, will improve the
browser's handling of small windows. This is important when
making a site usable on small devices.
div.ext-maxwidth {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}

Source
• w3schools.com
• stackoverflow.com
• Font Awsome, Bootstrap, & Google

Pemrograman Web 3 - CSS Basic Part 2

More Related Content

What's hot (19)

Similar to Pemrograman Web 3 - CSS Basic Part 2 (20)

More from Nur Fadli Utomo (20)

Recently uploaded (20)

Pemrograman Web 3 - CSS Basic Part 2