Differences

This shows you the differences between two versions of the page.

--- web_design:horario:css [2021/10/10 19:39]
mag created
+++ web_design:horario:css [2023/08/16 09:33] (current)
@@ Line 1: / Line 1: @@
-====== Web Development Lesson 3 - Horario ======
+====== Lección 3 de Desarrollo Web - Tablas ======
 ===== Cascading Style Sheets (CSS) =====
 ==== Setup ====
@@ Line 39: / Line 39: @@
 }</code>
+==== Alignment ====
+  * There are four types of text alignment. You've used <html>right</html>, and the default is left. You can also use <html>center</html>, but today, let's try <html>justify</html>. This aligns both the left and the right ends of the text as you see in books.
+<code>text-align: justify;</code>
+  * Did you add this line inside the brackets on its own line? Did it work as expected? If it didn't, try to work out what you did wrong (eg spelling, missing <html>;</html>) or ask for help.
+==== Italic ====
+  * Now make the <html>span</html> italic using the following code.
+<code>span {
+  font-style: italic;
+}</code>
+  * If you had more than one <html><span></html> tag, they would all be italicised.
+  * Try adding another <html><span></html> tag somewhere in the text. Did it automatically become italicised? That's handy, isn't it?
+==== Font Family ====
+  * Let's modify the heading.
+  * We can change the font family by adding the same code as the attribute.
+<code>h1 {
+  font-family: Arial, sans-serif;
+}</code>
+==== Font Size ====
+  * Let's make the heading really big.
+<code>font-size: 3em;</code>
+==== Underline, Small Caps, Line Height, Shadow ====
+  * Any attribute that works in HTML can be used in CSS. Let's complete the heading using the same attributes as before.
+<code>h1 {
+  font-family: Arial, sans-serif;
+  font-size: 3em;
+  text-decoration: underline;
+  font-variant: small-caps;
+  line-height: 3em;
+  text-shadow:2px 2px #ff0000;
+}</code>
+  * Notice that by placing each style definition on a separate line and indenting them makes it very clear which element is targeted and what styles they will use. If you haven't been indenting your code, please try from now on.
+[[web_design:horario:tables|Next: Tables]]

Tech School

User Tools

Site Tools

Differences

Page Tools