[go: up one dir, main page]
Scribd
Upload
15 views75 pages

CSS-1

Uploaded by

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

CSS-1

Uploaded by

shivamkapoor9876034115
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 75

IT2.

2
Web Concepts
03. CSS 1/2 Mohammed
AbuJarour
22.10.24
* SUBJECT TO CHANGE

Plan

# Date Topic # Date Topic


1 08.10.24 Introduction to Web Technologies 7 19.11.24 Prototyping (static)
HTML 1/2
8 26.11.24 Prototyping (dynamic)
2 15.10.24 HTML 2/2
03.12.24 Design Thinking
3 22.10.24 CSS 1/2 9

4 29.10.24 CSS 2/2 10 10.12.24 WordPress 1/2

5 05.11.24 JavaScript 1/2 11 17.12.24 WordPress 2/2

6 12.11.24 JavaScript 2/2 12 07.01.25 Introduction to DevOps

Mohammed AbuJarour – CSS 1/2 22.10.24 2


Previously
Technology
URI
Browser
(Uniform Resource Identifier)
• Note: The way the browser interprets
and displays HTML files is specified
in the HTML and CSS specifications.
• These specifications are maintained by
the W3C (World Wide Web Consortium)
organization, which is the standards
organization for the web
Resource
HTML
Media
CSS
JavaScript

Mohammed AbuJarour – CSS 1/2 22.10.24 3


Previously
Cascading Style Sheets (CSS)

• 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 was introduced to separate the content from the design
• A CSS rule-set consists of a selector and a declaration block:

Mohammed AbuJarour – CSS 1/2 22.10.24 4


Why CSS?
• CSS is used to define styles for web pages, including the design, layout, and variations in display
for different devices and screen sizes

Design Specification Document


1. Fonts
• Headers use “Georgia”
• Normal text uses “Arial”
2. Colors
• Page background is white
• Headers are in blue
• Normal text in dark cyan
3. Spacing
• …

Mohammed AbuJarour – CSS 1/2 22.10.24 5


Note: Browser’s default styling

• Web browsers make HTML pages readable


by adding some default styling
• For instance, headings are large and bold
and list items have bullets
• Browsers have internal stylesheets
containing default styles
• CSS enables web developers to change this
default styling and introduce additional
stylings

Mohammed AbuJarour – CSS 1/2 22.10.24 6


Three ways to add CSS

There are three ways of inserting a


style sheet in a web page:
1. Inline CSS

2. Internal CSS
3. External CSS

Mohammed AbuJarour – CSS 1/2 22.10.24 7


Example HTML document
<!DOCTYPE html>
<head>
<title>CSS Tutorial</title>
</head>
<body>
<h1>Welcome to CSS</h1>
<h2>What is CSS</h2>
<p>CSS refers to ...</p>
<h2>Why CSS?</h2>
<p>CSS enables ...</p>
<h2>Examples</h2>
<p>Here are some CSS examples:
<ul>
<li>Sample 01</li>
<li>Sample 02</li>
<li>Sample 03</li>
</ul>
</p>
</body>

Mohammed AbuJarour – CSS 1/2 22.10.24 8


Content
+
Inline CSS Design
<!DOCTYPE html>
<head>
<title>CSS Tutorial</title>
</head>

<body style="font-family: Arial; color: darkcyan;">


<h1 style="color: blue; font-family: Georgia;">
Welcome to CSS
</h1>
<h2 style="color: blue; font-family: Georgia;">What is CSS</h2>
<p>CSS refers to ...</p>

<h2 style="color: blue; font-family: Georgia;">Why CSS?</h2>


<p>CSS enables ...</p>
<h2 style="color: blue; font-family: Georgia;">Examples</h2>
<p>Here are some CSS examples:
<ul>
<li>Sample 01</li>
<li>Sample 02</li>
<li>Sample 03</li>
</ul>
</p>
</body>

Mohammed AbuJarour – CSS 1/2 22.10.24 9


Internal CSS Design Content

<!DOCTYPE html> </head>


<head> <body>
<title>CSS Tutorial</title> <h1>Welcome to CSS</h1>
<style>
body { <h2>What is CSS</h2>

font-family: Arial; <p>CSS refers to ...</p>


}
<h2>Why CSS?</h2>

h1, <p>CSS enables ...</p>

h2 {
<h2>Examples</h2>
color: blue;
<p>Here are some CSS examples:
font-family: Georgia;
<ul>
}
<li>Sample 01</li>
p, <li>Sample 02</li>

