Scribd
Upload
2 views35 pages

CSS2022

The document provides guidelines for web localization and CSS integration, emphasizing consistent naming conventions for files using camelCase or snake_case. It explains the three methods of integrating CSS: inline, embedded, and external, along with their respective advantages. Additionally, it covers the use of classes and IDs in CSS for styling elements on a webpage.

Uploaded by

alice.alvespinto
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
2 views35 pages

CSS2022

The document provides guidelines for web localization and CSS integration, emphasizing consistent naming conventions for files using camelCase or snake_case. It explains the three methods of integrating CSS: inline, embedded, and external, along with their respective advantages. Additionally, it covers the use of classes and IDs in CSS for styling elements on a webpage.

Uploaded by

alice.alvespinto
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/ 35

Web Localisation II

CSS

Lucía Morado Vázquez – Office 6336


Localisation
https://web.speakup.info/

Room number: 28251

Questions?

Localisation
Naming your files:
o Do not use spaces!
o The two main conventions are:
o LuciaMoradoWhatever.zip camelCase
o luciaMorado (lowerCamelCase)
o LuciaMorado (UpperCamelCase)
o Lucia_Morado_Whatever.zip snake_case
Before we
start…
o Choose one and be consistent
o Unless necessary, do not mix them:
o Lucia_MoradoWhatever.zip
o Each company might have their own naming conventions,
follow them. In this course, please use (upper) camel case:
SurnameNameWhatever.zip
Localisation Source images: https://dibujosfaciles.de/animales/serpientes/
https://en.wikipedia.org/wiki/Camel_case
1. Introduction
2. CSS Integration
➢Inline CSS
➢Embedded CSS
➢External CSS
Table of 3. Hands-on session
contents

Localisation
Cascading Style Sheets

CSS1 was released as a W3C recommendation in 1996.


With a CSS you can control the format and display of:
-Colours and backgrounds.
-Fonts and text.
CSS -Spacing.
-Elements positioning and sizing.
-Element visibility.

Localisation
o The style is isolated from the main content.
o The whole web site has the same style.
o It is easier to change the style of several pages.

CSS

Localisation
Localisation
8
Utilité des
feuilles de
style CSS

Localisation
9
Localisation
10
Utilité des
feuilles de
style CSS

Localisation
11
Localisation
12
Localisation
13
Three possibilities:

o Within the tags, using the attribute style : inline CSS


o Within the style tag in the head section : embedded
CSS CSS

integration o In a separate file : external CSS

14

Localisation
oThe style is included directly in the tags.

For example:
<p style="color:sienna;margin-left:20px">
This is a paragraph.
Inline CSS </p>

Localisation
oThe style is included within the <style> tag in the <head>
section of the HTML document.

Embedded <head>
CSS <style type="text/css">
p {color:#ffcccc; text-align:center;}
body {background-color:#b0c4de;}
</style>
</head>
16

Localisation
o The style is isolated (from the HTML) in a single file CSS file.
o There is a link from the HTML to that CSS file:

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

External CSS </head>

Localisation
Hands-on session
Syntax and rules

Element
body declaration
{
CSS background-color:#2d4671; value
}

attribute

Localisation
h1
{
CSS text-align:center;
}

Localisation
Localisation
Localisation
p
{
color:#ffffff;
CSS
}

Localisation
Contrast Checker

https://webaim.org/resources/contrastchecker/
https://webaim.org/articles/contrast/
Localisation
p
{
color:#ffffff;
CSS font-size:30px;
text-align:center;
}

Localisation
h1
{
text-align:center;
CSS
color:#ffcdaa;
font-family:Arial;
}

Localisation
Localisation
oSometimes the basic style is not enough. E.g. You might
want to have more than one style for your paragraph [p]
text.

oYou can create “classes” to create more elaborated and


CSS – Classes specific style sheets.

oYou have to define the class in your style sheet and then
“call” it in your html.

Localisation
.irish
{
background-color:#CCFFCC;
color:#669933;
CSS – Classes font-size:40px;
text-align:center;
font-family:Helvetica;
}

Localisation
<p class="irish"> Is grá liom Éire</p>
CSS - Classes

Localisation
o IDs are only used once in the webpage. If you need to use it
in several places, use classes.

o Using IDs more than one if your webpage will make the
validation processes fail.
Classes vs IDs
o Do not use classes or IDs if you do not really need them.

Localisation
#copyright
{
color:#cdcdcd;
CSS - IDs
font-size:20px;
font-family:courier;
text-align:center;
}

Localisation
CSS – IDs
<p id="copyright">© Lucía Morado
Vázquez 2022</p>

Localisation
34

Localisation
http://www.w3schools.com/css/css_examples.asp
http://drpeterjones.com/colorcalc/
http://colorschemedesigner.com/
http://www.colorzilla.com/firefox/
Useful resources https://webaim.org/articles/contrast/

Localisation

You might also like