Informatics1-2017/Practice5
Tartalomjegyzék |
CSS
CSS is an optional formatting companion to HTML. We can make much better looking websites using CSS than just using HTML.
Creating the CSS file
For an HTML to use CSS it has to conatin a link to a CSS file (.css extension), where the formatting is found. For example:
public_html | +- index.html | +- style.css
Where the contents of index.html is:
<!DOCTYPE html> <html> <head> <title>...</title> <link type="text/css" rel="stylesheet" href="style.css"> </head> <body> ... </body> </html>
Let's look at the webpage:
and the associated CSS file:
Contents of a CSS file
In a CSS we can modify the attributes of any HTML tag:
html{
background: white;
}
What this means is for the HTML files where this CSS is linked, the <html> tag will have the background: white attribute. Thus the background of the webpage will be white.
a{
color: blue;
}
This makes all a tags (links) blue.
Some attributes:
| attribute | possible values |
|---|---|
| color | black, red, #E0E0E0 |
| backround-color | black, red, #E0E0E0 |
| font-size | small, large, 12px, 200% |
| text-align | center, left, right |
| font | Roman, Latin |
| font-style | italic |
| font-weight | bold |
Classes
What if we only want to modify a specific line and not all tags of a kind? For example here:
<body> <div>First line</div> <div>Second line</div> <div>Third line</div> </body>
Making only the second line pink:
<body> <div>First line</div> <div class="my_pink_style">Second line</div> <div>Third line</div> </body>
And now the CSS file:
div{
color: black;
}
div.my_pink_style{
color: pink;
}
We can create all kinds of divs, all with their own styles. And not only divs, we can use classes to format any tag:
<a class="small_link" href="index.hu">Index</a> <a class="important_link" href="bme.hu" >BME</a>
CSS:
a.small_link{
color: blue;
font-size: small;
}
a.important_link{
color: red;
font-size: large;
}
Another method is to name tags and reference them in the CSS:
<div>First line</div> <div id="first_pink">Second line</div> <a id="pink_link" href="#something">a linkk</a>
CSS::
#pink_link{
color: pink;
text-decoration: underline;
}
#first_pink{
color: pink;
font-size: large;
}
When using classes we can create as many tags with the same class as we want, but ids are unique. For example only one tag may have the id pink_link
Tables
Basic table in HTML:
<table> <tr><th>First column</th><th>Second column</th></tr> <tr><td>a</td><td>b</td></tr> <tr><td class="center" colspan="2">2 wide data</td> </tr> <tr><td rowspan="2">c</td><td>d</td></tr> <tr> <td>d</td></tr> </table>
CSS:
td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
td.center {
text-align: center;
}
This way the table will have a border. Check out the center align as well.
Selector
A link can have more than one style, it looks different when it has already been visited, when the cursor is over the link and lastly when the mouse button is pressed over the link:
a {text-decoration: underline;}
a:active {color: red;}
a:visited {color: grey;}
a:link {color: blue;}
a:hover {text-decoration: line-through;}
This way every link is underlined, but the different states have different styles.
We can specify a class that doesn't reference a given tag, but globally a class:
.center {
text-align: center;
}
Using it in HTML:
<h1 class="center">title centering</h1> <div class="center">text centering</div> <a class="center" href="math.bme.hu">link centering</a>
Useful links
- Check out the other students or teachers websites. Feel free to copy stuff that you like.
- CSS documentation
- css validator
- CSS3 Cheat Sheet
- HTML5 Cheat Sheet
If you don't have a webpage yet
Save these files in your public_html folder:
Tasks
Create a new file in the public_html folder named style.css, open this file and index.html as well.
- Elõször csak inline írjunk CSS kódot az index.html-ünkbe, valahol változtassátok meg a betûk méretét ( style = "font-size:large" )
- Írjatok pár span-t az index.html-be, és adjátok õket valamilyen névvel hozzá egy osztályhoz. ( class = "kiemelt" )
- A style.css-t kapcsoljátok be az index.html-be és az orarend.html-be is. ( <link rel="stylesheet" href="style.css"> a head-be )
- A style.css segítségével érjétek el, hogy a 2. pontban definiált osztályba tartozó span-ek dõlt betûvel legyenek. (9. előadás)
- Most érjétek el, hogy az összes p-ben levõ szövegetek dõlt betûvel legyen.
- Mivel így már nem látszik mely szövegrészek voltak a kiemelt span-ben, így változtassátok meg, hogy a kiemeltek ne legyenek dõltek, legyenek félkövérek.
- Próbáljátok a szövegetek adott részeit máshova igazítani, pl a címet középre. Használjatok a címhez id-t, ne class-t. (9. előadás)
- Térjünk át az órarendre. Érjétek el, hogy jelentõs margója legyen a táblázatotok head (th) celláinak. Arra vigyázzatok, hogy ilyenkor a border="1"-et ki kell venni a html kódból. (9. előadás)
- Csináljatok szép keretet a táblázatnak, ne fekete legyen, próbáljátok meg hogy néz ki a dupla, esetleg ha vastagabb. (9. előadás)
- Térjünk vissza az index.html-re. Érjétek el, hogy ne a hagyományos módon legyen kiírva a listátok, mondjuk gyémántok legyenek a jelölõk, vagy római számok a számok. (9. előadás)
- Változtassátok meg a linkeket, pl ne legyenek aláhúzva, vagy más színnel legyenek. (pl: a:link {font-size:small;}, van még a:visited, a:hover, a:active)
- Éljétek ki magatokat, tegyétek olyanná az oldalt amilyenné szeretnétek.