li { <li>Sample 03</li>

color: darkcyan; </ul>


</p>
}
</style> </body>

Mohammed AbuJarour – CSS 1/2 22.10.24 10


External CSS Content Design

<!DOCTYPE html> body {


<head> font-family: Arial;
<title>CSS Tutorial</title>
<link rel="stylesheet" type="text/css" href="css-04.css"> }
</head>

<body> h1,
<h1>Welcome to CSS</h1>
<h2>What is CSS</h2>
h2 {
<p>CSS refers to ...</p> color: blue;
<h2>Why CSS?</h2> font-family: Georgia;
<p>CSS enables ...</p>
<h2>Examples</h2> }
<p>Here are some CSS examples:
<ul>
<li>Sample 01</li>
p,
<li>Sample 02</li>
li {
<li>Sample 03</li>
</ul> color: darkcyan;
</p>

</body>
css-04.html } css-04.css
Mohammed AbuJarour – CSS 1/2 22.10.24 11
Multiple style sheets

• Multiple style sheets are possible.


• The value from the last read style sheet will be used.
• All styles in a page will “cascade” into a new “virtual” style sheet following these
priorities:
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default

Mohammed AbuJarour – CSS 1/2 22.10.24 12


CSS separates content from design

• HTML was NEVER intended to contain tags for formatting a web page!
• HTML was created to describe the content and structure of a web page
• Development of large websites, where fonts and color information were added to
every single page, became a long and expensive process.
• CSS removes the style formatting from HTML pages

Mohammed AbuJarour – CSS 1/2 22.10.24 13


CSS saves a lot of time
Apply the design
Create a css specifications Done!
tutorial html page (inline css)

Design Specification
Document
1. Fonts
• …
2. Colors
• …
3. Spacing
• …

Oops … more pages! No problem!


Move to internal css

Mohammed AbuJarour – CSS 1/2 22.10.24 14


CSS saves a lot of time

Oops …
new requirements!
Design Specification
Document V 2.0
1. Dark mode
2. Fonts
• …
3. Colors
• …
4. Spacing
• …

• The style definitions are normally saved in external .css files.


• With an external stylesheet file, you can change the look of an
entire website by changing just one file!
Mohammed AbuJarour – CSS 1/2 22.10.24 15
CSS syntax

Selector h1
{ Property Value
Declarations color: blue;
font-size: 12px;

Property Value
}

Mohammed AbuJarour – CSS 1/2 22.10.24 16


CSS selectors – HTML elements

• To target and style an HTML element use an element selector, which directly
matches an HTML element name.
• To target all paragraphs in the document, you can use the selector p.
• This rule turns all paragraphs into dark cyan → p{
color: darkcyan;
• You can target multiple selectors at once, }
by separating the selectors with a comma
• This rule turns all paragraphs and all list items p,li{
into dark cyan → color: darkcyan;
}

Mohammed AbuJarour – CSS 1/2 22.10.24 17


CSS selectors – CSS classes

• The class selector selects HTML elements with a


specific class attribute.

• To select elements with a specific class, write a


period (.) character, followed by the class name in
your CSS.

• CSS classes enable web developers to select a


subset of the elements without changing the others

Mohammed AbuJarour – CSS 1/2 22.10.24 18


CSS selectors – CSS classes
<p>Here are some CSS examples: HTML Browser
<ul>
<li class="beginner">Sample 01</li>
<li class="intermediate">Sample 02</li>
<li class="advanced">Sample 03</li>
</ul>
</p>

.beginner{
color: green;
}

.intermediate{
color: orange;
}
CSS
.advanced{
color: red;
}
Mohammed AbuJarour – CSS 1/2 22.10.24 19
CSS selectors – CSS classes

• To narrow down the selector, rules can have a selector that lists the HTML
element selector along with the class

• For instance, make the difficulty level classes available for list items only
• HTML elements can also refer to more than one class, e.g.,
<p class="beginner highlighted">...</p>

Mohammed AbuJarour – CSS 1/2 22.10.24 20


CSS selectors – CSS classes

<h2> Sample 01 </h2>


<p class="beginner">
This ...
</p>

li.beginner{
color: green;
}

li.intermediate{
color: orange;
}

li.advanced{
color: red;
}

Mohammed AbuJarour – CSS 1/2 22.10.24 21


CSS selectors – id selector

• The id selector uses the id attribute of an HTML element to select a specific


element.

• The id of an element is unique within a page, so the id selector is used to select


one unique element!

