Scribd
Upload
2 views

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
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

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
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