me/portfolio
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add new page

Browse Source
This commit is contained in:
Matthew Grove
2020-06-24 15:22:03 +01:00
parent 3fd3dd10c7
commit dc6d1d4b4b
43 changed files with 2503 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
_site/computer-science-blog/pages/css.html Normal file
View File

@@ -0,0 +1,64 @@
<!-- Reading School 2018, HTML page by Matthew Grove, Year 10 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="HandheldFriendly" content="True">
<!-- import Roboto (font) -->
<link href="/css/roboto.css" rel="stylesheet" type="text/css">
<!-- import Bootstrap -->
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- import local styling & scripts -->
<link href="../css/presentation-imports.css" rel="stylesheet" type="text/css">
<script src="../js/css-presentation-slide.js"></script>
</head>
<body>
<h2>CSS</h2>
<p>
CSS, Cascading Style Sheets, are web documents that allow stylisation of HTML documents. CSS allows you to change the size, style, font, and colour of text; margins and padding; background colours and border styles. To change the appearance of something in CSS, there must be the following format:
h1 {
Background-color: red;
}
which would make the background colour of heading 1 tags (big headings) red. The spellings in CSS are American, for example color, and semicolons are extremely important. The following hyperlink has a list of all the CSS commands and what they do when you click on them.
Cascading Stylesheets (CSS) allow the size, style, font & colour of text; background colours & border styles and more to be changed in HTML pages.
A page without CSS can be very bland and boring:
<br>
<img class="presentation-image" src="../images/without_css.jpg">
<br>
But one with CSS looks a lot more presentable:
<br>
<img class="presentation-image" src="../images/with_css.jpg">
<br>
CSS declarations use the <i>tag names</i> (e.g. <code>p</code>), <i>classes</i> and IDs of
the elements on the page in order to style them. IDs are written with a preceding hashtag,
classes are written with a preceding full stop and tag names are written without any preceding characters.
The styles themselves (like <code>height</code>) should all end in semicolons. A comment in CSS is started
with <code>/*</code> and ended with <code>*/</code>.
Here are some example declarations:
<br>
<code>
p {<br>
/* this changes the font size of all p elements */<br>
&nbsp;&nbsp;&nbsp;&nbsp;font-size: 3rem;<br>
}<br>
.class_name {<br>
/* this changes the height of all elements with the class name 'class_name' */<br>
&nbsp;&nbsp;&nbsp;&nbsp;height: 200px;<br>
}<br>
#id_name {<br>
/* this changes the font of all elements with the ID 'id_name' */<br>
&nbsp;&nbsp;&nbsp;&nbsp;font-family: 'Roboto'<br>
}<br>
</code>
<br>
<span id="css_attribute_list_link"></span>
</p>
</body>
</html>