• To select an element with a specific id, write a hash (#) character, followed by the
id of the element in the CSS file

Mohammed AbuJarour – CSS 1/2 22.10.24 22


CSS selectors – id selector
HTML

<p id="para1">
CSS refers to Cascading Style Sheets.
</p>

CSS
#para1{
border-color: yellowgreen;
border-style: solid;
padding: 5px;
}

Mohammed AbuJarour – CSS 1/2 22.10.24 23


CSS selectors – CSS grouping

h1{
• The grouping selector selects all HTML color: blue;
font-family: Georgia;
elements to be styled with the same style }

definitions h2 {
color: blue;
• The definitions are grouped to minimize the font-family: Georgia;
}
CSS code h1,
h2 {
• To group selectors, separate each selector with color: blue;
font-family: Georgia;
a comma }

Mohammed AbuJarour – CSS 1/2 22.10.24 24


CSS selectors – CSS simple selectors

Selector Example Example description

.class .intro Selects all elements with class=“intro”

#id #firstname Selects the element with id=“firstname”

* * Selects all elements

element p Selects all <p> elements

element,element,… div, p Selects all <div> elements and all <p> elements

Mohammed AbuJarour – CSS 1/2 22.10.24 25


CSS comments
• /* Headers in blue and use Georgia font*/
• h1,
• h2 {
• color: blue;
• font-family: Georgia;
• }

Mohammed AbuJarour – CSS 1/2 22.10.24 26


CSS colors

• Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA,
HSLA values.
• CSS/HTML support 140 standard color names.
• See list at: https://www.w3schools.com/colors/colors_names.asp

Mohammed AbuJarour – CSS 1/2 22.10.24 27


CSS colors

#para1{
color: DodgerBlue;
background-color: lightyellow;
border-color: yellowgreen;
border-style: solid;
padding: 5px;
}

Mohammed AbuJarour – CSS 1/2 22.10.24 28


CSS RGB colors

• In CSS, a color can be specified as an RGB value, using this formula:


rgb(red, green, blue)

• Each parameter (red, green, blue) defines the intensity of that color between 0
and 255.

• For example, rgb(255, 0, 0) is displayed as red

• To display black, set all color parameters to 0 → rgb(0, 0, 0).

• To display white, set all color parameters to 255 → rgb(255, 255, 255).

• Shades of gray are often defined using equal values for all the 3 light sources
Mohammed AbuJarour – CSS 1/2 22.10.24 29
CSS RGB colors

• In CSS, a color can be specified as an RGB


value, using this formula: rgb(red, green, blue)

• Each parameter (red, green, and blue) defines


the intensity of that color between 0 and 255.

• Shades of gray are often defined using equal


values for all the 3 light sources

Mohammed AbuJarour – CSS 1/2 22.10.24 30


CSS RGBA colors

• RGBA color values are an extension of


RGB color values with an alpha channel –
which specifies the opacity for a color.
• An RGBA color value is specified with:
rgba(red, green, blue, alpha)
• The alpha parameter is a number between
0.0 (fully transparent) and
1.0 (not transparent at all)

Mohammed AbuJarour – CSS 1/2 22.10.24 31


CSS HEX colors

• In CSS, a color can be specified using a


hexadecimal value in the form: #rrggbb

• Where rr (red), gg (green) and bb (blue)


are hexadecimal values between 00 and ff
(same as decimal 0-255).

• For example, #ff0000 is displayed as red

Mohammed AbuJarour – CSS 1/2 22.10.24 32


CSS HSL colors

• Check it out at https://www.w3schools.com/css/css_colors_hsl.asp

Mohammed AbuJarour – CSS 1/2 22.10.24 33


CSS background image

• The background-color property specifies the background color of an element


• The background-image property specifies an image to use as the background of an
element.
• By default, the image is repeated so it covers the entire element
• Experiment with background-repeat and background-position

Mohammed AbuJarour – CSS 1/2 22.10.24 34


CSS background image

body {
font-family: Arial;
background-image: url("draft.png");
}

Mohammed AbuJarour – CSS 1/2 22.10.24 35


CSS border properties
• The CSS border properties allow you to specify the style, width, and color of an
element’s border.
• The border is defined using three properties: border-width, border-style, and
border-color
• The minimum is to set the property border-style
• Each property can be defined separately → border-width: 2px;
border-style: solid;
border-color: yellowgreen;

