forbeginners.html workshop.

css

1
2
3
4
Website ‘Designing’ {
5
6
[CSS part 2 Workshop]
7
8
9 < lets learn more about css >
10
11
12
13 }
14

Programming Language
 forbeginners.html workshop.css

1
2
Introduction; {
3
4
5 ‘CSS is the language we use to style an HTML document.
6
CSS describes how HTML elements should be displayed.’
7
8 <p> CSS stands for Cascading Style Sheets
9 CSS describes how HTML elements are to be
10 displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the
11 layout of multiple web pages all at once
12 External stylesheets are stored in CSS files
13 </p>
14 }
Programming Language
 forbeginners.html workshop.css

1
2
What Is this ‘Topic About ?’ {
3
Languages
4
5 CSS 80% HTML 20%
6
7 < some HTML used in
< This topic focuses CSS >
example >
8
9
10 Create a web page
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 Box
3
4
Model {
5
All HTML elements can be considered as boxes.
6
The CSS Box Model
7
In CSS, the term "box model" is used when talking about
8 design and layout.
9 The CSS box model is essentially a box that wraps around
10 every HTML element. It consists of: content, padding,
11 borders and margins. The image below illustrates the box
12 model:
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 Box
3
4
Model {
5 Explanation of the different parts:
6 Content - The content of the box, where text and images appear
7 Padding - Clears an area around the content. The padding is
8 transparent
9 Border - A border that goes around the padding and content
10 Margin - Clears an area outside the border. The margin is
11
transparent
The box model allows us to add a border around elements, and to
12
define space between elements.
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
Lists {
4 In HTML, there are two main types of lists:
5 unordered lists (<ul>) - the list items are marked with bullets
6 ordered lists (<ol>) - the list items are marked with numbers or
7 letters
8
9 The CSS list properties allow you to:
10 Set different list item markers for ordered lists
11
Set different list item markers for unordered lists
Set an image as the list item marker
12
Add background colors to lists and list items
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 Different List
3
4
Item Markers {
5
6
7
The list-style-type property specifies the type of list item marker.
8
9 The following example shows some of the available list item
10 markers:
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 Different List
3
4
Item Markers {
5
6
7
8
9 Examples
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1 Position
2
3
The List Item
4 Markers {
5
6
The list-style-position property specifies the position of the list-item
7
markers (bullet points).
8
9 "list-style-position: outside;" means that the bullet points will be
10 outside the list item. The start of each line of a list item will be
11 aligned vertically. This is default
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 List Shorthand
3
4
Properties {
5
6
7
8 The list-style property is a shorthand property. It is used to set all the
9 list properties in one declaration
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 List Shorthand
3
4
Properties {
5 When using the shorthand property, the order of the property values are:
6 list-style-type (if a list-style-image is specified, the value of this property will
7 be displayed if the image for some reason cannot be displayed)
8 list-style-position (specifies whether the list-item markers should appear
9 inside or outside the content flow)
10 list-style-image (specifies an image as the list item marker)
11 If one of the property values above is missing, the default value for the
12 missing property will be inserted, if any.
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 Styling List
3
4
With Colors {
5
6
7
We can also style lists with colors, to make them look a little more interesting
8
9 Anything added to the <ol> or <ul> tag, affects the entire list, while
10 properties added to the <li> tag will affect the individual list items:
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
CSS Tables {
4
5
6
7
8
9 The look of an HTML table can be greatly improved with CSS
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
Table Borders {
4
5
6
7
To specify table borders in CSS, use the border property.
8
9 The example below specifies a solid border for <table>, <th>, and
10 <td> elements:
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
Table Borders {
4
5
6
7
8
9 Examples;
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 Full-Width
3
4
Table {
5
6
7 We can also style lists with colors, to make them look a little more interesting
8
9 Anything added to the <ol> or <ul> tag, affects the entire list, while
10 properties added to the <li> tag will affect the individual list items:
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 Double
3
4
Borders {
5
6
7 Notice that the table in the examples above have double borders. This is
8 because both the table and the <th> and <td> elements have separate
borders.
9
10
To remove double borders, take a look at the example below.
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 Double
3
4
Borders {
5
6
7
8 Collapse Table Borders
The border-collapse property sets whether the table borders should be
9
collapsed into a single border:
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 Double
3
4
Borders {
5
6
7
8 If you only want a border around the table, only specify the border property
9 for <table>:
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS
3
4
Table Size {
5
Table Width and Height
6 The width and height of a table are defined by the width and height
7 properties.
8
9 The example below sets the width of the table to 100%, and the height of the
10 <th> elements to 70px:
11
12 To create a table that should only span half the page, use width: 50%:
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS
3
4
Table Alignment {
5 Horizontal Alignment
6 The text-align property sets the horizontal alignment (like left, right, or
7 center) of the content in <th> or <td>.
8
9
By default, the content of <th> elements are center-aligned and the
content of <td> elements are left-aligned.
10
11
To center-align the content of <td> elements as well, use text-align:
12 center:
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS
3
4
Table Alignment {
5
6
7
8 To left-align the content, force the alignment of <th> elements to be left-
9 aligned, with the text-align: left property:
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS
3
4
Table Alignment {
5 Vertical Alignment
6 The vertical-align property sets the vertical alignment (like top, bottom, or
7 middle) of the content in <th> or <td>.
8
9
By default, the vertical alignment of the content in a table is middle (for
both <th> and <td> elements).
10
11
The following example sets the vertical text alignment to bottom for <td>
12 elements:
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS
3
4
Table Style {
5
6
7
8 Table Padding
9
To control the space between the border and the content in a table, use the
padding property on <td> and <th> elements:
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS
3
4
Table Style {
5
6
7 Horizontal Dividers
8
9 Add the border-bottom property to <th> and <td> for horizontal
10 dividers:
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS
3
4
Table Style {
5
6
7
8 Hoverable Table
9 Use the :hover selector on <tr> to highlight table rows on mouse over:
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS
3
4
Table Style {
5
6
7 Striped Tables
8
9 For zebra-striped tables, use the nth-child() selector and add a background-
10 color to all even (or odd) table rows:
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS
3
4
Table Style {
5
6
7
8 Table Color
9
The example below specifies the background color and text color of <th>
elements:
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS
3
4
Responsive Table {
5
6
7
8 Table Color
9
The example below specifies the background color and text color of <th>
elements:
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS
3
4
Responsive Table {
5
Table Color
6 The example below specifies the background color and text color of <th>
7 elements:Responsive Table
8 A responsive table will display a horizontal scroll bar if the screen is too
9 small to display the full content:
10
11 Add a container element (like <div>) with overflow-x:auto around the
12 <table> element to make it responsive:
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS
3
4
Responsive Table {
5
Table Color
6 The example below specifies the background color and text color of <th>
7 elements:Responsive Table
8 A responsive table will display a horizontal scroll bar if the screen is too
9 small to display the full content:
10
11 Add a container element (like <div>) with overflow-x:auto around the
12 <table> element to make it responsive:
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
CSS Forms {
4
5
6
7
8
9 The look of an HTML form can be greatly improved with CSS
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
CSS Forms {
4
5
6
7
8 Styling Input Fields
9 Use the width property to determine the width of the input field:
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
CSS Forms {
4
5
6
7
8 Styling Input Fields
9 Use the width property to determine the width of the input field:
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
CSS Forms {
4
5
6 The example above applies to all <input> elements. If you only
7 want to style a specific input type, you can use attribute selectors:
8
9 input[type=text] - will only select text fields
10 input[type=password] - will only select password fields
11
input[type=number] - will only select number fields
etc..
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
CSS Forms {
4
5
6
7 Note that we have set the box-sizing property to border-box. This
8 makes sure that the padding and eventually borders are included in
9 the total width and height of the elements.
10 Read more about the box-sizing property in our CSS Box Sizing
11
chapter.
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
CSS Forms {
4
5
6
7
8 Bordered Inputs
9 Use the border property to change the border size and color, and
10 use the border-radius property to add rounded corners:
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
CSS Forms {
4
5
6
7
8
9 If you only want a bottom border, use the border-bottom property:
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
CSS Forms {
4
5
6
7
8 Colored Inputs
9 Use the background-color property to add a background color to the
10 input, and the color property to change the text color:
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
CSS Forms {
4
5 Focused Inputs
6 By default, some browsers will add a blue outline around the input
7 when it gets focus (clicked on). You can remove this behavior by
8 adding outline: none; to the input.
9
10 Use the :focus selector to do something with the input field when it
11 gets focus:
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
CSS Forms {
4
5
6 Input with icon/image
7 If you want an icon inside the input, use the background-image
8 property and position it with the background-position property. Also
9 notice that we add a large left padding to reserve the space of the
10 icon:
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
CSS Forms {
4
5
6 Input with icon/image
7 If you want an icon inside the input, use the background-image
8 property and position it with the background-position property. Also
9 notice that we add a large left padding to reserve the space of the
10 icon:
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
CSS Forms {
4
5
6
Animated Search Input
7
In this example we use the CSS transition property to animate the
8
width of the search input when it gets focus. You will learn more
9
about the transition property later, in our CSS Transitions chapter.
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
CSS Forms {
4
5
6
7 Styling Textareas
8 Tip: Use the resize property to prevent textareas from being resized
9 (disable the "grabber" in the bottom right corner):
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
CSS Forms {
4
5
6
7
8 Styling Select Menus
9
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
CSS Forms {
4
5
6
7
8 Styling Input Buttons
9
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2
3
CSS Forms {
4
5 Responsive Form
6 Resize the browser window to see the effect. When the screen is less
7 than 600px wide, make the two columns stack on top of each other
8 instead of next to each other.
9
10 Advanced: The following example uses media queries to create a
11 responsive form. You will learn more about this in a later chapter.
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS Website
3
4
Layout {
5
6
7
Website Layout
8
A website is often divided into headers, menus, content and a footer:
9
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS Website
3
4
Layout {
5
6
Header
7
A header is usually located at the top of the website (or right below
8
a top navigation menu). It often contains a logo or the website
9
name:
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS Website
3
4
Layout {
5
6
7 Navigation Bar
8 A navigation bar contains a list of links to help visitors navigating
9 through your website:
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS Website
3
4
Layout {
5 Content
6 The layout in this section, often depends on the target users. The
7 most common layout is one (or combining them) of the following:
8
9 1-column (often used for mobile browsers)
10 2-column (often used for tablets and laptops)
11 3-column layout (only used for desktops)
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS Website
3
4
Layout {
Content
5 The layout in this section, often depends on the target users. The
6 most common layout is one (or combining them) of the following:
7
8 1-column (often used for mobile browsers)
9 2-column (often used for tablets and laptops)
10 3-column layout (only used for desktops)
11 We will create a 3-column layout, and change it to a 1-column layout
12
on smaller screens:
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS Website
3
4
Layout {
Content
5 The layout in this section, often depends on the target users. The
6 most common layout is one (or combining them) of the following:
7
8 1-column (often used for mobile browsers)
9 2-column (often used for tablets and laptops)
10 3-column layout (only used for desktops)
11 We will create a 3-column layout, and change it to a 1-column layout
12
on smaller screens:
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS Website
3
4
Layout {
Unequal Columns
5 The main content is the biggest and the most important part of your
6 site.
7
8 It is common with unequal column widths, so that most of the space
9 is reserved for the main content. The side content (if any) is often
10 used as an alternative navigation or to specify information relevant
11 to the main content. Change the widths as you like, only remember
12
that it should add up to 100% in total:
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS Website
3
4
Layout {
5
6
7 Footer
8 The footer is placed at the bottom of your page. It often contains
9 information like copyright and contact info:
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS Website
3
4
Layout {
5
6
Responsive Website Layout
7
By using some of the CSS code above, we have created a responsive
8
website layout, which varies between two columns and full-width
9
columns depending on screen width:
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS Image
3
4
Gallery {
5
6
7
Image Gallery
8
The following image gallery is created with CSS
9
10
11
12
13
14 }
Programming Language
 forbeginners.html workshop.css

1
2 CSS Image
3
4
Gallery {
5
6
7 Responsive Image Gallery
8 How to use CSS media queries to create a responsive image gallery
9 that will look good on desktops, tablets and smart phones.
10
11
12
13
14 }
Programming Language