• To shorten the code, it is also possible to specify all the individual border
properties in one property. border: 2px solid yellowgreen;
• Note: To create rounded borders, set the property border-radius
Mohammed AbuJarour – CSS 1/2 22.10.24 36
CSS margins – example
<h2> Sample 01 </h2>
<p class="beginner">
This example targets beginner users.
</p>

<div>Details</div>
<div id="div1">See problem description</div>
<div id="div2">See solution</div>

div{
border: 1px solid;
}

#div1{
margin: 5px 30px 3px 8px;
}

#div2{
margin: 15px 10px 3px 20px;
}
Mohammed AbuJarour – CSS 1/2 22.10.24 37
CSS margins
• The CSS margin properties are used to • All margin properties can have the following
create space around elements, outside values:
of any defined borders. • auto - the browser calculates the margin
• CSS has properties for specifying the • length - specifies a margin in px, pt, cm, etc.
margin for each side of an element:
• % - specifies a margin in % of the width of
• margin-top
the containing element
• margin-right
• inherit - specifies that the margin should be
• margin-bottom
inherited from the parent element
• margin-left

Mohammed AbuJarour – CSS 1/2 22.10.24 38


CSS margins

• The margin property is a shorthand property for the following individual margin properties:
• margin-top margin-right margin-bottom margin-left

margin-top

1
margin-left 4 2 margin-right

margin-bottom

Mohammed AbuJarour – CSS 1/2 22.10.24 39


CSS padding

• The CSS padding properties are used


to generate space around an
padding-top
element’s content, inside of any
defined borders.
1
• In CSS, there are properties for padding-left 4 2 padding-right
setting the padding for each side of
3
an element
(top, left, bottom, and right).
padding-bottom
• Definition is similar to margin

Mohammed AbuJarour – CSS 1/2 22.10.24 40


CSS padding

<div>Details</div>
<div id="div1">See problem description </div>
<div id="div2">See solution</div>
<div id="div3"> Gallia est omnis divisa in partes tres, quarum. Quisque
ut dolor gravida, placerat libero vel, euismod.</div>

#div3{
padding: 5px 10px 15px 20px;
}

Mohammed AbuJarour – CSS 1/2 22.10.24 41


The CSS box model

• All HTML elements can be considered as boxes.


• In CSS, the term “box model” is used while Margin
addressing design and layout. Border
• The CSS box model is essentially a box that Padding
wraps around every HTML element.
Content
• It consists of margins, borders, padding, and the
actual content.

Mohammed AbuJarour – CSS 1/2 22.10.24 42


CSS height and width
• The height and width properties are used to set the height and width of an
element.
• The height and width properties do not include padding, borders, or margins.
• It sets the height/width of the area inside the padding, border, and margin of the
element.
• The height and width properties may have the following values:
• auto - This is default. The browser calculates the height and width
• length - Defines the height/width in px, cm etc.
• % - Defines the height/width in percent of the containing block
• initial - Sets the height/width to its default value
• inherit - The height/width will be inherited from its parent value

Mohammed AbuJarour – CSS 1/2 22.10.24 43


CSS height and width
• The height and width properties are • The height and width properties may
used to set the height and width of an have the following values:
element. • auto - This is default. The browser calculates
• The height and width properties do not the height and width

include padding, borders, or margins. • length - Defines the height/width in px, cm


etc.
• It sets the height/width of the area
• % - Defines the height/width in percent of the
inside the padding, border, and margin containing block
of the element. • initial - Sets the height/width to its default
value
• inherit - The height/width will be inherited
from its parent value

Mohammed AbuJarour – CSS 1/2 22.10.24 44


All CSS dimension properties

Property Description

height Sets the height of an element

width Sets the width of an element

max-height Sets the maximum height of an element

max-width Sets the maximum width of an element

min-height Sets the minimum height of an element

min-width Sets the minimum width of an element

Mohammed AbuJarour – CSS 1/2 22.10.24 45


CSS text

• The text-align property is used to set the • The vertical-align property sets
horizontal alignment of a text. the vertical alignment of an
• A text can be left or right aligned, element.
centered, or justified. • The vertical-align property can
• The direction property can be used to have values: auto, baseline,
change the text direction of an element: bottom, middle , top, text-bottom,

• Direction can have values: ltr, rtl, initial, text-top

inherit
Mohammed AbuJarour – CSS 1/2 22.10.24 46
All CSS font properties
The CSS font properties define the font family, boldness, size, and the style of a text.

Property Description

font Sets all the font properties in one declaration

font-family Specifies the font family for text

font-size Specifies the font size of text (in Pixels or Em)

font-style Specifies the font style for text (normal, italic, oblique)

font-variant Specifies whether or not a text should be displayed in a small-caps font

font-weight Specifies the weight of a font (bold, normal, etc.)

Mohammed AbuJarour – CSS 1/2 22.10.24 47


CSS font families

• 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”)
• Font families include:
• Serif: Times New Roman, Georgia
• Sans-serif: Arial, Verdana
• Monospace: Courier New, Lucida, Console

Mohammed AbuJarour – CSS 1/2 22.10.24 48


CSS font families

• Best practice: Start with the font you want, and end with a generic family, to let the
browser pick a similar font in the generic family, if no other fonts are available.

font-family: "Times New Roman", Times, serif;

Mohammed AbuJarour – CSS 1/2 22.10.24 49


CSS links

• Links can be styled with any CSS • The four links states are:
property (e.g., color, font-
1.a:link - a normal, unvisited link
family, background, etc.).
2.a:visited - a link the user has visited
• In addition, links can be styled
differently depending on 3.a:hover - a link when the user
what state they are in. mouse is over it
4.a:active - a link the moment it is
clicked

Mohammed AbuJarour – CSS 1/2 22.10.24 50


CSS links
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: hotpink;
}
a:active {
color: blue;
}

Mohammed AbuJarour – CSS 1/2 22.10.24 51


CSS links
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: hotpink;
}
a:active {
color: blue;
}

Mohammed AbuJarour – CSS 1/2 22.10.24 52


CSS units
• CSS has several different units for expressing a length.
• Many CSS properties take “length” values, such as width, margin, padding, font-
size, etc.
• Length is a number followed by a length unit, such as 10px, 2em, etc.
• A whitespace cannot appear between the number and the unit.
However, if the value is 0, the unit can be omitted.
• For some CSS properties, negative lengths are allowed.
• There are two types of length units: absolute and relative.

Mohammed AbuJarour – CSS 1/2 22.10.24 53


CSS units – absolute lengths

Unit Description • The absolute length units are fixed


cm centimeters • Any length expressed in any of these
mm millimeters will appear as exactly that size.
in inches (1in = 96px = 2.54cm)
• Absolute length units are not
px pixels (1px = 1/96th of 1in) recommended for use on screen,
pt points (1pt = 1/72 of 1in) because screen sizes vary so much
pc picas (1pc = 12pt)

Mohammed AbuJarour – CSS 1/2 22.10.24 54


CSS units – relative lengths

Unit Description • Relative length units specify a


em
Relative to the font-size of the element length relative to another
(2em means 2 times the size of the current font)
length property.
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the “0” (zero)
• Relative length units scale
rem Relative to font-size of the root element
better between different
vw Relative to 1% of the width of the viewport
rendering mediums.
vh Relative to 1% of the height of the viewport
vmin Relative to 1% of viewport’s smaller dimension
vmax Relative to 1% of viewport’s larger dimension

% Relative to the parent element

Mohammed AbuJarour – CSS 1/2 22.10.24 55


Styling lists
Styling lists – browser’s default styling
<body>
<h1>Styling Lists</h1>

<p>This is how you can style <b>unordered</b>


lists using CSS.
<ul>
<li>Inlined CSS</li>
<li>Internal CSS</li>
<li>External CSS</li>
</ul>
</p>
<hr>
<p>This is how you can style <b>numbered</b>
lists using CSS.
<ol> Default styling sets:
<li>Inlined CSS</li>
<li>Internal CSS</li> • list-style-type
<li>External CSS</li>
</ol>
• margin
</p>
</body>
• padding

Mohammed AbuJarour – CSS 1/2 22.10.24 57


Styling lists – remove browser’s default styling

ul{
list-style-type: none;
margin: 0;
padding: 0;
}

Mohammed AbuJarour – CSS 1/2 22.10.24 58


Styling lists – change list item markers
The list-style-type property specifies the type <ul class="circle">
<li>Keep it simple</li>
of list item marker. </ul>

ul.circle{
list-style-type: circle;
}
ul.decimal{
list-style-type: decimal;
}
ul.lower-alpha{
list-style-type: lower-alpha;
}
ul.upper-alpha{
list-style-type: upper-alpha;
}

Mohammed AbuJarour – CSS 1/2 22.10.24 59


Styling lists – image as list item markers
The list-style-image property specifies an image as the list item marker

<ul class="li-image">
<li>Inlined CSS</li>
<li>Internal CSS</li>
<li>External CSS</li>
</ul>

ul.li-image{

list-style-image: url('li-icon.png');

Mohammed AbuJarour – CSS 1/2 22.10.24 60


Styling lists – coloring
ul {
background: darkcyan;
}

ul li {
background: lightgrey;
}

ol {
background: tomato;
}

ol li {
background: lightyellow;
}

Mohammed AbuJarour – CSS 1/2 22.10.24 61


Styling tables
Default styling of tables
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Company</th>
</tr>
<tr>
<td>John Doe</td>
<td>john@doe.com</td>
<td>Doe Lmtd</td>
</tr>
<tr>
<td>Max Mustermann</td>
<td>max@mustermann.de</td>
<td>Muster Firma</td>
</tr>
</table>

Mohammed AbuJarour – CSS 1/2 22.10.24 63


Styling tables with CSS
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Company</th>
</tr>
<tr>
<td>John Doe</td>
<td>john@doe.com</td>
<td>Doe Lmtd</td> table,th,td {
</tr> border: 1px solid black;
<tr>
<td>Max Mustermann</td> }
<td>max@mustermann.de</td> table {
<td>Muster Firma</td>
</tr> border-collapse: collapse;
</table>
}

Mohammed AbuJarour – CSS 1/2 22.10.24 64


Styling tables with CSS
<table>
<tr>
<th class="space dark">Name</th>
<th class="space dark">Email</th>
<th class="space dark">Company</th>
</tr>
<tr>
<td class="space"> John Doe</td>
<td class="space">john@doe.com</td> th.space, td.space {
<td class="space">Doe Lmtd</td>
padding: 10px;
</tr>
<tr> }
<td class="space">Max Mustermann</td> th.dark {
<td class="space">max@mustermann.de</td> background-color: steelblue;
<td class="space">Muster Firma</td>
color: white;
</tr>
</table> }

Mohammed AbuJarour – CSS 1/2 22.10.24 65


Styling tables with CSS
<table class="size">
<tr>
<th>Name</th>
<th>Email</th>
<th>Company</th>
</tr>
<tr>
<td>John Doe</td>
<td>john@doe.com</td>
table.size {
<td>Doe Lmtd</td>
</tr> width: 100%;
<tr>
}
<td>Max Mustermann</td>
<td>max@mustermann.de</td>
<td>Muster Firma</td>
</tr>
</table>

Mohammed AbuJarour – CSS 1/2 22.10.24 66


Styling web forms
Web forms – default styling
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your
name..">

<label for="lname">Last Name</label>


<input type="text" id="lname" name="lastname" placeholder="Your
last name..">

<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>

<input type="submit" value="Submit">


</form>

Mohammed AbuJarour – CSS 1/2 22.10.24 68


Web forms – CSS styling
<style> margin: 8px 0;
input[type=text],select { border: none;
width: 100%; border-radius: 4px;
padding: 12px 20px; cursor: pointer;
margin: 8px 0; }
display: inline-block;
border: 1px solid #ccc; input[type=submit]:hover {

border-radius: 4px; background-color: #00C1A3;


box-sizing: border-box; }

}
div {

input[type=submit] { border-radius: 5px;


width: 100%; background-color: #f2f2f2;
background-color:#00D8A3; padding: 20px;

color: white; }
padding: 14px 20px; </style>

Mohammed AbuJarour – CSS 1/2 22.10.24 69


References

• CSS: https://www.w3schools.com/css/default.asp
• Learn to style HTML using CSS: https://developer.mozilla.org/en-
US/docs/Learn/CSS

Mohammed AbuJarour – CSS 1/2 22.10.24 70


CSS exercises

• https://github.com/TheOdinProject/css-exercises

Mohammed AbuJarour – CSS 1/2 22.10.24 71


Exercise CSS 1

• Implement this design in CSS


o Get as close as possible.
You don’t need to be 100% complete.

Mohammed AbuJarour – CSS 1/2 22.10.24 72


Exercise CSS 2

• Implement this design in CSS


o Get as close as possible.
You don’t need to be 100% complete.

Mohammed AbuJarour – CSS 1/2 22.10.24 73


Exercise CSS 3

• Implement this design in CSS


o Get as close as possible.
You don’t need to be 100% complete.

Mohammed AbuJarour – CSS 1/2 22.10.24 74


Exercise CSS 4

• Implement this design in CSS


o Get as close as possible.
You don’t need to be 100% complete.

Mohammed AbuJarour – CSS 1/2 22.10.24 75

You might also like